CODEWITHSUNDEEP
javascriptjquerygoogle-maps-api-3
Vince Lowe
Vince Lowe

Reputation: 3620

re initialize gmap3 map

Is it possible to re initialize a gmap3 map to its default settings (lat, long, zoom etc)?

I tried destroy on the map and then re run the initialise but it is not working.

See my jsfiddle here - http://jsfiddle.net/vlowe/z9dDE/1/

Upvotes: 4

Views: 8796

Answers (2)

soupy1976
soupy1976

Reputation: 2845

Here's an alternative method: rather than destroying the map and recreating it entirely, you could save the initial state and the restore it to that state like this: http://jsfiddle.net/UvAL3/1/

(these functions existed as part of the API in V2)

Upvotes: 3

Alexander Schimpf
Alexander Schimpf

Reputation: 2392

Wrap the map element in a container div, and then when you want to reset the map, just remove the whole map div and recreate it. This should solve the problem.

According to the gmap3 documentation, you still need to call destroy on the map before removing the dom element.

HTML code

<div>
    <div id="map"></div>
</div>

<a href="#" onclick="restore();">restore</a>​

JavaScript

var dlat = 53.9783997; // default map latitude
var dlng = -1.5666347; // default map longitude
var dzoom = 6; // default map zoom
var dmaptype = "roadmap"; // default map type
// create gmap
$('#map').gmap3({
    action: 'init',
    options: {
        center: [dlat, dlng],
        zoom: dzoom,
        mapTypeId: dmaptype,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        scrollwheel: true,
        streetViewControl: true
    }
});


function restore() {

    $('#map').gmap3({
        action: 'destroy'
    });

    var container = $('#map').parent();
    $('#map').remove();
    container.append('<div id="map"></div>');

    // create new gmap
    $('#map').gmap3({
        action: 'init',
        options: {
            center: [dlat, dlng],
            zoom: dzoom,
            mapTypeId: dmaptype,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            scrollwheel: true,
            streetViewControl: true
        }
    });

}​

Upvotes: 4

Related Questions