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";
        }
    }

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";
        }
    }

• javascript
• google-maps
• zooming
• google-maps-markers

• zoom_changed event: using map.getZoom() you can get information about current zoom value and pare it with previous saved one. – Anto Jurković Commented Jul 9, 2014 at 12:07
• Thanks, I'll get working on it. – user2790911 Commented Jul 9, 2014 at 12:16

3 Answers 3

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

});

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./maps/documentation/javascript/events

Thanks, I achieved it as below ('if(zoomDiff < 0)'). However, there is something intermittent about the placement of the markers. The data is being returned by the php but sometimes it isn't loaded onto the map. Any clues about what might be mis-timing?

      function pan_zoom(){
            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.lng();
                var marnum = 3;
                newZoom = map.getZoom();
                zoomDiff = newZoom - oldZoom;
                oldZoom = newZoom;
                if(zoomDiff < 0){
                    for(var index in oldmarkers) {
                        oldmarkers[index].setMap(null);
                        delete oldmarkers[index];
                    }
                    var fetchsize = marnum;
                } else {
                    for(var index in oldmarkers) {
                        if(!bounds.contains(oldmarkers[index].getPosition())){
                            oldmarkers[index].setMap(null);
                            delete oldmarkers[index];
                        }
                    }
                    oldsize = Object.size(oldmarkers);
                    var fetchsize = marnum - oldsize;
                }
                $.post('pzparsers/pzparsers.php', {north:north, south:south, west:west, east:east, fetchsize:fetchsize}, function(response){
                    document.getElementById('search_results').innerHTML = north+' '+south+' '+west+' '+east;
                    document.getElementById('search_results').innerHTML += response;
                    eval(response);
                    for(var index in newmarkers) {
                        oldmarkers[index] = newmarkers[index];
                        oldmarkers[index].setMap(map);
                    }           
                }); 
            });
        }