Prevent loading the API library until the element is attached

[platosha]

Currently, the google-map element loads the API library just after the element is created. This creates issues if a temporary instance is created, which is not going to be attached.

Consider the following case:

/* First, create a temporary instance, for example,
to extract a prototype for some analysis purpose */
var proto = Object.getPrototypeOf(document.createElement('google-map'));

/* Later, another instance of map is created and used normally */
var mapElement = document.createElement('google-map');
mapElement.apiKey = '...';
document.body.appendChild(mapElement);

Expected outcome: the API library is loaded once only after the element is attached.

Actual outcome: the API library is loaded multiple times.

Solution idea: postpone loading the API library after the element is attached by wrapping the <google-maps-api> tag with <template is="dom-if" if="isAttached">...</template>

Note that debouncing the API url computation, as proposed in https://github.com/GoogleWebComponents/google-apis/pull/77, is not a complete solution for this issue. For the use case above, it will make the second instance to load the API library with the key provided synchronously after the element creation, while the first instance still loads the API without a key.

[hossameldeen]

I'm facing a similar problem and trying to understand google-map's current behaviour. Seems to me that I can't use createElement with it at all, even if I'm creating only one element and attaching it to the dom directly.

For example, even this code alone doesn't work with me:

var mapElement = document.createElement('google-map');
mapElement.apiKey = '...';
document.body.appendChild(mapElement);

It first throws a warning of no-api-keys, then throws an error of loading the API multiple times.

So, my question, if anyone could help: I can't use createElement with google-map at all, can I?

Thanks!

[mlabarre]

+1