Question

I’m drawing markers on a google map after it’s been panned or zoomed.
If the viewport has not totally changed than the markers that appeared before the move and should still appear after it are being painted on top of themselves again and again.
I know I have to delete all the markers from the map before the new markers are painted and I know I should be using marker.setMap(null);.
I just don’t know how and where to fit it in my code.

google.maps.event.addListener(map, 'idle', showMarkers);

function showMarkers(){
    // get viewport bounds
    var southWestLat = map.getBounds().getSouthWest().lat();
    var southWestLng = map.getBounds().getSouthWest().lng();
    var northEastLat = map.getBounds().getNorthEast().lat();
    var northEastLng = map.getBounds().getNorthEast().lng();            

    var marker;

    $.ajax({
        type: "POST",
        url: "markers.php",
        dataType: "json",
        data: ({'southWestLat' : southWestLat , 'southWestLng' : southWestLng , 'northEastLat' : northEastLat , 'northEastLng' : northEastLng}),
        success: function(coordinatesMap){
            for (var id in coordinatesMap){
                if (coordinatesMap.hasOwnProperty(id)){                     
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(coordinatesMap[id].lat,coordinatesMap[id].lng), 
                        map: map
                    });   
                }
            }
        }
    });         
}

Answer 1

For performance reasoning you don’t want to clear all the markers; Only the ones no longer on the map. This can be accomplished by storing the marker in an array or object. On ‘success’ you want to check if a marker is already at the lat lng using your array/object. If so then don’t add a new one, if not then add it. After you have finished processing the markers in the ajax request, remove the ones no longer visible on the map.