Can I remove a Google map from an item?

Question

I fiddled with the jQuery-UI widget factory to create a google map widget.

The factory widget includes predefined destroy features to remove the widget from the element. I am wondering if there is a way to separate the source element from Google Map without removing the element from the DOM.

_{Most of the search leads to how to remove markers and other layers from the Google map, rather than removing the map from the DOM.}

Answer 1

I think the easiest way is to create an inner div inside the original div and initialize the map for the inner div. When destroying a map, simply delete the inner div and 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 

Answer 2

Instead of .remove() you can also use the jQuery .empty() function on the div that contains the map. This function removes everything but a div . Therefore, you do not need to have an outer and inner div .