Can a google map be removed from an element?

Question

I've been messing around with jQuery-UI's widget factory to create a google map widget.

The widget factory includes pre-built destroy capabilities to remove a widget from an element. I'm interested to know whether there's a way to detach the original element from a Google Map without removing the element from the DOM.

_{Most of the searching I've done leads to how to remove markers and other layers from a Google Map, rather than removing the map from the DOM.}

Answer 1

I think the simplest way is to create inner div inside the original div and initialize the map for the inner div. When destroying the map, just remove the inner div and that's it.

var $inner = $('<div style="width: 100%; height: 100%"></div>').appendTo('#map_div');
// creation:
var map = new google.maps.Map($inner[0], { ... });
// removal:
$inner.remove();

Without jquery:

document.getElementById('map_div').innerHTML = '<div id="inner_map_div" style="width: 100%; height: 100%"></div>';

// creation:
var map = new google.maps.Map(document.getElementById('inner_map_div'), { ... });

document.getElementById('map_div').innerHTML = ''; // removal