5

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?

Charlotte Tan
  • 2,452
  • 2
  • 20
  • 24
  • "When I click on a different link in my main page" --- uhm, and what happens next? If that link just opens another page - then everything is unloaded by browser (as long as page doesn't exist anymore) – zerkms Jul 12 '12 at 04:04

4 Answers4

3

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.

Community
  • 1
  • 1
Sean Mickey
  • 7,618
  • 2
  • 32
  • 58
3

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.

Onur Yıldırım
  • 32,327
  • 12
  • 84
  • 98
  • Can you re-init your map afterwards? I keep getting this: Uncaught TypeError: Cannot read property 'transclude' of undefined – unexist Oct 04 '13 at 16:38
  • You can use Google Loader (https://developers.google.com/loader/) or append script tag directly (https://developers.google.com/maps/documentation/javascript/examples/map-simple-async) – Onur Yıldırım Oct 06 '13 at 13:38
  • That really doesn't help at all, I just wanted to know if you can use a map after you've unloaded the map with your way. I can unload and the map with your code, BUT when I load maps again the directions list is broken. – unexist Oct 21 '13 at 16:44
  • You cannot use previous map references or related objects after unload. You have to reload the api and create and configure your maps within your callback again. – Onur Yıldırım Oct 21 '13 at 19:36
  • This worked for me i didn't use earthbuilder.google... and used: fonts.gstatic.com instead – Flakx Jan 12 '15 at 17:54
  • Thanks but this shouldn't be used in production. Pls. see the update in my post. – Onur Yıldırım Jan 12 '15 at 18:47
  • I get `Cannot read properties of undefined (reading 'LatLng')` – Dorian Jan 02 '22 at 05:08
  • @Dorian pls post another answer instead of editing this one. – Onur Yıldırım Jan 12 '22 at 03:34
  • @OnurYıldırım sure okay – Dorian Jan 12 '22 at 06:09
1

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.

Anthony Mills
  • 8,676
  • 4
  • 32
  • 51
0

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()
    }
  })
}
Dorian
  • 7,749
  • 4
  • 38
  • 57