The most common use of Google Maps on website is on contact page. This tutorial will show you How To Embed Google Map into Your Website.
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.
How To Embed Google Map into Your Website
Firstly, you need to 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.
Click on the Share button. At the top of the box a pops up window will appear. Choose the Embed map tab.
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!1d317718.6931929205!2d-0.3817960550863075!3d51.52830798491255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C+UK!5e0!3m2!1sen!2sus!4v1492446402594" 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.
[alert type=white ]