Click here to Skip to main content
15,895,777 members
Search within:


Articles / Programming Languages / PHP
 

Google Maps in HTML, ASP.NET, PHP, JSP, etc. with Ease

Rate me:
Please Sign up or sign in to vote.
4.84/5 (119 votes)
1 Dec 2009CPOL16 min read 922.9K   17.2K   356  
The article will guide you with complete knowledge of how to add a Google map in your webpage with knowledge of JavaScript, use of Geocoder, use of InfoWindow, use of Marker, Tabbed Markers, Maximising marker, creating context menu, streetview in your map
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en"><head>



    <script src="Example5_files/maps" type="text/javascript">
//My Google Maps Key
    </script><script src="Example5_files/main.js" type="text/javascript"></script><style type="text/css">@media print{.gmnoprint{display:none}}@media screen{.gmnoscreen{display:none}}</style>

    <script type="text/javascript">

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl (new GSmallMapControl());
map.addControl(new GMapTypeControl());
var center = new GLatLng(-22.98699983834975, -43.210344314575195);
map.setCenter(center, 11);
map.setMapType(G_SATELLITE_MAP);
geocoder = new GClientGeocoder();

var marker = new GMarker(center, {draggable: true}); 
map.addOverlay(marker);
document.getElementById("lat").value = center.lat();
document.getElementById("lng").value = center.lng ();

geocoder = new GClientGeocoder();

GEvent.addListener(marker, "dragend", function() {
var point =marker.getPoint();
map.panTo(point);
document.getElementById("lat").value = point.lat();
document.getElementById("lng").value = point.lng();
});

GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById ("lat").value = center.lat();
document.getElementById("lng").value = center.lng();

GEvent.addListener(marker, "dragend", function() {
var point =marker.getPoint();
map.panTo(point);
document.getElementById("lat").value = point.lat();
document.getElementById("lng").value = point.lng();
});
});
}
}

function showAddress(address) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
if (geocoder) {
geocoder.getLatLng (
address,
function(point) {
if (!point) {
alert(address + " city not found !");
}
else {
document.getElementById("lat").value = point.lat();
document.getElementById("lng").value = point.lng();
map.clearOverlays()
map.setCenter(point, 14);
var marker = new GMarker(point, {draggable: true}); 
map.addOverlay(marker);

GEvent.addListener(marker, "dragend", function() {
var pt =marker.getPoint();
map.panTo(pt);
document.getElementById("lat").value = pt.lat();
document.getElementById("lng").value = pt.lng();
});

GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById ("lat").value = center.lat();
document.getElementById("lng").value = center.lng();

GEvent.addListener(marker, "dragend", function() {
var pt =marker.getPoint();
map.panTo(pt);
document.getElementById("lat").value = pt.lat();
document.getElementById("lng").value = pt.lng();
});
});
}}
);
}}
    </script><script src="Example5_files/mod_jslinker.js" charset="UTF-8" type="text/javascript"></script><script src="Example5_files/mod_legacy_api_gcmod_dragmod_controls.js" charset="UTF-8" type="text/javascript"></script><script src="Example5_files/mod_display_manager.js" charset="UTF-8" type="text/javascript"></script></head><body onload="load()" onunload="GUnload()">

    <script language="JavaScript">
