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.

Step 2:

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

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.

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

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.

Related posts:

Create a live time clock in your webpage How to insert twitter updates in your webpage 8 Tips to make Webpage Accessible Create a Simple Calendar using Javascript