How to use google map in webpage

Pin It


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 pingback on this post
Submit your comment

Please enter your name

Your name is required

Please enter a valid email address

An email address is required

Please enter your message

Twitter

  • May 2, 2012 04:15

    10 Free WordPress Theme To Make You Forget About Premium Theme http://t.co/YRiLCiVa

  • March 2, 2012 17:16

    3 Helpful Tools to Test Cross Browser Compatibility of Webpage http://t.co/FY0jh8Dn

  • March 2, 2012 16:43

    3 Helpful Tools to Test Cross Browser Compatibility of Webpage http://t.co/QUlYKInf #IE #FF #Chrome #Testing #CrossBrowser

  • March 2, 2012 12:52

    Top 5 Plugins to Build Contact Form for WordPress http://t.co/PWyR08Iq #WordPress #Plugins #ContactForm

  • June 11, 2011 02:49

    CSS 3 Transitions http://bit.ly/m0pK3t

Design Gala © 2012 All Rights Reserved

Designed by 76miles

Powered by WordPress

More in How to (13 of 16 articles)
sel myweb