GoogleWebComponents / google-map

Google Maps web components

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

jesuslopezlugo opened this issue · comments

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!

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.

Fairly certain this is related to Polymer/polymer#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')}}"

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

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

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

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

commented

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

commented

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.