How to re-center a map using jquery-ui-map

Andreas Jung picture Andreas Jung · Mar 5, 2012 · Viewed 14.3k times · Source

Using jquery-ui-map.

I am loading data through JSON with some marker and the latitude/longitude of the new center of the map (location finder application).

var origin = new google.maps.LatLng(data.origin.latitude, data.origin.longitude)

// adding the marker for the new origin works
$('#map_canvas').gmap('addMarker', {'position': origin});

// does not work
$('#map_canvas').gmap('center', '49, 7');

// does not work
$('#map_canvas').gmap('center', origin);

// does not work
$('#map_canvas').gmap('center', {'position': origin});

All of the three center calls fail:

Uncaught TypeError: Cannot call method 'apply' of undefined
$.a.$.fn.(anonymous function)jquery.ui.map.js:46
b.extend.eachjquery.js:35
b.fn.b.eachjquery.js:28
$.a.$.fn.(anonymous function)jquery.ui.map.js:40
(anonymous function)@@geosearch:477
c.extend.handleSuccessjquery.js:144
c.extend.ajax.w.onreadystatechange

What is the canonical way here?

Answer

Engineer picture Engineer · Mar 5, 2012

Use this:

$('#map_canvas').gmap('get','map').setOptions({'center':origin});

Also see this link: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions