Important: Why I do not recommend using Geocode that can calculate each place’s location based on the address.
While Google Maps API has a function that allows calculating a location based on the address, we will be running the code and generate a map when the page loads. That means you would be calling geocode every time somebody views your page and not caching your results anywhere in the DB ! Plus, as many times as many CMS items you have.
This way, you will hit the limit allowed by Google pretty fast.
The reason that limit exists is to prevent abuse from Google’s resources (whether it is willingly or unwillingly). So after passing the limit, you would end up paying for each page view ~10 US cents
Using Google maps own DEFAULT service for detecting Land and Lat seems a much better solution to me.
Saying that, I only provided one of possible solutions, the one that on my personal opinion was less expensive. But it is NOT THE ONLY SOLUTION and nobody stops you from using a method with re-calculating Lat and Long from Address using Google geolocation services.
@sabanna I understand your whole reasoning behind the Lat and Long, in fact I am building my map off of your method. So I decided to use lat and long because of your logic. But I saw in your screenshot of CMS that you had Plus Codes in your formula so it was a question on if you thought it was necessary for me to do the same for the api no to pull so much.
I’ve spend several hours in the developers forum in google.
I watched the video in this documentation.
Another question to add in here is so you created you map I understand your script placement instructions. But did you use some code like this to map your map appear?
<!D0CTYPE html>
key
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
Or this
DL150 Sailboat Locations
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
async
></script>
Did you use the embed-div after creating the div-block to embed the map and was it a sub class within in the map div?
Was the embed-block or div-block with the map inside the collection-list?
Blockquote Add the div block to place the map on the page
Once you will decide where is your map will be located, add a div-block and give it an ID map
Design the info-block for the place
Somewhere on the same page with the map, add a Collection List and bing it to your Collection with Places.
Blockquote
Thankyou for any future time in your response.
Much respect Kyle!
I’ve built this little SaaS product which is free to use for webflow maps, has most of what you need. Works with CMS to allow you to create these custom map markers and locations in a no-code sort of way.
This will hide it in the editor as well as on the published site. If you wish for it to always be visible in the editor but not the published site, then you’ll need to do this by creating an ‘interaction’ (set initial state to none). If relevant, i can give more instructions here
Hi Anna, how are you generating the map in this tutorial? Is it using the “Map” component that webflow provides or is it embedding a map? Additionally, how is that component getting the long and lat from your collection list?
I use a standard Google Maps API call for that, NOT a default Webflow component. The code snippet that I provided will “read” the long and lat data from the text fields on the page. Those text fields are connected to CMS fileds.
Hi Sabanna, I can get the map to show up, but the markers do not. I looked at your read only file and I feel like I am very close, but cannot figure out what I am missing?
The map is not showing up at all for me. I don’t want to renew this thread at all but I can’t figure it out haha. I’ve tried troubleshooting multiple different things. Here is a read only file if you could help me out please! Greatly appreciated. I need this for one of my clients and this is the closest thing I’ve found to helping out. I feel like I’m so close!
Thanks so much,
Austin
Hi, @Noah_Ploeg!
Errors on your screenshot have nothing to do with Google maps or the website. It shows some problems with one of your browser extensions (source map is not a Google map).
I looked at your live link and it seems that Google Maps API is not recognizing the API key. Please, make sure you are using a correct API key.
Hi @sabanna, thank you for your reply. I tried using these, but those are not the right ones? Then how do I get the right one? Because I got these by following the steps you provided
Hi Anna, first of all, thank you very much for this excellent tutorial and your support with this – I have relied on this heavily while creating different websites in the last year that helped thousands of people from my former home town to find spots to get quick-tested or vaccinated, and your tutorial was just pure gold for that. So thanks a lot!
I am now struggling, since I am trying to adapt the map in a way that allows me to display two different types of locations on the map, i.e. with different icons. Can you (or someone else, for that matter) help me out?
I’ve been trying to set this up through the search function (calling in a cms collection) with terrible results. After placing my maps code, adding lat and long into each cms item, and naming each div the map refuses to initialize and the items are not being placed across the map.
Does this work at all using Webflow’s search feature? I need to show the results of the search (not all of the cms items) and have them initialize on the map in their correct positions…
Add the div block to place the map on the page
Design the info-block for the place
