CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Sarawut Positwinyu
Sarawut Positwinyu

Reputation: 5042

Event for zoomed in or zoomed out

Is there any event to check if user end zoomed in a map or end zoomed out the map

What we do is.. we want to send the latitude or longtitude to server when they making change to the map. for example when they end dragging we will send the latitude and longtitude to server to load some shop location that are within boundary of that latitude and longtitude and we will put the pins on it. so all the possible event are user dragging map, zoom in, zoom out and scrolling. we will not use bounds_changed event because it will send data to the server all the time. 

    //Get bound of the map when a user dragged the map.
    google.maps.event.addListener(map, 'dragend', function () {
        bound = map.getBounds();
        var latlng_NE = bound.getNorthEast();
        var latlng_SW = bound.getSouthWest();

       // Some code to send latitude or longtitude to server here
       throw new Error(latlng_NE, latlng_SW);
    });

Upvotes: 0

Views: 221

Answers (1)

yunzen
yunzen

Reputation: 33439

From the Google Maps API doc

google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(moveToDarwin, 3000);
});

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

edit

// closure
(function() {

    var timeout = null;
    var delay = 500;

    function react() {
        if (timeout) {
            clearTimeout(timeout)
        }
        timeout = setTimeout(react, delay)
    }

    function sendBoundsToServer() {
        bound = map.getBounds();
        var latlng_NE = bound.getNorthEast();
        var latlng_SW = bound.getSouthWest();            
        // some AJAX action to send bound to server
        // ...
    }
    //Action after a user dragged the map.
    google.maps.event.addListener(map, 'zoom_changed', function () {
       // Some code to send latitude or longtitude to server here
       setTimeout(sendMessageToServer, 1000)
    });
    google.maps.event.addListener(map, 'dragend', function () {
       // Some code to send latitude or longtitude to server here
       setTimeout(react, 1000)
    });


    // Add more events here like the two above  


}())

Upvotes: 2

Related Questions