• 목록

1. Click The Marker to Zoom

  이제 사용자가 마커를 클릭했을 때 줌을 하도록 해보곘습니다. 

var marker = new google.maps.Marker({

  position: myCenter,

  title:'Click to zoom'

  });

marker.setMap(map);

// Zoom to 9 when clicking on marker

google.maps.event.addListener(marker,'click',function() {

  map.setZoom(9);

  map.setCenter(marker.getPosition());

  });

addListener() 이벤트 핸들러를 사용해서 이벤트 알림을 위해 등록했습니다.

3. Open an InfoWindow When Clicking on The Marker

  마커를 클릭할 때, 특정 텍스트를 보이게 하는 infowindow를 작성합니다.

var infowindow = new google.maps.InfoWindow({

  content:"Hello World!"

  });

google.maps.event.addListener(marker, 'click', function() {

  infowindow.open(map,marker);

  });

4. Set Markers and Open InfoWindow for Each Marker

  placeMarker() 함수는 사용자가 클릭 했을 때 클릭한 위치에 마커를 위치시키고, 위도와 경도를 infowindow로 보여줍니다.

var map;

function initMap() {

  var seoul = { lat: 37.5642135 ,lng: 127.0016985 };

  map = new google.maps.Map(

document.getElementById('googlemap'), {

  zoom: 12,

  center: seoul

});

  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] 4. 구글 맵스 이벤트(Events) - 구글 맵 API 강좌 :: Palpit's Techlog (tistory.com)