구글맵 줌 변경, 지도 이동 시 현재 지도의 범위에만 마커 출력하기

//초기 실행 함수

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