Table of Contents
Integrating Google Maps into your Hugo site can greatly enhance the user experience by providing interactive location information. This guide will walk you through the steps to embed Google Maps seamlessly into your static website built with Hugo.
Getting Your Google Maps Embed Code
First, navigate to Google Maps and find the location you want to display. Once you have the desired map centered, click on the menu icon and select “Share or embed map.” Then, choose the “Embed a map” tab and copy the HTML iframe code provided.
Adding the Map to Your Hugo Site
Next, open the content file where you want the map to appear. Paste the iframe code directly into your Markdown file, wrapped in a raw HTML block for proper rendering. For example:
<!-- wp:raw HTML -->
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<!-- /wp:raw HTML -->Customizing Your Map
You can customize the size of the iframe by adjusting the width and height attributes. To make the map responsive, consider using CSS styles or wrapping the iframe in a container with relative positioning.
Tips for Better Integration
- Use descriptive alt text for accessibility.
- Test the embedded map on different devices.
- Keep the embed code updated if you change the location.
By following these steps, you can effectively embed Google Maps into your Hugo site, providing visitors with interactive location details and improving overall engagement.