Question

I am using the jquery-ui-map plugin (http://code.google.com/p/jquery-ui-map/). I have successfully created a map using the following code:

var home = new google.maps.LatLng(39.909736, -97.382813);
$('#myMap').gmap({ 'center': home, 'zoom': 3 });

However, after a user clicks a button, I want to update the “center” and “zoom” properties. For the life of me, I can’t seem to figure it out. I think its because I don’t fully understand JavaScript coding syntax. It just seems like this should be an easy thing, but its alluding me.

How do I update the center and zoom properies of a gmap?

Thank you!

Answer 1

With basic google.map plugin

To set the center

map.setCenter(new google.maps.LatLng(yourLatitude,yourLongitude));

To set the zoom

map.setZoom(yourZoomLevel);

With jQuery.UI

The same, but

map = $(‘#myMap’).gmap(‘get’, ‘map’);

Or something like that :

// html
<input type="text" id="zoomInput" value="10"/>
<input type="text" id="latInput" value="39.909736"/>
<input type="text" id="lngInput" value="-97.382813"/>
<input type="button" id="yourButton"/>

// JS document.ready
$('#yourButton').click(function(){
  $('#myMap').gmap('option', 'zoom', $('#zoomInput').val());
  var newCoords = new google.maps.LatLng($('#latInput').val(), $('#lngInput').val());
  $('#myMap').gmap({'center': newCoords });
});

Don’t hesitate to provide me all your javascript code, then I could integrate this.