StackTips
 4 minutes

How To Embed a Map into Your Website Using Google Maps

By Editorial @stacktips, On Sep 17, 2023 Blog Posts 2.32K Views

Google Maps is a useful mapping tool that offers real-time location and navigation information. As a website administrator, you can take advantage of this service and embed embed a map, Street View image, driving directions, or location search into your website.

The most common use of Google Maps on website is on contact page or to display locations on branch. Image you are running a small hotel business or a laundry service, you can embed Google map in your website to help visitors locating you easily.

This tutorial will show you how to embed a map into your website.

Embed Google Map into Your Website

  • At first, open Google Maps, search and locate the place or area that you would like to display on your website. In the search result page you will notice the details of the location along with option to Save, Direction and Share button.

embed-google-map-on-website

  • Click on the Share button. At the top of the box a pops up window will appear. Choose the Embed map tab.

embed-google-map-on-website-02

  • Select the size that you want, then copy and paste the HTML embed code into the source code of your website:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.019572300999!2d-0.12256554865968466!3d51.51285691802522!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604cafd44dd8f%3A0xb27771d269b4895!2sTheatre+Royal%2C+Drury+Lane!5e0!3m2!1sen!2suk!4v1480610900782" 
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  • The embedded map should appear on your website once you save your changes. The output of the above embed code is as follow.

stacktips avtar

Editorial

StackTips provides programming tutorials, how-to guides and code snippets on different programming languages.