구글맵 이벤트 - 클릭하면 이동

addListener() 이벤트 핸들러를 사용하여 이벤트 알림을 등록합니다. 이 메소드는 객체, 수신할 이벤트, 지정된 이벤트가 발생할 때 호출할 함수를 받습니다.

다음 코드는 사용자 이벤트와 상태 변경 이벤트를 함께 사용합니다. 클릭하면 지도를 확대/축소하는 이벤트 핸들러를 마커에 연결합니다. 또한 'zoom' 속성 변경사항에 대한 이벤트 핸들러를 지도에 추가하고 zoom_changed 이벤트 수신 시 지도를 오스트레일리아 북부, 다윈으로 이동합니다.

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  google.maps.event.addListener(map, 'zoom_changed', function() {
    alert("두번째!!");
    setTimeout(moveToDarwin, 3000);
  });
  
  var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map,
      title:"Hello World!"
  });
  google.maps.event.addListener(marker, 'click', function() {
    alert("첫번째!!");
    map.setZoom(8);
  });
}
  
function moveToDarwin() {
  alert("세번째!!");
  var darwin = new google.maps.LatLng(-12.461334, 130.841904);
  map.setCenter(darwin);
}