Adding Google Maps to Your Github Pages Contact Page

by

Creating a contact page on your GitHub Pages site that includes a Google Map can make it easier for visitors to find your location. In this article, we’ll walk through the steps to embed a Google Map into your GitHub Pages contact page.

First, navigate to Google Maps. Find your location by entering your address or place name. Once the map displays your location, click on the “Share” button, then select the “Embed a map” tab. Copy the HTML iframe code provided.

Adding the Map to Your Contact Page

Open your GitHub Pages repository and locate your contact page file, typically an index.html or similar. Paste the iframe code into the HTML where you want the map to appear. For example:

<iframe src=”https://www.google.com/maps/embed?pb=…” width=”600″ height=”450″ style=”border:0;” allowfullscreen=”” loading=”lazy”></iframe>

Customizing Your Map

You can adjust the width and height attributes to fit your design. For example, to make the map responsive, set width to 100% and specify a height:

<iframe src=”https://www.google.com/maps/embed?pb=…” width=”100%” height=”450″ style=”border:0;” allowfullscreen=”” loading=”lazy”></iframe>

Final Tips

  • Test the embedded map on your local or live site to ensure it displays correctly.
  • Use descriptive alt text or captions for accessibility, if needed.
  • Keep the map size appropriate for your page layout.

Embedding a Google Map enhances your contact page by providing visitors with an easy way to locate your business or residence. Follow these simple steps to add a map today!