icon attribute in Polymer <google-map-marker> not working

Question

In the repeated (dom-repeat) section, default red markers appear instead of the bus icon.

The img tag inside the second google-map-marker tag works fine (icon appears on click).

<google-map latitude="45.559" longitude="-122.65" version="3.exp" zoom="12">

  <template is="dom-repeat" items="[[marker_data]]">
    <google-map-marker icon="http://maps.google.com/mapfiles/kml/shapes/bus.png"
                       latitude=[[item.lat]] longitude=[[item.lon]]  title=[[item.text]]>
    </google-map-marker>
  </template>

  <google-map-marker icon="http://maps.google.com/mapfiles/kml/shapes/bus.png"
                       latitude=45.54843 longitude=-123.60  title="arrggghhhh!!!!!">
    <img src="http://maps.google.com/mapfiles/kml/shapes/bus.png">
  </google-map-marker>

</google-map>

screen shot showing red default markers

a1626 a1626 · Accepted Answer · 2017-11-18T08:13:55

The problem is typeof the property. If you check the documentations they have changed the property type to Object instead of String. This means that the value has to be in JSON format.

Something like this should work.

<google-map-marker icon='"http://maps.google.com/mapfiles/kml/shapes/bus.png"' latitude=[[item.lat]] longitude=[[item.lon]]  title=[[item.text]]>
</google-map-marker>

Notice the icon attribute is using both single and double quotes.

Even i'm not sure how is this interpreted as JSON but it seems to work.

Here's the link to Github issue where solution has been posted.

icon attribute in Polymer <google-map-marker> not working

1 Answers