How to Embedding Google Maps in HTML Page

How to Embedding Google Maps in HTML Page

How would you embedding Google maps in HTML page and its important? Don’t worry today I share with you very important things of Google map, where your visitor can easily find your address, location and paths with kilometers. If you want integrate with your html page, I will show you easiest way to embedded code into your contact page.

The Best and Easiest Way to Embeded Google Maps

Create Html Page for Google Maps

Html Page is “hypertext markup language” which supports all browser. It is a bunch of codes and tags. Which display page layout and designs.

 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title for Your Page</title>
</head>
<body>
Google Maps Code Here
</body>
</html>

Copy embedded codes 

First you need to open Google Maps and find location which you want to embed into your webpage. Click on the gear icon then you will Shared and Embed Map option. You will see popup screen, click on Embed Map. Here you can set size of map.

Step 1

Google-Maps-Find-locations

Step 2

Copy-Google-Maps-code

Paste Map Code into HTML Page

 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title for Your Page</title>
</head>
<body>
<!-- Google Maps Codes -->
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d5967.883487006837!2d-87.99578507628975!3d41.592143022288134!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1403108855233" width="600" height="450" frameborder="0"></iframe>
<!-- End Google Maps Codes -->
</body>
</html>

You Make Also Like to Read: Learn Gmail Features 

Try this method and integrated Google maps into your Contacts page. I am sure you like this topic and you will use into your projects. These simple steps can help you to create Map view Contact page which provide your office location to your client. So your visitor can contact you at your place.

3 thoughts on “How to Embedding Google Maps in HTML Page”

Leave a Comment