Are you looking to display your Webflow CMS items on a Google Map?
Our recent project involved solving just that for our client, ensuring that users could easily navigate and interact with locations relevant to them directly on a map. Here’s how we accomplished it using a (almost) free, effective solution.
The Challenge
Our client needed a system where:
- Users can navigate a map to find listings around their desired location.
- Upon finding a listing, users should be able to click a map pin to see detailed information about the listing.
- Our client wanted to manage those listings from one place, the Webflow CMS, without duplicating efforts by updating Google Maps separately.
The Solution
Inspired by Rameez’s work integrating Webflow CMS with Google Maps, which can be seen here, we tailored the existing template to fit our specific requirements. Here’s how you can set up something similar:
Getting Started
Step A: Duplicate the Template
To start, visit the template page and duplicate it to your Webflow account.
Step B: Generate a Google Maps API Key
- Create a Google Cloud account if you don’t already have one. Yes, you will have to put your credit card information. However, don’t worry too much about the bill amount + you get free credit for the first year.
- Create a new project and navigate to the API section to generate a new API key. If you don’t know how, no problem, follow the video below:
3. Add your API key to your Webflow project to connect it with Google Maps.
Go to your page settings (1) and scroll down to your “Before the </body> tag” section (2). Then, search for the <script> tag that calls the API and replace the API key (3) with yours in the URL.
Step C: Customize the Code
- Update CMS Items: Add essential details to your CMS items in Webflow, such as addresses or descriptions. Use a unique class for each element of your Webflow CMS item connection.
2. Geocode Locations: Input latitude and longitude for each item in your CMS. You can obtain these from Google Maps directly. How -> Find the place on Google Maps and right-click on it.
3. Modify initializeMap()
Function: Ensure this function in your script properly ties into your Webflow classes and CMS data. This is also where you can add more information from your map. For example, you can add a link to the CMS item page with the “listing-link” class.
function initializeMap() {
createMap({
// Configuration object specifying the classes used to find elements in the DOM.
latitudeClass: 'latitude',
longitudeClass: 'longitude',
imageClass: 'listing-img',
descriptionClass: 'listing-description',
titleClass: 'listing-title'
});
}
Troubleshooting the grey box. If you are getting a grey box instead of the map like the one below
It’s probably because your class on the CMS no longer maps your initializeMap() items. See the following example:
Step D: Enhance Your Map
- Custom icons: Replace the default map pins with your icons to match your brand or style.
// Create a marker for each location and attach an info window.
locations.forEach(location => {
let marker = new google.maps.Marker({
position: location,
map: map,
title: location.title,
icon: '', // Personalized icon URL goes here
disableDefaultUI: true,
});
markers.push(marker);
attachMarkerInfoWindow(marker, location.content);
});
- Styling the map: Utilize resources like Snazzy Maps to apply custom styles to your Google Map for a unique look.
const style = [] //your snazzy array goes here
const map = new google.maps.Map(document.getElementById("map-wrapper"), {
zoom: 12,
center: locations[0],
disableDefaultUI: true,
styles: style, // Your style goes here
});
- Add custom interactions: Integrate further custom code and interactions specific to your Webflow site to enhance user experience.
Conclusion
With these steps, you can seamlessly integrate your Webflow CMS with Google Maps, providing an interactive and user-friendly map interface on your site. This improves user engagement and simplifies behind-the-scenes content management for your clients.