tag:blogger.com,1999:blog-51306635077948194752011-09-15T23:22:53.085-07:00How to embed Google Map in Web PageMathihttp://www.blogger.com/profile/03979427407848755119noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-5130663507794819475.post-35343029396569782462008-08-03T07:28:00.000-07:002008-12-12T21:39:46.396-08:00How to embed google map in my web site?<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="450" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
Step: 1 Just watch this Example
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
1. This map shows my residence. I live in ALT Centre, Rajnagar, Ghaziabad, Uttarpradesh, India.
<br>
2. In this map, if you click the MAP link, you will get roads and railway tracks.
<br>
If you click the SAT Link, you will get the buildings
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&hl=en&geocode=&q=alt+centre+ghaziabad+india&ie=UTF8&ll=28.670708,77.44091&spn=0.066571,0.109863&t=h&output=embed&s=AARTsJruur3XFZVnLEpErUGfLmZVdh9eDg"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=alt+centre+ghaziabad+india&ie=UTF8&ll=28.670708,77.44091&spn=0.066571,0.109863&t=h&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here-->
<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="450" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
Step: 2. Locate your house in the google map.
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
1. Type "http://maps.google.com in your Browser.
<br>
2. You will get google earth. Use your mouse to locate your house.
3. Hints:
<br>
a)
Double click the LEFT mouse to Zoom. Double click the RIGHT mouse button to zoom-out. Drag the mouse to move to any place.
<br>
b) You can also use + and - symbols given in the map.
<br>
c) You can type like "ghaziabad india" in the text box and press the SearchMap button given in the map
<br>
<a href="http://1.bp.blogspot.com/_Z1RigC4qQAE/SJXJa_xKpqI/AAAAAAAAAVo/sWLW-p98wUM/s1600-h/google-map-alt-centre.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_Z1RigC4qQAE/SJXJa_xKpqI/AAAAAAAAAVo/sWLW-p98wUM/s400/google-map-alt-centre.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5230308007892133538" /></a>
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here-->
<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="450" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
Step: 3. Copy the embed code.
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
1) As shown in the image below, click on the "LINK" link and then
<br>
2)select the text in the textbox "PASTE HTML TO EMBED IN YOUR WEBSITE".
<br>
<a href="http://1.bp.blogspot.com/_Z1RigC4qQAE/SJXMZJnh-ZI/AAAAAAAAAVw/VQBWDcCXdrU/s1600-h/google-map-alt-centre-2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_Z1RigC4qQAE/SJXMZJnh-ZI/AAAAAAAAAVw/VQBWDcCXdrU/s400/google-map-alt-centre-2.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5230311274711218578" /></a>
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here-->
<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="450" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
Last Step : Simply paste this code in your html page.
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
<textarea style="font-size:12px;font-family:arial" >
1) Open your html or asp or jsp page.
2) Any where between < body> and < /body>, simply paste this code.
3) The code is an IFRAME code and it will look like this:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&hl=en&geocode=&q=alt+centre+ghaziabad+india&ie=UTF8&ll=28.670708,77.44091&spn=0.066571,0.109863&t=h&output=embed&s=AARTsJruur3XFZVnLEpErUGfLmZVdh9eDg"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=alt+centre+ghaziabad+india&ie=UTF8&ll=28.670708,77.44091&spn=0.066571,0.109863&t=h&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</textarea>
<br>
<a href="http://1.bp.blogspot.com/_Z1RigC4qQAE/SJXPWvjHwoI/AAAAAAAAAV4/a3FuQTO4Esw/s1600-h/google-map-alt-centre-3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_Z1RigC4qQAE/SJXPWvjHwoI/AAAAAAAAAV4/a3FuQTO4Esw/s400/google-map-alt-centre-3.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5230314531888546434" /></a>
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here--><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/5130663507794819475-3534302939656978246?l=lamens-google-map.blogspot.com' alt='' /></div>Mathihttp://www.blogger.com/profile/03979427407848755119noreply@blogger.com0