CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3polymer
MoonDawg
MoonDawg

Reputation: 68

(Polymer) Refreshing google-map after dynamically adding google-map-markers to DOM

Currently using the google-map component for Polymer and having some issues.

https://elements.polymer-project.org/elements/google-map

What I'm wanting to do is dynamically create google-map-markers to display on a map. This could be coordinates in the URL, data grabbed from our database, etc.

This is what my code currently looks like below: 

<google-map id="map" fit-to-markers api-key="API-KEY">
    <template is="dom-repeat" items="{{data}}">
        <google-map-marker latitude="[[item.Latitude]]" longitude="[[item.Longitude]]">Marker</google-map-marker>
    </template>
</google-map>

Here's my issue, however. This ONLY works whenever the markers finish rendering to the DOM before the map is loaded. If the map loads first, the markers will not show up. So obviously, I'm hitting a race condition.

Is there any way to refresh the google-map element to display the new markers after they've finished rendering to the DOM? I feel like I've tried every function on the element's page to no avail.

Any help would be greatly appreciated.

Upvotes: 1

Views: 1048

Answers (1)

MoonDawg
MoonDawg

Reputation: 68

Turns out that this is a bug with using the native shadow DOM with Polymer's google-map implementation.

See GitHub issue here: https://github.com/GoogleWebComponents/google-map/issues/299

A workaround for this issue is to bind the map markers to the map object (see below):

<google-map id="map" map="{{map}}" fit-to-markers api-key="API-KEY">
<template is="dom-repeat" items="{{data}}">
    <google-map-marker map="[[map]]" latitude="[[item.Latitude]]" longitude="[[item.Longitude]]">Marker</google-map-marker>
</template>

However, I noticed that this didn't completely fix the issue. Any data binding inside of the marker tag (innerHTML) still doesn't render. This is how you populate the info window with information. As far as I can tell, that still doesn't work unless it's static text.

Street view also doesn't work using the native shadow DOM.

I did find out our app was using the native shadow DOM. I switched it to use shady DOM on a whim, and all of my issues magically resolved.

Upvotes: 1

Related Questions