Using and scaling SVG icons on GoogleMap

[bridget]

Hi @shopinthewoods, the forum post below explains how to use GoogleMap.Symbol and GoogleMap.Icon objects with GoogleMap.Marker:

Change colour of google map marker

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.Sym…

You’re right that the marker’s icon property can be either a string, GoogleMap.Icon or GoogleMap.Symbol object. If you provide a string as the icon property of a GoogleMap.Marker object, it is treated as a GoogleMap.Icon object with the string as the url property. If you want to scale the image, you’ll need to create a GoogleMap.Icon object, and set the scaled_size or size property, for example:

arrow_icon = GoogleMap.Icon(
      url="http://maps.google.com/mapfiles/kml/shapes/arrow.png",
      scaled_size=GoogleMap.Size(20,20)
    )
marker_1 = GoogleMap.Marker(position=GoogleMap.LatLng(52.2053, 0.1218), icon=arrow_icon)
self.map_1.add_component(marker_1)