Change colour of google map marker

I’m trying to colour two Google Map markers differently, but they’re both coming up as the default red marker.

It’s not explicit in the docs but this seems to be what’s suggested:

marker_1 = GoogleMap.Marker(position=GoogleMap.LatLng(50, 0), icon=GoogleMap.Symbol(fill_color='red'))
marker_2 = GoogleMap.Marker(position=GoogleMap.LatLng(50, 10), icon=GoogleMap.Symbol(fill_color='blue'))
print(marker_1.icon.fill_color)  # 'red'
print(marker_2.icon.fill_color)  # 'blue'
self.map.add_component(marker_1)
self.map.add_component(marker_2)

Any ideas?

Hi @ben2,

Excellent question, sorry this isn’t clear. GoogleMap.Symbol objects are used to display particular shapes rather than icons. In particular, they require a path, and if they don’t have one then you get the default red pin that you’re seeing. To draw custom icons, use the GoogleMap.Icon class, which can be constructed with the URL of the image to display. You can find all sorts of useful icon images here.

Here’s an example:

    blue_symbol = GoogleMap.Symbol(
      path=GoogleMap.SymbolPath.CIRCLE,
      scale=20,
      strokeColor="#003",
      strokeWeight=5,
      fill_color="#00f",
      fill_opacity=1
    )
    
    green_icon = GoogleMap.Icon(
      url="http://maps.google.com/mapfiles/kml/paddle/grn-blank.png"
    )
    
    marker_1 = GoogleMap.Marker(position=GoogleMap.LatLng(50, 0), icon=blue_symbol)
    marker_2 = GoogleMap.Marker(position=GoogleMap.LatLng(50, 10), icon=green_icon)
    self.map.add_component(marker_1)
    self.map.add_component(marker_2)

We’ll update the docs to highlight the difference between Symbol and Icon.

I hope that helps!

1 Like

Awesome, thanks @daviesian!