Unable to display custom icon in google-map-marker component with 2.0-preview branch

[jesuslopezlugo]

Hi there,

I'm trying to set a custom icon in google-map-marker component with 2.0-preview branch, with something like this:

<google-map-marker latitude="[[item.location.latitude]]" longitude="[[item.location.longitude]]" icon="https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png"> </google-map-marker>

But the default icon does not change, so I tried to change the type of icon inside google-map-marker from Object to String and this make it works.

Please fix this issue, thanks a lot!

[totegsito]

I tried doing the same workaround you did, but after researching the google maps api I’ve realised that the problem is that it receives and icon class object. You can check it out here.

[kreinholt]

Fairly certain this is related to https://github.com/Polymer/polymer/issues/4464. The icon variable is of type Object and passing a String messes it up. A workaround I've used is icon="{{serialize('https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png')}}"

[phidias51]

It would be better if there was a way to specify an iron icon. Something like "maps:person-pin".

[ghost]

Solved it, I've used: icon="{{_serializeValue('https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png')}}"

[jparish3]

I am trying the solution above, but without results. Is there more to _serializeValue ?

[jesuslopezlugo]

I resolved the issue making these changes:

<google-map-marker latitude="[[item.location.latitude]]" longitude="[[item.location.longitude]]" icon="[[icon]]"> </google-map-marker>

And then set a value for icon:

this.set('icon',{ url: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png', scaledSize: new google.maps.Size(30, 30) });

For more info about the icon class check this

[mcclaskiem]

Any reason this was closed if nothing was released to fix this or at the very least a documentation update to reflect the new format? The above solution doesn't provide enough context as to where to even place the proposed JS to fix this issue

[masonlouchart]

The issue is still present and there is no solution provided. Please, reopen this thread.

A problem of type was pointed by @jesuslopezlugo and @kreinholt.