Unload Google Maps API? - ajax

Question

I have a main page that uses ajax to load subpages and one of these subpages contains a google map, and so it loads the google maps api using the <script> tag:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
I noticed that this loads a bunch of css and js files into both my main page and subpage. When I click on a different link in my main page, I want to be able to unload all of these files and remove any js objects that were created, i.e., clean up everything and return to the original state. Is there any way to do this?

Answer 1

The answer to your question is actually a bit more complicated than you might think. A good question and set of answers that deal with many of the related details are at: What is the Proper Way to Destroy a Map Instance?.
I'm not sure from your question, but it sounds like you may have created a page that loads the Google Maps API more than one time (or could, depending on user choices) and you should avoid that entirely. Google admits there are memory leak bugs associated with reloading the map and strongly recommends against multiple map reloads. Google essentially does not support multiple map load use cases.
Check out some of the information available at the question link included above; it contains some good discussion and information.
EDIT in Response to #Engineer's Comment:
Check out the Google Maps API Office Hours May 9 2012 Video where Chris Broadfoot and Luke Mahe from Google discuss: that they don't support use cases that involve reloading the map, that the API is intended to be loaded only once, and their acknowledgement that there is a memory leak bug. Set the playback to ~12:50 to view the section about destroying the map, problems with reloading the map, and suggestions they offer to avoid problems. Primarily, if you must hide and then show a map, they recommend reusing a single map instance.

Answer 2

Old question.. But here is my solution:
// First getting rid of the google.maps object (to avoid memory leaks)
// Then, we are also removing google-maps related script tags we can identify.
// After unloaded, if maps is reloaded more than once on the same page;
// we'll also get a warning in the console saying: "Warning: you have included the
// Google Maps API multiple times on this page. This may cause unexpected errors."
// This script will also avoid that warning.
if (window.google !== undefined && google.maps !== undefined) {
delete google.maps;
$('script').each(function () {
if (this.src.indexOf('googleapis.com/maps') >= 0
|| this.src.indexOf('maps.gstatic.com') >= 0
|| this.src.indexOf('earthbuilder.googleapis.com') >= 0) {
// console.log('removed', this.src);
$(this).remove();
}
});
}
Update: Note that this is not a full-proof solution. There might be copied/cloned/referenced objects. A better way would be to sandbox the map in an iframe and remove the iframe from DOM.

Answer 3

Not the way you're thinking. The easiest way to accomplish this would be to use an iframe to load the "heavy" parts of your application. Then when you get rid of the iframe you get rid of the CSS and JS associated with the map.
In version 2 the Google Maps API had a GUnload() call but the version 3 API doesn't have this call.

Answer 4

with vanilla JavaScript:
if (window.google?.maps) {
delete google.maps
document.querySelectorAll("script").forEach((script) => {
if (
script.src.includes("googleapis.com/maps") ||
script.src.includes("maps.gstatic.com") ||
script.src.includes("earthbuilder.googleapis.com")
) {
script.remove()
}
})
}