-
[Google Maps] 4. 구글 맵스 이벤트(Events) - 구글 맵 API 강좌Web/Google Maps 2016. 2. 28. 16:05
W3School 를 참고하여 작성하는 Google Map API 강좌입니다.
구성은 아래와 같습니다. 아래 링크를 통해서 하나하나 익히시면 됩니다.
Google Maps Events
Click The Marker to Zoom
이제 사용자가 마커를 클릭했을 때 줌을 하도록 해보곘습니다.
* markerZoom.html
12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html><html><head><scriptsrc="http://maps.googleapis.com/maps/api/js"></script><script>var myCenter=new google.maps.LatLng(37.250943, 127.028344);function initialize(){var mapProp = {center: myCenter,zoom:5,mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);var marker = new google.maps.Marker({position: myCenter,title:'Click to zoom'});marker.setMap(map);// Zoom to 9 when clicking on markergoogle.maps.event.addListener(marker,'click',function() {map.setZoom(9);map.setCenter(marker.getPosition());});}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap" style="width:500px;height:380px;"></div></body></html>cs addListener() 이벤트 핸들러를 사용해서 이벤트 알림을 위해 등록했습니다.
Pan Back to Marker
3초마다 마커로 위치시키는 이벤트를 등록해보도록 하겠습니다.
center_changed 이벤트를 등록하고 아래와 같은 방식으로 밀리세컨드 단위로 작성합니다.
123456google.maps.event.addListener(map,'center_changed',function() {window.setTimeout(function() {map.panTo(marker.getPosition());},3000);});cs Open an InfoWindow When Clicking on The Marker
마커를 클릭할 때, 특정 텍스트를 보이게 하는 infowindow를 작성합니다.
1234567var infowindow = new google.maps.InfoWindow({content:"Hello World!"});google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});cs Set Markers and Open InfoWindow for Each Marker
placeMarker() 함수는 사용자가 클릭 했을 때 클릭한 위치에 마커를 위치시키고, 위도와 경도를 infowindow로 보여줍니다.
* markerInfo.html
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!DOCTYPE html><html><head><scriptsrc="http://maps.googleapis.com/maps/api/js"></script><script>var map;var myCenter=new google.maps.LatLng(37.250943, 127.028344);function initialize(){var mapProp = {center:myCenter,zoom:5,mapTypeId:google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("googleMap"),mapProp);google.maps.event.addListener(map, 'click', function(event) {placeMarker(event.latLng);});}function placeMarker(location) {var marker = new google.maps.Marker({position: location,map: map,});var infowindow = new google.maps.InfoWindow({content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap" style="width:500px;height:380px;"></div></body></html>cs
end* 이 포스팅은 'w3school'를 통해 작성하였습니다.
'Web > Google Maps' 카테고리의 다른 글
[Google Maps] 6. 구글 맵스 타입(Types) - 구글 맵 API 강좌 (0) 2016.02.29 [Google Maps] 5. 구글 맵스 제어(Controls) - 구글 맵 API 강좌 (0) 2016.02.28 [Google Maps] 3. 구글 맵스 오버레이(Overlays) - 구글 맵 API 강좌 (0) 2016.02.28 [Google Maps] 2. 구글 맵스 기본 - 구글 맵 API 강좌 (0) 2016.02.28 [Google Maps] 1. 개요(Tutorial) - 구글 맵 API 강좌 (0) 2016.02.28
