CMS Google Maps Markers
Description
This clonable is for anyone that needs a dynamic, CMS-controlled Google Maps on their website. It requires an API key and a bit of JavaScript & custom attributes knowledge.
How to use this clonable:
1. Go to https://mapsplatform.google.com/, generate a JavaScript Maps API Key, and restrict its access (useful tutorial: https://www.youtube.com/watch?v=2_HZObVbe-g)
2. In the head script, add this script
<script src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
and replace the placeholder with your API key;
3. Create 2 new number parameters in your CMS collection: latitude and longitude. Display these fields in your project, you can also hide them from the user. On the longitude field, add maps="longitude". On the latitude field, add maps="latitude". For the name, you can add maps="name" as an attribute.
4. Publish and enjoy.
Video tutorial coming soon.
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
We miss comments too!
Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!
As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.