<!--
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all )) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
    </script>

        
        <b>Find coordinates by moving around the map</b>
        <br>
        <br>
        a. Drag and drop the map to each location.
        <br>
        b. Zoom in for better accuracy.
        <br>
        c. Drag and drop the marker to pinpoint the place. The coordinates are refreshed
        at the end of each movement.
        <br>
        <br>
        <b>Type city name:</b>
        <form action="#" onsubmit="showAddress(this.address.value); return false">
            <input size="34" name="address" value="BagBazar" type="text">
            <input value="Search!" type="submit">
        </form>
        <br>
       Current coordinates: 
            <table bgcolor="#ffffff" width="300">
                <tbody><tr>
                    <td width="70">
                        <b>Latitude:</b></td>
                    <td>
                        <input size="34" name="latitude" value="" id="lat" type="text"></td>
                </tr>
                <tr>
                    <td width="70">
                        <b>Longitude:</b></td>
                    <td>
                        <input size="34" name="longitude" value="" id="lng" type="text"></td>
                </tr>
            </tbody></table>
            <br>
            <div id="map" style="width: 900px; height: 660px; position: relative; background-color: rgb(229, 227, 223);" align="center"><div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><div style="position: absolute; left: 73px; top: 16px; z-index: 0; cursor: url(http://maps.google.com/intl/en_ALL/mapfiles/openhand.cur), default;"><div style="position: absolute; left: 0px; top: 0px; display: none;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none;"></div></div><div style="position: absolute; left: 0px; top: 0px;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx776y1156.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -108px; top: -291px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx776y1157.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -108px; top: -35px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx776y1158.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -108px; top: 221px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx776y1159.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -108px; top: 477px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -108px; top: 733px; width: 256px; height: 256px; -moz-user-select: none; display: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx777y1156.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 148px; top: -291px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx777y1157.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 148px; top: -35px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx777y1158.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 148px; top: 221px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx777y1159.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 148px; top: 477px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 148px; top: 733px; width: 256px; height: 256px; -moz-user-select: none; display: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx778y1156.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 404px; top: -291px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx778y1157.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 404px; top: -35px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx778y1158.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 404px; top: 221px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx778y1159.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 404px; top: 477px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 404px; top: 733px; width: 256px; height: 256px; -moz-user-select: none; display: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx779y1156.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 660px; top: -291px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx779y1157.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 660px; top: -35px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx779y1158.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 660px; top: 221px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx779y1159.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 660px; top: 477px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 660px; top: 733px; width: 256px; height: 256px; -moz-user-select: none; display: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx780y1156.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 916px; top: -291px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx780y1157.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 916px; top: -35px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx780y1158.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 916px; top: 221px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx780y1159.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 916px; top: 477px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/transparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 916px; top: 733px; width: 256px; height: 256px; -moz-user-select: none; display: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx775y1156.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -364px; top: -291px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx775y1157.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -364px; top: -35px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx775y1158.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -364px; top: 221px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx775y1159.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -364px; top: 477px; width: 256px; height: 256px; -moz-user-select: none;"><img src="Example5_files/v36hlencookiefzwq2nG-B8EX3nZyGZz_wUSNtyXl5qj43zNtWAx775y1160.jpg" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -364px; top: 733px; width: 256px; height: 256px; -moz-user-select: none;"><div style="position: absolute; left: 404px; top: 733px; width: 256px; height: 256px;"><div style="padding: 6em; font-family: Arial,sans-serif; font-size: x-small; text-align: center; -moz-user-select: none;">We are sorry, but we don't have imagery at this zoom level for this region.<p>Try zooming out for a broader look.</p></div></div><div style="position: absolute; left: -108px; top: 733px; width: 256px; height: 256px;"><div style="padding: 6em; font-family: Arial,sans-serif; font-size: x-small; text-align: center; -moz-user-select: none;">We are sorry, but we don't have imagery at this zoom level for this region.<p>Try zooming out for a broader look.</p></div></div><div style="position: absolute; left: 148px; top: 733px; width: 256px; height: 256px;"><div style="padding: 6em; font-family: Arial,sans-serif; font-size: x-small; text-align: center; -moz-user-select: none;">We are sorry, but we don't have imagery at this zoom level for this region.<p>Try zooming out for a broader look.</p></div></div><div style="position: absolute; left: 660px; top: 733px; width: 256px; height: 256px;"><div style="padding: 6em; font-family: Arial,sans-serif; font-size: x-small; text-align: center; -moz-user-select: none;">We are sorry, but we don't have imagery at this zoom level for this region.<p>Try zooming out for a broader look.</p></div></div><div style="position: absolute; left: 916px; top: 733px; width: 256px; height: 256px;"><div style="padding: 6em; font-family: Arial,sans-serif; font-size: x-small; text-align: center; -moz-user-select: none;">We are sorry, but we don't have imagery at this zoom level for this region.<p>Try zooming out for a broader look.</p></div></div></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 100;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 101;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 102;"><img class="gmnoprint" src="Example5_files/shadow50.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 368px; top: 280px; width: 37px; height: 34px; -moz-user-select: none; z-index: 73525536;"><img class="gmnoprint" src="Example5_files/drag_cross_67_16.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 16px; height: 16px; -moz-user-select: none; display: none;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 103;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 104; cursor: default;"><img class="gmnoprint" src="Example5_files/marker.png" style="border: 0px none ; margin: 0px; padding: 0px; width: 20px; height: 34px; -moz-user-select: none; position: absolute; left: 368px; top: 280px; z-index: 73525536;"><img class="gmnoscreen" src="Example5_files/markerff.gif" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 368px; top: 280px; width: 20px; height: 34px; -moz-user-select: none; z-index: 73525536;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 105;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 106;"><img usemap="#gmimap1" class="gmnoprint" src="Example5_files/markerTransparent.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 368px; top: 280px; width: 20px; height: 34px; -moz-user-select: none; z-index: 73525536;"><map id="gmimap1" name="gmimap1"><area style="position: absolute; left: 0px; top: 0px;" id="mtgt_unnamed_1" href="javascript:void(0)" alt="" shape="poly" coords="9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0" log="miw"></map></div><div style="position: absolute; left: 0px; top: 0px; z-index: 107; cursor: default;"></div></div></div><div style="-moz-user-select: none; position: absolute; left: 2px; bottom: 2px;" class="gmnoprint"><a target="_blank" href="http://maps.google.com/maps?ll=-22.976727,-43.260727&amp;spn=0.417231,0.617981&amp;t=k&amp;z=11&amp;key=ABQIAAAAUvgMDpSwpIVSdk4Lt1gyZxRrPG9ukeNb8tYptMFxTfI6RCHRlBR6oN-gOMyEFzILA_3i60HC7gO7HQ&amp;oi=map_misc&amp;ct=api_logo" title="Click to see this area on Google Maps"><img src="Example5_files/poweredby.png" style="border: 0px none ; margin: 0px; padding: 0px; width: 62px; height: 30px; -moz-user-select: none; cursor: pointer;"></a></div><div dir="ltr" style="-moz-user-select: none; position: absolute; right: 3px; bottom: 2px; color: white; font-family: Arial,sans-serif; font-size: 11px; white-space: nowrap; text-align: right;" class="gmnoprint"><span></span><span>Imagery �2009  TerraMetrics - </span><a style="color: white;" target="_blank" href="http://www.google.com/intl/en_ALL/help/terms_maps.html">Terms of Use</a></div><div class="gmnoprint" style="width: 37px; height: 94px; -moz-user-select: none; position: absolute; left: 7px; top: 7px;"><img src="Example5_files/smc.png" style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 37px; height: 94px; -moz-user-select: none;"><div title="Pan up" style="position: absolute; left: 9px; top: 0px; width: 18px; height: 18px; cursor: pointer;"></div><div title="Pan left" style="position: absolute; left: 0px; top: 18px; width: 18px; height: 18px; cursor: pointer;"></div><div title="Pan right" style="position: absolute; left: 18px; top: 18px; width: 18px; height: 18px; cursor: pointer;"></div><div title="Pan down" style="position: absolute; left: 9px; top: 36px; width: 18px; height: 18px; cursor: pointer;"></div><div title="Zoom In" style="position: absolute; left: 9px; top: 57px; width: 18px; height: 18px; cursor: pointer;"></div><div title="Zoom Out" style="position: absolute; left: 9px; top: 75px; width: 18px; height: 18px; cursor: pointer;"></div></div><div style="-moz-user-select: none; position: absolute; right: 7px; top: 7px; color: black; font-family: Arial,sans-serif; font-size: small; width: 200px; height: 19px;" class="gmnoprint"><div id="amtc_option_0" title="Show street map" style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 10.2em;"><div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;">Map</div></div><div id="amtc_option_1" title="Show satellite imagery" style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.1em;"><div style="border-style: solid; border-color: rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132); border-width: 1px; font-size: 12px; font-weight: bold;">Satellite</div></div><div id="amtc_option_2" title="Show imagery with street names" style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 0em;"><div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;">Hybrid</div></div></div></div>
</body></html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Abhishek Sur
President
India India
Did you like his post?

Oh, lets go a bit further to know him better.
Visit his Website : www.abhisheksur.com to know more about Abhishek.

Abhishek also authored a book on .NET 4.5 Features and recommends you to read it, you will learn a lot from it.
http://bit.ly/EXPERTCookBook

Basically he is from India, who loves to explore the .NET world. He loves to code and in his leisure you always find him talking about technical stuffs.

Working as a VP product of APPSeCONNECT, an integration platform of future, he does all sort of innovation around the product.

Have any problem? Write to him in his Forum.

You can also mail him directly to abhi2434@yahoo.com

Want a Coder like him for your project?
Drop him a mail to contact@abhisheksur.com

Visit His Blog

Dotnet Tricks and Tips



Dont forget to vote or share your comments about his Writing

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 21 Sep 2007

Article Copyright 2007 by Abhishek Sur
Everything else Copyright © CodeProject, 1999-2024

Web04 2.8:2024-04-02:1