How can I fix the issues with implementing a custom Google Maps system on my Webflow contact page? The map is not loading correctly, and I am having trouble specifying the correct location coordinates.
TL;DR
- Ensure your Google Maps API key is valid, enabled, and correctly embedded with the script using async/defer and callback.
- Confirm the map container has a unique ID, sufficient size, accurate coordinates in proper format, and that there are no JavaScript errors in the console.
If your custom Google Maps setup in Webflow isn’t loading correctly or is showing incorrect coordinates, the issue is likely due to missing API configuration, placement errors, or incorrect data input.
1. Check Google Maps API Key
- You must have a valid Google Maps JavaScript API key.
- Go to the Google Cloud Console, enable Maps JavaScript API, and generate a key.
- Make sure the API key is unrestricted temporarily (or restricted by referrer once working properly).
- Add the API key in your Webflow Embed component or wherever you are loading the map.
2. Verify Map Container Placement in Webflow
- Use a Div Block in your Webflow project as a placeholder for your map.
- Give it a unique ID (e.g.,
map) so you can reference it from your JavaScript. - Set proper dimensions (width and height); the map won’t load in a container with 0 height.
3. Correct the Coordinate Syntax
- Use valid latitude and longitude values. For example:
- Latitude:
40.712776 - Longitude:
-74.005974 - In your JavaScript code or Embed block, make sure you are referencing them like:
new google.maps.LatLng(40.712776, -74.005974)
- Avoid passing coordinates as strings or in the wrong order.
4. Embed the Map Script Properly
- Use a Webflow Embed element and include the necessary script setup:
- Include the script link to Google Maps library with your API key.
- Ensure your initialization function runs after the library loads:
- Use
async deferin the<script>and setcallback=initMapin the URL string.
- Use
5. Check Console for JavaScript Errors
- Use your browser’s Developer Tools > Console tab.
- Common errors to look for:
- “Google Maps JavaScript API error: InvalidKeyMapError” → Fix your API key.
- “RefererNotAllowedMapError” → Update API restrictions to allow your domain.
- “initMap is not defined” → Ensure your initialization function is globally accessible.
6. Ensure HTTPS and Proper Domain Linking
- Google Maps API requires HTTPS for most features.
- Make sure your Webflow site is published on a valid custom domain or Webflow's HTTPS link, not just Preview mode.
Summary
To fix your custom Google Maps on Webflow, ensure your API key is configured, your Embed code targets the correct coordinates and container, and there are no JavaScript errors in the console. Most issues stem from incorrect coordinates, improper script loading, or API key restrictions.
