What is the best way to use Google Maps with Webflow while preventing Google Webfonts from being loaded?
TL;DR
- Embed Google Maps manually and copy the iframe code.
- Edit the code to remove unnecessary resource requests.
- Consider using Mapbox or OpenStreetMap to avoid Google Webfonts.
- Insert the code in Webflow and verify no Webfonts APIs are called.
- Publish and test to ensure Google Webfonts are not loading.
To integrate Google Maps in Webflow without loading Google Webfonts, follow these steps:
1. Embed Google Maps Manually
- Go to Google Maps, search for the location you want to embed.
- Click on 'Share', then select 'Embed a map'.
- Copy the HTML iframe code provided but don't use it yet in Webflow.
2. Edit the Embed Code
- Remove any parameter that requests additional resources you don't want, but there is no specific parameter for Google Webfonts in a standard Google Maps iframe.
- If the issue persists, the loading of Google Webfonts might be indirectly triggered by other resources; proceed to the next step.
3. Use a Third-Party Map Service
- Consider using services like Mapbox or OpenStreetMap, which offer similar functionalities without defaulting to Google Webfonts.
- Integrate these services using their respective embedding instructions in Webflow.
4. Input Custom Code in Webflow
- Go to your Webflow Project and select the page where you want to add the map.
- Use the Embed Element to insert the edited iframe code.
- Make sure no calls to Google Webfonts APIs are present.
5. Test Your Page
- Publish your site to see changes in action.
- Use browser's developer tools to check network requests and confirm that Google Webfonts are not being loaded.
Summary
To embed Google Maps in Webflow without loading Google Webfonts, manually adjust the embed code and consider alternative map services like Mapbox if necessary. Always confirm the resources being loaded by testing the final setup.
