How to use google map in webpage

My last article was about inserting twitter updates in personal webpage. Now this time I am writing on how to use google map in webpage. Google offers an API which we can use to pull information from google maps for our own use. Even easier, they offer a little JavaScript widget which automatically uses this API and returns simple HTML of google maps and we can use this simple html where we need to show the location’s through google map.

Here are some simple steps for this.

Step 1:

First go to http://maps.google.com/ and search the map which you want to insert in your webpage.
mp1

Step 2:

Then click to the ”Link” bottom seen on the upper right side of the page like shown below.
mp1.jpg2

Step 3:

And now you will see the following page on your screen .If you are fine with the size( height and width), zoom of the map , then copy the html code and paste it in the page where you want to insert the map.

m3

If you want to customize the map then click on the “Customize and preview embedded map”. and you will see the following window.
m4

Next change the size of the map and zoom as you want, copy the html code and paste it in the your page. Its very simple and easy.

click here to see the example.

1 Comment How to use google map in webpage

  1. Pingback: Design Gala

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>