Marketplace
Made in Webflow

CMS Google Maps Markers

521 views
site profile thumbnail

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.
googlemapsmapscmswebflowcmsmarkerscms-map

More by PixelMakers

See profile
View details
Quote / Price Calculator
11
21