Encore PTL
Encore PTL

Reputation: 8214

Do not fire 'zoom_changed' event when calling fitBounds function on map

Is there a way to prevent the zoom_change event from being triggered if it occurs due to fitBounds() ?

I am having an issue where I need to do a search on the server from client when there is a zoom change to map but every time I call fitBounds() it causes zoom_change to trigger which causes the client to do another search on the server. I am only interested in zoom_change done by users and not programmatically using fitBounds.

Upvotes: 13

Views: 4567

Answers (6)

abby37
abby37

Reputation: 647

There is another way to do that by removing that that event. I think it would be much easier and cleaner than adding a global variable.

 vm.map.events.bounds_changed = function() {
   google.map.event.removeListener(zoom_changed);
   }

Another way (forgotten to add that):

     vm.map.events.bounds_changed = function() {
google.map.event.addEventListener(zoom_changed,function(mapper,eventName,args){});
           }

Upvotes: 1

Kyle Baker
Kyle Baker

Reputation: 3712

In my app, I may fire off zoom change events programmatically, either via setZoom(), fitBounds(), or setOptions().

MAN = {};
MAN.globalMap = google.maps.Map(document.getElementById('map'));

I then route all programmatic calls to set the zoom through wrapper functions that flip a flag to false before they go on to set the zoom.

MAN.savedZoom = MAN.globalMap.getZoom();
MAN.saveZoomFlag = true;
// we want it to always be true, unless zoom was
// changed programatically.

MAN.setZoom = function setZoom(zoomLevel) {
  console.log("won't save that I'm setting zoomLevel to " + zoomLevel);
  this.saveZoomFlag = false;
  MAN.globalMap.setZoom(zoomLevel);
};

MAN.fitBounds = function fitBounds(bounds) {
  console.log("setting bounds, won't save zoomlevel.");
  this.saveZoomFlag = false;
  MAN.globalMap.fitBounds(bounds);
};

MAN.setOptions = function setOptions(options) {
  console.log("setting options, won't save zoomlevel.");
  this.saveZoomFlag = false;
  MAN.globalMap.setOptions(options);
};

I then declare a listeners. At first I was declaring only the first, and was puzzled that it wasn't working:

  google.maps.event.addListener(
    MAN.globalMap,
    'zoom_changed',
    function zoom_changed_listener() {
      console.log(
        "zoom changed to " +
        MAN.globalMap.getZoom() + "; " +
        (MAN.saveZoomFlag ? "saving." : "not saving.")
      );
      if (MAN.saveZoomFlag) {
        console.trace("saving");
        MAN.savedZoom = MAN.globalMap.getZoom();
      }
      MAN.saveZoomFlag = true;
    }
  );

you may also find the idle event helpful, however, if you're just trying to avoid the initial set. See more about the maps events here: https://developers.google.com/maps/documentation/javascript/events

Upvotes: 0

Abram
Abram

Reputation: 41934

After many frustrating hours, here is my solution:

  var tiles_listener = google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    var zoom_listener = google.maps.event.addListener(map, 'zoom_changed', function() {
      reloadMarkers();
    });
  });

Note that I am calling addListenerOnce for tilesloaded to ensure that the zoome_changed listener is only added once, after the first fitBounds completes.

Upvotes: 5

kito
kito

Reputation: 181

It's an old question, but it may be useful to others. I had the same problem, zoom_changed been triggered every time I called fitBounds() when adding several markers to a map. What I did was to add the listener to the map_changed event after the map was completely loaded, like this:

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

Upvotes: 4

Shiridish
Shiridish

Reputation: 4962

I suppose this should be simple. Have a variable say

var z = map.getZoom(); //scope this variable appropriately(somewhere before you call the fitbounds()

and then after the map.fitbounds() immediately do

map.setZoom(z); //this automatically changes the zoom level back to the previous level

Upvotes: -3

geocodezip
geocodezip

Reputation: 161384

When you do a fitBounds in your program, set a global flag. When the zoom_changed event fires, if the flag is set, clear it, otherwise send your request off to the server.

Upvotes: 10

Related Questions