Hi ,
I am tired to create a routes in google map through javascript using asp.net. But it is not loaded propely and also getting the developer version map. So please help me to complete the work.
1. Can i get the source code to implement the route map in the Asp.net.
Code Side
- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
- <script language="javascript" type="text/javascript">
- var directionsDisplay;
- var directionsService = new google.maps.DirectionsService();
- function InitializeMap() {
- directionsDisplay = new google.maps.DirectionsRenderer();
- var latlng = new google.maps.LatLng(-34.397, 150.644);
- var myOptions =
- {
- zoom: 8,
- center: latlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map(document.getElementById("map"), myOptions);
- directionsDisplay.setMap(map);
- directionsDisplay.setPanel(document.getElementById('directionpanel'));
- var control = document.getElementById('control');
- control.style.display = 'block';
- }
- function calcRoute() {
- var start = document.getElementById('startvalue').value;
- var end = document.getElementById('endvalue').value;
- var request = {
- origin: start,
- destination: end,
- travelMode: google.maps.DirectionsTravelMode.DRIVING
- };
- directionsService.route(request, function (response, status) {
- if (status == google.maps.DirectionsStatus.OK) {
- directionsDisplay.setDirections(response);
- }
- });
- }
- function Button1_onclick() {
- calcRoute();
- }
- window.onload = InitializeMap;
- </script>
- <table id ="control">
- <tr>
- <td>
- <table>
- <tr>
- <td>From:</td>
- <td>
- <input id="startvalue" type="text" style="width: 305px" /></td>
- </tr>
- <tr>
- <td>To:</td>
- <td><input id="endvalue" type="text" style="width: 301px" /></td>
- </tr>
- <tr>
- <td align ="right">
- <input id="Button1" type="button" value="GetDirections" onclick="return Button1_onclick()" /></td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td valign ="top">
- <div id ="directionpanel" style="height: 390px;overflow: auto" ></div>
- </td>
- <td valign ="top">
- <div id ="map" style="height: 390px; width: 489px"></div>
- </td>
- </tr>
- </table>
Display Side