Google map API key missing

[maxmumford]

Hello again ;)

Not sure if this is a problem with this library or the polymer library so I'll post it here first:

I'm using the following code to try to implement the google-map component:

<google-map latitude="37.779" longitude="-122.3892" zoom="13" api-key="...mykey..."></google-map>

but the browser is still complaining about missing api keys:

No Google Maps API Key or Client ID specified. See https://developers.google.com/maps/documentation/javascript/get-api-key for instructions to get started with a key or client id.
google-maps-api.html:130No Google Maps API Key or Client ID specified. See https://developers.google.com/maps/documentation/javascript/get-api-key for instructions to get started with a key or client id.
js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:96 You have included the Google Maps API multiple times on this page. This may cause unexpected errors.Xg @ js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:96(anonymous function) @ js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:129google.maps.Load @ js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:21(anonymous function) @ js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:129(anonymous function) @ js?callback=https___maps_googleapis_com_maps_api_js_callback___callback___v_3_exp_libraries_drawing…:130
util.js:207 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

The generated code looks like this in chrome's code inspector:

<google-map latitude="37.779" longitude="-122.3892" api-key="...mykey..." zoom="13">
    <google-maps-api id="api" class="style-scope google-map"></google-maps-api>
    <div id="map" class="style-scope google-map"><div style="overflow: hidden;"></div></div>
    <iron-selector id="selector" selected-attribute="open" activate-event="google-map-marker-open" class="style-scope google-map">
    </iron-selector>
  </google-map>

You'll notice that the generated google-maps-api element is missing the api-key attribute. Could this be the cause of the errors?

Max

[platosha]

Can confirm this does happen. The problem is that the map element starts to load the API script before the apiKey property was assigned/defined.

This is a known issue with the <google-map> element (<google-maps-api>, to be precise). See: GoogleWebComponents/google-apis#67

[platosha]

I failed to find a solution on our side. We can’t fix it because of the GoogleWebComponents/google-apis#67 and GoogleWebComponents/google-map#328 issues.

Perhaps it’s better to use a more Angular-specific maps solution, for example https://github.com/SebastianM/angular2-google-maps

[maxmumford]

Thanks @platosha , I went with https://github.com/SebastianM/angular2-google-maps in the end and it works well so far.