WebComponent conflicting with previously loaded maps

[ZepAviator]

I am migrating a site to web components and there are parts of our site with libraries that I can't swap over immediately. To this end, we already have Google Maps loading in the site.

The problem is that the google-maps-api doesn't check or have any way to not reload the API if it already exists in the site.

At the top of _computeUrl if you put in: if (google && google.maps) { return null; }

It would be much better to have a method to indicate that a google.maps library is already loaded and to just use that. I think that is better than making a duplicate instance of google-maps and the other.

[ebidel]

It's not a bad idea. Generally, we encourage components to load their own resources/dependencies, but I'd be in favor of PR that uses an existing instance of google.map if it is already available on the page.

[ZepAviator]

Obviously, no one should ever have two google.map scripts loaded into the same page, as it creates a large number of problems overall.

I'll work on a PR next week. I need to sign all the paperwork. In the meantime, this is what I ended up with:

_computeUrl: function(mapsUrl, version, apiKey, clientId, language, signedIn) {
  if (google && google.maps) {
    this._setLibraryLoaded(true);
    this.fire(this.notifyEvent, 'preloaded');
    return null;
  }
  // The rest of the function as normal
},

I don't know if I love this. It does short circuit loading maps if you already have an instance on the page. If you happen to have multiple map instances on your page, there is a chance that another one might end up 'preloaded'.

Also, the orginal notify-event passes in some arguments for the return object. This short I wanted to detect if it was preloaded in my code. This will fire pre-loaded once you have maps instanced.

I was trying to make as few changes as possible, but it might make sense to add a method to iron-jsonp-library (if one doesn't already exist) to check if a library already is loaded by its methods.

[nerdkid93]

I ran into this too. Loading the script from the google-map element was too late in the loading process, so a bunch of declarations that depend on having google.maps already defined errored out. I fixed this by loading the api with the same url that _computeUrl generates, but you can't have a <script src=""> with src having "callback=%%callback%%". So I modified the google-map-api file to remove the callback from its url.