구글 맵 이벤트

마커를 클릭하여 확대

전 페이지의 지도를 여전히 사용합니다: 영국 런던을 중심으로 한 지도.

지금, 사용자가 마커를 클릭할 때 확대하려고 합니다(마커에 이벤트 처리기를 추가하여 클릭 시 지도를 확대합니다).

이 코드를 추가합니다:

예제

// 마커를 클릭할 때 확대까지 9
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);
});

마커를 클릭할 때 정보 창이 엽니다

마커를 클릭하면 텍스트를 포함한 정보 창이 표시됩니다:

예제

var infowindow = new google.maps.InfoWindow({
  content: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

마커를 설정하고 각 마커에 정보 창을 엽니다

사용자가 지도를 클릭할 때 함수가 실행됩니다.

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: '위도: ' + location.lat() +
    '<br>경도: ' + location.lng()
  });
  infowindow.open(map,marker);
}