How to Embedding Google Maps in HTML or Contact 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.

Author

If you like this post, you can follow Labstech on Twitter.Get latest tutorials and tips or tricks, Subscribe to Labstech feed via RSS or EMAIL to receive latest updates.

3 Comments

Write A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.