Gmap3 applying a new center postion without destroying the whole map

Diver Dan picture Diver Dan · Jul 31, 2012 · Viewed 9.6k times · Source

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

Guillaume Gendre picture Guillaume Gendre · Dec 17, 2012

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.