3

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?

4 Answers4

6

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

Engineer
  • 47,849
  • 12
  • 88
  • 91
4

There are two ways, either get the map and use the native setter:

var map = $("#map_canvas").gmap("get", "map");
map.setCenter(origin);

Or you use the plugin option setter

$("#map_canvas").gmap("option", "center", origin);
johansalllarsson
  • 927
  • 6
  • 8
  • good point about accessing `var map = $("#map_canvas").gmap("get", "map");` then you have access to all methods Google Maps API provides! – andilabs Feb 26 '15 at 13:06
1

with panTo, you can re-center the map

jQuery('#map_canvas').gmap.panTo(new google.maps.LatLng('0.00','0.00'));
Martijn
  • 15,791
  • 4
  • 36
  • 68
Roberto
  • 532
  • 7
  • 20
0

you must use 'option' before position centering...

...like example below (I used button click event and some other option):

$("#button").click( function(){
var latLng = new google.maps.LatLng(data.origin.latitude, data.origin.longitude);
$('#map_canvas').gmap('option', 'center', latLng);
$('#map_canvas').gmap('option', 'zoom', 7);     
$('#map_canvas').gmap('addMarker', {position: latLng,bounds: false});   
});

hope help you.

ilConfa
  • 1
  • 1