구글맵 이벤트 - 클릭한곳 마커찍기

UI 이벤트에서 인자 액세스하기

Google Maps API V3의 UI 이벤트는 일반적으로 이벤트 인자를 전달합니다. 이벤트 인자는 이벤트 발생 시 UI 상태를 알리는 이벤트 리스너를 사용해 액세스할 수 있습니다. 예를 들어 UI 'click' 이벤트는 일반적으로 지도의 클릭된 위치를 나타내는 latLng 속성이 포함된 MouseEvent를 전달합니다. 위 동작은 UI 이벤트에 고유하며 MVC 상태 변경 이벤트에서는 인자를 전달하지 않습니다.

객체 속성에 액세스하는 방식과 동일하게 이벤트 리스너 내의 이벤트 인자에 액세스할 수 있습니다. 다음 예제에서는 지도에 대한 이벤트 리스너를 추가하고 사용자가 지도를 클릭할 때 클릭된 위치에서 마커를 만듭니다.

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, 'click', function(event) {
    placeMarker(event.latLng);
  });
}
  
function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  map.setCenter(location);
}