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?
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) ]});