CODEWITHSUNDEEP
jquerygoogle-mapsgoogle-maps-api-3
Kevin Daniel
Kevin Daniel

Reputation: 431

Google Maps API panTo not working

I'm trying to get a Google Map to pan and zoom to a property clicked from a list, then trigger the infowindow for that marker.

When you click on the "zoom to" link, nothing happens; no zoom, no pan, no errors.

Here's the code that is supposed to do the zooming, and everything works right up until the panTo, then it chokes.

$(document).on('click', '.zoomer', function () {
    var lats = $(this).data('latlng').split(',');
    var latlng = new google.maps.LatLng(lats[0], lats[1]);
    map.panTo(latlng);
    map.setZoom(3);
    return false;
});

I've tried everything I can find on here and so far nothing. Getting the infowindow to pop up makes me think that the whole thing needs to be in the bindInfoWindow function, but I have no clue how to go about linking that.

Here's a fiddle: http://jsfiddle.net/fsn2uu/5Mpfq/

Any ideas?

Upvotes: 0

Views: 2136

Answers (1)

danludwig
danludwig

Reputation: 47375

You have 2 var map declarations in here. Why are you creating 2 maps? Here, have a look at this fiddle fork:

http://jsfiddle.net/8Shze/2/

Instead of 

var map = ...

Your second declaration should just be

map = ...

Looks like your script was a victim of javascript hoisting. When you were calling map.panTo, it was not being invoked on the current visible map.

Here is another fiddle that omits the second map initialization altogether, and still works:

http://jsfiddle.net/8Shze/3/

Upvotes: 1

Related Questions