I'm trying to create a button on the jQuery Ui Map, when the user clicks the button the map should panTo (or center) on the users location
I have the following control
<div id="userLocate" style="margin:15px 15px 15px 20px;padding:5px 5px 5px 10px;"><img src="img/locate.png"></div>
And this JS
$('#map_canvas').gmap().bind('init', function() {
//Set click event on userLocationControl
$('#userLocate').click(function(event) {
var lat = newPoint.lat();
var lng = newPoint.lng();
var np = new google.maps.LatLng(lat, lng);
console.log("lat: " + lat + " lng: "+ lng);
$('#map_canvas').gmap('get', 'map').panTo(np);
console.log("lat: " + np.lat() + " lng: "+ np.lng());
$('#map_canvas').gmap('option', 'zoom', 15);
});
//Add userLocationControl
$('#map_canvas').gmap('addControl', 'userLocate', google.maps.ControlPosition.RIGHT_BOTTOM);
});
When the button is clicked I can see the log writing the correct latitude and longitude before and after the call to panTo method, however the map is being panned to position 0,0. I've tried using the setCenter method and have the same result
If call the method outside the click function and send it the newPoint variable (which is a LatLng object) everything works fine
