Google map

Enrich your website with a Google map in a simple way.

Follow the steps below to create a Google Map iFrame and embed it on your webpage.

  • Go to Google Maps
  • Type in your address or desired location in the search bar and select your location from the search results. Alternatively, you can click directly on the location pin on the map.
  • If you prefer a satellite view, click on the satellite view box. For street view, drag the little yellow human icon onto the map.
  • Click on the Hamburger menu icon in the top left corner. Select "Share or embed map" from the menu.
  • In the popup window, select the Embed a map tab.
  • Copy the provided HTML iFrame code.
  • Paste the copied iFrame code into your HTML file where you want the map to appear.

See example of iFrame code below:

<iframe class="w-100" height="400" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.9663095343008!2d-74.00425878428698!3d40.74076684379132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259bf5c1654f3%3A0xc80f9cfce5383d5d!2sGoogle!5e0!3m2!1sen!2sin!4v1586000412513!5m2!1sen!2sin"  style="border:0;" aria-hidden="false" tabindex="0"></iframe>

You can remove width and add .w-100 class to iFrame, to make map responsive across all devices. For grayscale map add .grayscale class to iFrame.

FAQs

1. What should I do if my Google map isn’t displaying correctly?

  • Check the iFrame Code: Ensure that the copied iFrame code is complete and correctly placed within your HTML file.
  • Inspect Console Errors: Look for any errors in the browser console that might be affecting the map display.
  • Verify the URL: Ensure the URL within the iFrame code is correct and accessible.