Google map

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


Follow below steps to create Google map iFrame.

  • Go to Google Maps
  • Type in your address in search bar and select your location from searched results or click on your location pin on the map
  • If you need to choose a satellite view, then select a satellite view box before going to the next step. And for street view, drag a little yellow human icon onto map.
  • Click on the Hamburger menu icon and click on Share or embed map
  • In popup, select Embed a map and copy HTML iFrame code
  • Past it in your HTML

See example of iFrame code below:

	<iframe class="w-100 h-400 grayscale d-block" 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" height="500" 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.