Thank you for sharing this informative blog.
1 Like
Just wanted to make a small update on the loading problems that comes with this. I’m not a developer and I can’t figure out why it suddenly doesn’t load properly. However, one thing that solved the loading problem was doing this (I came across this just by accident):
- Drag in a native Webflow Google Map.
- Give it class name like “Hidden Map”
- Set it do display: none.
Boom! You custom map works again!
*Note: I also updated the section/div and HTML settings a bit. Remember to set both to equal height, like 60 vh or something!
A second update: Change the default marker pin to a custom one:
- If you want to change the default maker, add this line of code:
var iconBase = ‘the-url-to-your-custom-file’;
it should be placed above the var marker = new google.maps.Marker({ line:
IMPORTANT! Don’t add the full URL to your custom pin. You need to leave out the actual file name because that will be placed further below.
2.Underneath the line title: address, add this (remember to add a comma character after “adress”!):
icon: iconBase + ‘custom_map_pin.png’
Here’s the place where you type in the filename of your custom pin. I like to upload my custom pin to Webflows asset manager and use the URL from there instead of hosting it on another service.
Added all together, it should look like this:
2 Likes
Is there a way to center the location of the pin so when the map loads the pin is located in the center?
Hi! As far as I’m concerned, the map pin is centered. At least on my sites it is.
Can you share your preview-link and the published website link?
This is an incredibly useful post & followup. Thanks so much Steven!
1 Like
Thanks for this @StevenP, great stuff!
One question: in my case I would like to show multiple pins on 1 map, do you know if and how that would be possible with this technique?
I tried adding the map component in my Collection List, but apparently that’s not allowed.
Cheers
Hi @aaleks !
I’m not sure how to do this. Probably you have to rewrite the code and that’s out of my knowledge! Maybe somebody else can help out on this like the master ninja @bart? 
Thanks for getting back on this Steven, but I actually was able to figure it out!
Cool!
I’d love to know how you did it! 
Sure thing!
In a nut shell, this is how I set up the layers:
In the “Munchmap” database I can make all the cities I need, in this example “Toronto”:
Obviously, the lat/long details are used to place the pins, I use the “Name” and “Adress” fields for the popup, when the user clicks on one of the pins to get more details.
Then I use this code to setup the different pins:
If you’d like to see the complete code, check out the read-only link.
Make sure to choose “Cities Template” and then “Toronto” to see the working version!
1 Like
Hi, thanks for sharing this, I tried it and I was getting the error: Geocoding API - REQUEST_DENIED
I found a fix for this though, after going into my google console API settings, I had to enable “Geocoding API” under the “Additional API’s”
Just in case anyone else has similar issues…
3 Likes
Hey @aaleks, would you mind sending me the uopdated read-only link to that? Would love to work on something like that. Thanks!
Sure thing @Johnnie!
I’m currently redesigning, but you should be able to find everything over here:
Let me know if you can’t find or figure something out, more than happy to help.
@aaleks This is great! I’m just trying to get the address (or lat / long) of each different item on a list. Let’s say a collection of Hotels. For every hotel, a new pin in the map. You’re doing one item with several pins. I’m trying to do one pin for each item. Any leads? 
Thanks in advance.
I believe I’m doing the same thing Johnie, I have 3 pins for 3 different restaurants, plus 3 pins for 3 different hotels. Or do you mean something else?
A potentially even easier way to style a map is by using the Maps widget and then applying filters. It takes like 3 clicks to get a Grayscale map.
Here’s an example of a map I made with Grayscale set to 100%:
1 Like
I got this message:
Geocode was not successful for the following reason: REQUEST_DENIED
And I activated the Geocoding API
Solved, I just tried to add the Google Maps API Key in the Webflow Project’s settings (integrations), all good!