Adding API key, prevent the map from loading

[bmamouri]

When I add the map directly using web component, the map rendered successfully:

<google-map fit-to-marker api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc">
  <google-map-marker latitude="37.78" longitude="-122.4" draggable="true"></google-map-marker>
</google-map>

However, when I add the key to the Elm component, I got an exception that the map was not loaded using API key. This is the Elm code:

googleMap : List (Attribute a) -> List (Html a) -> Html a
googleMap =
    Html.node "google-map"

googleMap
            [ attribute "latitude" (toString model.latitude)
            , attribute "longitude" (toString model.longitude)
            , attribute "drag-events" "true"
            , attribute "api-key" "AIzaSyB3FgKD-lpzV7Na2hMk4HnufAc6MxjS5EI"
            , recordLatLongOnDrag
            ]
            []

The exception:

google-maps-api.html:130 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.

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.

util.js:211 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Strangely when I look at the DOM, the key is there:

<google-map latitude="48.2082" longitude="16.3738" drag-events="true" api-key="AIzaSyB3FgKD-lpzV7Na2hMk4HnufAc6MxjS5EI">
    <google-maps-api id="api" class="style-scope google-map"></google-maps-api>
    <div id="map" class="style-scope google-map"><div style="height: 100%; width: 100%;"></div>
</google-map>

I guess this has something to do with how Elm loads the dom elements. Maybe setting the attributes of the webcomponents delayed.

[hossameldeen]

By looking at elm's output code, seems like it first calls createElement('google-map') then adds the attributes. However, I'm unable to use createElement with google-map at all. Even simple code like this fails for me:

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

Probably, this is considered a bug in google-map web component. Angular seems to be facing the same problem. Probably, will not be able to use the web component and will have to build it from scratch using Elm and ports.

Relavant:

[1] https://github.com/GoogleWebComponents/google-apis/issues/67 [same issue with angular] [2] https://github.com/vaadin/angular2-polymer/issues/73 [Angular people failed to find a solution from their side] [3] https://github.com/GoogleWebComponents/google-map/issues/328 [summary of the problem and, I think, a suggested solution that should be implemented in google-map code]

[lisardo]

@bmamouri I managed to create a workaround for this issue by putting google-map inside a wrapper component and adding this wrapper component to Elm.

[theocar]

@lisardo do you have a snippet or a Gist ? I'm having the same issue

[lisardo]

@theocar I'll create a gist later today when I have some time

[theocar]

Thanks @lisardo ! waiting for It

[theocar]

hey @lisardo did you have time to make a small Gist ? Thanks for your help .

[lisardo]

@theocar I created a quick demo to show what was my solution https://github.com/lisardo/elm-google-maps/tree/wrapper-component-yo-dawg

[theocar]

@lisardo great ! Thanks