SIMPLE JAVASCRIPT TO GET GOOGLE MAP AND SHOW DIRECTION FROM ANY PLACE
SAMPLE IMAGE:
<HTML>
<HEAD>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2">
</script>
<script type="text/javascript">
var map = null;
function GetMap() {
map = new VEMap('myMap');
//SET YOUR PLACE LATITUTE AND LONGITUTE HERE
map.LoadMap(new VELatLong(13.09755, 77.56317), 8, VEMapStyle.Road, false);var pinpoint = map.GetCenter();
shape = new VEShape(VEShapeType.Pushpin, pinpoint);
shape.SetTitle("KSNDMC OFFICE");
//SET NAME TO SHOW IN GOOGLE MAP ON PIN POINT
shape.SetDescription("KSNDMC Campus, Major Sandeep Unnikrishnan Road,Near Attur Layout, Yelahanka Bangalore - 560 064, Karnataka, INDIA");map.AddShape(shape);
}
function GetDirections() {
var what = document.getElementById('from').value;
var options = new VERouteOptions();
options.DrawRoute = true;
options.SetBestMapView = false;
options.RouteCallback = onGotRoute;
map.GetDirections([what, map.GetCenter()], options);
}
function onGotRoute(route) {
var legs = route.RouteLegs;
var turns = "Total distance: " + route.Distance.toFixed(1) + " mi\n";
var numTurns = 0;
var leg = null;
for (var i = 0; i < legs.length; i++) {
leg = legs[i];
var turn = null;
for (var j = 0; j < leg.Itinerary.Items.length; j++) {
turn = leg.Itinerary.Items[j];
numTurns++;
turns += numTurns + ".\t" + turn.Text + " (" + turn.Distance.toFixed(1) + " mi)\n";
}
}
document.getElementById("directions").value = turns;
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
</HEAD>
<BODY onload="GetMap()">
<div id='myMap' style="position: relative; width: 650px; height: 400px;">
</div>
<form name="form" action="" method="post">
Your Address (street, city state):<input id="from" type="text" value="" name="From" />
<input id="findit" type="button" value="Find Us!" name="find" onclick="GetDirections();" />
<br />
<br />
Your directions are:<br />
<textarea id="directions" cols="75" rows="5" value=""></textarea>
</form>
<div id="map_bottom"style="width: 342px; height: 150px;float:left">
<ul style="list-style-type:none;padding:0px;margin:0px;">
<li>Karnataka State Natural Disaster Monitoring Centre</li>
<li>KSNDMC Campus,</li>
<li>Major Sandeep Unnikrishnan Road,</li>
<li>Near Attur Layout,</li>
<li>Yelahanka Bangalore - 560 064,</li>
<li>Karnataka, INDIA</li>
</ul>
</div>
<div id="map_right" style="width: 300px; height: 150px;float:left">
<ul style="list-style-type:none;padding:0px;margin:0px;">
<li style="background-image:url(../images/phone.png);background-repeat:no-repeat; padding-left:44px;">+91 080 67355000</li>
<li> FAX +918067355198</li>
<li style="background-image:url(../images/email.png);height:32px;background-repeat:no-repeat; padding-left:44px;">ksndmc@ksndmc.org</li>
<li style="background-image:url(../images/facebook.png);height:32px;background-repeat:no-repeat; padding-left:44px;"><a href="https://www.facebook.com/KSNDMC">Connect With Facebook</a></li>
<li style="background-image:url(../images/twitter.png);height:32px;background-repeat:no-repeat; padding-left:44px;"><a href="#"></a>Connect With Twitter</li>
</ul>
</div>
</BODY>
</HTML>
No comments :
Post a Comment