Google 지도 이벤트
마커를 클릭하여 확대/축소
우리는 여전히 이전 페이지의 지도를 사용합니다. 영국 런던을 중심으로 한 지도입니다.
이제 사용자가 마커를 클릭할 때 확대/축소하려고 합니다(클릭하면 지도를 확대/축소하는 마커에 이벤트 핸들러를 연결합니다).
추가된 코드는 다음과 같습니다.
예시
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
addListener() 이벤트 핸들러를 사용하여 이벤트 알림을 등록합니다. 이 메서드는 개체, 수신할 이벤트 및 지정된 이벤트가 발생할 때 호출할 함수를 사용합니다.
마커로 돌아가기
여기에서 확대/축소 변경 사항을 저장하고 3초 후에 지도를 다시 이동합니다.
예시
google.maps.event.addListener(marker,'click',function() {
var pos = map.getZoom();
map.setZoom(9);
map.setCenter(marker.getPosition());
window.setTimeout(function() {map.setZoom(pos);},3000);
});
마커를 클릭할 때 InfoWindow 열기
마커를 클릭하면 일부 텍스트가 포함된 정보창이 표시됩니다.
예시
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
각 마커에 대한 마커 설정 및 InfoWindow 열기
사용자가 지도를 클릭하면 함수를 실행합니다.
placeMarker() 함수는 사용자가 클릭한 위치에 마커를 배치하고 마커의 위도와 경도가 포함된 정보창을 표시합니다.
예시
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(map, event.latLng);
});
function placeMarker(map, 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);
}