Gmap3 applying a new center postion without destroying the whole map - google-maps

Question

I am hacking around with gmap3 managing to get the first task working. Showing the map using a lat long.
My javascript look likes
$('#map_canvas').gmap3(
{
action: 'init',
options: {
center: [x,y],
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: []
}
}
},
{
action: 'addMarkers',
radius: 100,
markers: GetMarkers(),
clusters:
{
0:
{
content: '<div class="cluster cluster-3">CLUSTER_COUNT <div class="cluster-3text">Stops</div> </div>',
width: 66,
height: 65
}
},
marker:
{
options:
{
icon: new google.maps.MarkerImage('../img/marker.png', size, origin, null, null)
},
events:
{
mouseover: function (marker, event, data) {
getArrivalsAndStop(marker, event, data);
},
mouseout: function () {
$(this).gmap3({ action: 'clear', name: 'overlay' });
}
}
}
});
This loads the map how I want. My next step is to be able apply a new lat & long. How can I do this without destroying the whole map and recreating it everytime?

Answer 1

I am using jquery gmap3 plugin.
If you want to call setCenter after having initialized the map and without reloading the whole thing you can do this like this :
$('#mymap').gmap3('get').setCenter(new google.maps.LatLng(48.706685,-3.486694899999975))
$('#mymap').gmap3('get') is the magic thing here, it give you the real google map object I think.
It was hard for me to find this out so I hope it can help someone else.

Answer 2

From the documentation:
This example executes map.setCenter with the result of the address resolution, target is not specified because this is the map.
$('#test').gmap3(
{
action: 'getLatLng',
address: '2 bis rue saint antoine, eguilles',
callback: function(result){
if (result){
$(this).gmap3({action: 'setCenter', args:[ result[0].geometry.location ]});
} else {
alert('Bad address 2 !');
}
}
});
So it looks like if you know the coordinates and don't need to use the geocoder, it would be:
$(this).gmap3({action: 'setCenter', args:[ new google.maps.LatLng(latitude, longitude) ]});

Answer 3

Kind of late in the game, but I am using a list and map(google maps type). hope it helps
Here is how I achieved it
$(document).delegate('#inner_list li', 'click', function () {
var id = $(this).attr('data-id');
$("#map-canvas").gmap3({
get: {
name:"marker",
id: id,
all: true,
callback: function(objs){
$.each(objs, function(i, obj){
obj.setIcon("http://www.markericon.com");
var newLL = obj.getPosition()
$('#map-canvas').gmap3('get').panTo(newLL)
});
}
}
});
});