확대 아이콘을 클릭 - 구글 맵에 이벤트 핸들러를 연결합니다.
확대하기 위해 마커를 클릭
런던, 영국을 중심으로지도 : 우리는 여전히 이전 페이지에서지도를 사용합니다.
이제 우리는 사용자가 마커를 클릭하면 확대 할 (우리는 클릭하면지도를 확대 마커에 이벤트 핸들러를 첨부).
여기에 추가 된 코드는 다음과 같습니다
예
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
}); »그것을 자신을 시도 우리는 사용하여 이벤트 알림을 등록 addListener() 이벤트 핸들러를. 그 방법은, 특정 이벤트가 발생할 때 호출하는 객체를 수신하는 이벤트 및 기능 걸린다.
마커 위로 이동
여기, 우리는 '센터'속성에 변화를지도에 이벤트 처리기를 추가하고하여 center_changed 이벤트 3 초 후에 다시 마커로지도를 이동 :
예
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},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(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);
} »그것을 자신을 시도