Streaming live at 10am (PST)

Google Maps Custom Map Marker


#1

Hi

This seems to be a pretty common feature within other systems as far as Google is concerned and that is the ability to add a "Custom map Marker" on a Google Map. I previously asked in an original topic post but that was closed so perhaps it's not?

I simply want to show a custom marker .png on my Google Map 'Element'...... I've tried to do it via Google code snippets with no joy....

If no one knows perhaps Webflow can add it into the "Map Settings"????

Cheers

Glenn


#2

Hi Glenn!

It’s not right what you need, but you can use it as a temporary solution: https://elfsight.com/google-maps-widget/ - an extended widget based on Google maps. You can use it to put unique markers, plan routs, adjust the layout for your website - all these is done just by few clicks.

Installation guide is here: https://elfsight.com/help/how-to-add-google-maps-builder-to-webflow/ (it will take not more than 1-2 minutes).

I hope that was of some help!)


#3

Quick and dirty way. You can create a map wrapper div. position relative, and flex box setting with child set to center vertical and horizontal. Drop map inside of the wrapper and make it absolute. Drop your marker image in the wrapper and give it absolute positioning with a higher z-index than the map.

I did something similar here. Scroll to bottom: http://828-homepage.webflow.io/

however, I did some other things so my map isn’t zoomable. If you do what I describe above, you should still have zooming capabilities. Downside is that the marker is fixed to center so panning will reveal the default google marker. And your marker image will need to cover up default.

Edit: here is a zoomable example: http://looped-interaction.webflow.io/