Zoom out event for google maps?

Question

I'm trying to maintain a constant set of sample markers on my maps for easy viewing. I populate my maps with a random selection of markers from the database up to a certain number during pan and zoom. The main problem is to replace markers falling out-of-bounds with new markers in-bounds.

The code below works quite well except for zooming out. As I zoom out I want to repeatedly refresh the map with a new set of random markers, up to a certain number and spread evenly over the map. The problem is there is a zoom_changed event but it doesn't seem to distinguish between in and out.

Any suggestions?

      google.maps.event.addListener(map, 'idle', function() {
            bounds = map.getBounds();
            var southWest = bounds.getSouthWest();
            var northEast = bounds.getNorthEast();
            var north = northEast.lat();
            var south = southWest.lat();
            var west = southWest.lng();
            var east = northEast.lat();
            var marnum = 20;
            $.post('pzparsers/pzparsers.php', {north:north, south:south, west:west, east:east, marnum:marnum}, function(response){
                eval(response);
                bounds = map.getBounds();
                if(oldmarkers.length == 0 && newmarkers.length !== 0){
                    //b = $.extend( true, {}, a );
                    for (var i = 0; i < newmarkers.length; i++) {
                        oldmarkers[i] = newmarkers[i];
                        oldmarkers[i].setMap(map);
                    }
                } else if (oldmarkers.length !== 0 && newmarkers.length !== 0){
                    for (var i = 0; i < oldmarkers.length; i++){
                        if(!bounds.contains(oldmarkers[i].getPosition())){
                            oldmarkers[i].setMap(null);
                            oldmarkers[i] = newmarkers[i];
                            oldmarkers[i].setMap(map);
                        }
                    }
                }                       
            }); 
        });

The php: -

  $output .= "newmarkers.length = 0;\n";
    if($mrk_cnt > 0){
        for ($lcnt = 0; $lcnt < $mrk_cnt; $lcnt++){
            $output .= "var point = new google.maps.LatLng($lat[$lcnt], $lng[$lcnt]);\n";
            $output .= "var mrktx = \"$inf[$lcnt]\";\n";
            $output .= "var infowindow = new google.maps.InfoWindow({ content: mrktx });\n";
            $output .= "var marker = new google.maps.Marker({position: point, icon: $icon[$lcnt], title: '$inf[$lcnt]  $begin[$lcnt] - $end[$lcnt]'});\n";
            $output .= "google.maps.event.addListener(marker,'click', function() {infowindow.open(map,marker);});\n";
            //$output .= "marker.setMap(map);\n";       
            $output .= "newmarkers.push(marker);\n";
        }
    }

Answer 1

If there is no built-in function, make one. Try the following method:

var mapzoom;

function initialize()
{

    //first get the zoom value of the map in initialize function
    mapzoom=map.getZoom();
}

google.maps.event.addListener(map, 'zoom_changed', function() {

    var zoomLevel = map.getZoom();

    if(mapzoom> zoomLevel)
    {
        //means zoom out do your code here

    }

    mapzoom=map.getZoom(); //to stored the current zoom level of the map

});

Answer 2

zoom change event google map

google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    map.setCenter(myLatLng);
    infowindow.setContent('Zoom: ' + zoomLevel);
});

read more here

https://developers.google.com/maps/documentation/javascript/events