Change colour of google map marker

Anvil Q&A
2

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