maps.getBounds() null when calling on map idle

Question

I need to set pointers to a map a) when the map is initialized and b) when the map is moved. To get the markers, I make a call to my API like this:

var bounds = map.getBounds();

and then take the bounds to get the correct markers.

The problem is, that when I put that API-call inside

google.maps.event.addListener(map, "bounds_changed", function(){})

it gets called way too often while dragging the map, but if I use

google.maps.event.addListener(map, "idle", function(){})

map.getBounds is null upon initializing.

edit: More code

$(document).ready(function(){    initialize(); });

function initialize() {    mapOptions = {
      zoom : 13,
      minZoom : minimumZoomLevel,
      scrollwheel : false,
      panControl : false    };    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

   google.maps.event.addListener(map, "idle", function() {
      myfunction();    }); });

function myfunction(){    var bounds = map.getBounds(); }

bounds is null!

What about bounds_changed event? http://stackoverflow.com/questions/2832636/google-maps-api-v3-getbounds-is-undefined — Christian Benseler, Mar 17 '15 at 12:30
I commented on that in my original post, that fires way too often when dragging (better: while dragging!) — Raphael Jeger, Mar 17 '15 at 12:30
I made this fiddle here: http://jsfiddle.net/pjhk3Lm9/ it's working ok. is map defined as a global variable? Is it acessible inside the myFunction() scope? — Christian Benseler, Mar 17 '15 at 12:39

Christian Benseler · Answer 1 · 2015-03-17T12:41:35.693

0

I'm using this piece of code here: http://boascervejas.com.br and it works ok:

var mapgoogle = null;
//do some stuff
var mapOptions = //something here
mapgoogle = new google.maps.Map(document.getElementById("map"), mapOptions);

google.maps.event.addListener(mapgoogle, 'idle', function() {
   var bounds = mapgoogle.getBounds();
   console.log(bounds);
   //it's only called when the "end of the drag" is fired
});

EDIT: full working example with jsfiddle (http://jsfiddle.net/pjhk3Lm9/):

js:

var map = null;

function initialize(lat, lng) {
   var myLatlng = new google.maps.LatLng(lat,lng);
   var mapOptions = {
      mapTypeControl: false,
      streetViewControl: false,
      center: myLatlng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    google.maps.event.addListener(map, 'idle', function() {
        console.log(map.getBounds());  
    })
};


navigator.geolocation.getCurrentPosition(
    function(position) {
        initialize(position.coords.latitude, position.coords.longitude);
    },
    function(position) {
        initialize(-23.5354986,-46.6839113);
    }
);

//html and css
<div id="map-canvas"></div>
#map-canvas {
    width: 400px;
    height: 400px;
    border:1px solid #FF0000;
}

edited Mar 17 '15 at 12:41

answered Mar 17 '15 at 12:15

Christian Benseler

7,907
8
40
71

I use the same, apart from that I call my function to get the markers inside the idle-function!? – Raphael Jeger Mar 17 '15 at 12:18
btw, the comment in your code is not correct - "idle" is fired once when the map idles, not after dragging – Raphael Jeger Mar 17 '15 at 12:25
@RaphaelJeger that's the reason I put it inside the quotes ;-) – Christian Benseler Mar 17 '15 at 12:28
1

sure :) just wanted to add it to avoid confusion to anybody else – Raphael Jeger Mar 17 '15 at 12:28
1

Thank you for your fiddle! I have now seen that initialize is fired twice, on the first time bounds is null... – Raphael Jeger Mar 17 '15 at 12:48

maps.getBounds() null when calling on map idle

1 Answers1