[Google Maps Library] Google Maps Marker Custom CSS

Forge Component
(18)
Published on 2 Oct by Labs
18 votes
Published on 2 Oct by Labs

Hi,


I would like to apply custom CSS to markers in google maps. The goal to make the markers below (peoples profile photo) circle with a border. I have found this resource online on how to do this but was not successful at applying the demo code to outsystems. 

https://bl.ocks.org/amenadiel/f4e5bd78b214ff081254


Can someone please advise me on how this can be done? I believe my issue is assigning an ID to the marker layer. Any help is appreciated.


Hi Anthony,


You can put picture on the marker by using icon URL on the mapmarker data

The downside is the picture is cannot binarydata, but url of the image (you could post the image on the server and put the url on this)


Thanks

Hi Anthony,


If you're images are being loaded from an known URL you can select them through the src attribute.

.MapPlaceHolder img[src*="<YOUR SOURCE HERE>"] {
    border-radius: 50% !important;
}