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 - /

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/vlowe/z9dDE/1/

• javascript
• jquery
• google-maps-api-3

• Just remove the destroy code. it will work as expected. – Kundan Singh Chouhan Commented Jul 8, 2012 at 15:31
• it tried that first, it does not – Vince Lowe Commented Jul 8, 2012 at 15:39

2 Answers 2

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

}​

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/UvAL3/1/

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