구글맵 줌 변경, 지도 이동 시 현재 지도의 범위에만 마커 출력하기
//초기 실행 함수
function init(){
google.maps.event.addListener(map, 'zoom_changed', function() {
var bounds = map.getBounds();
var endLo = bounds.getNorthEast();
var startLo = bounds.getSouthWest();
addMarker(startLo, endLo);
});
google.maps.event.addListener(map, 'dragend', function(evt){
var bounds = map.getBounds();
var endLo = bounds.getNorthEast();
var startLo = bounds.getSouthWest();
addMarker(startLo, endLo);
});
}
//마커 출력 함수
function addMarker(startLo,endLo){
for (var i=0; i < 반복횟수; i++){
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "truck.png",
title : carnm+'('+carid+')'
});
markersArray.push(marker);
//지도에 출력된 마커를 클릭했을 경우 이벤트(infoWindow 출력)
google.maps.event.addListener(marker, 'click', function (event){
popInfoWindow(인포윈도우에 출력할 파라미터); //popInfoWindow 함수는 생략
});
}
}
전체 소스는 아니지만..위의 소스를 참고하여 맵 위치 이동 시 현재 모니터에 출력된 지도의 범위내에만 마커를 출력하는 기능을 구현할 수 있습니다.
zoom_changed, dragend 외에도 bounds_changed나 center_changed 등 상황에 맞는 이벤트를 사용하시면 됩니다.
리스너 등록 시 이벤트는 구글맵 API에 많이 나와있습니다.
Google Maps API 링크 : https://developers.google.com/maps/documentation/javascript/reference?hl=ko