Introduction

This blog Is Useful To Get Direction Of Two Different Point and Find out Distance. It is useful to Best Path of you going to Location easily find out. How to Integrate Google Map in (C#) and Any Other Language. Person Can Enter Starting Point and Ending Point.

Screen Shot

Screen Shot

Using The Code

Step 1: Adding Script and Function.

  1. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  3. <script language="javascript" type="text/javascript">
  4. var directionsDisplay;
  5. var directionsService = new google.maps.DirectionsService();
  7. function InitializeMap() {
  8. directionsDisplay = new google.maps.DirectionsRenderer();
  9. var latlng = new google.maps.LatLng(-34.397, 150.644);
  10. var myOptions =
  11. {
  12. zoom: 8,
  13. center: latlng,
  14. mapTypeId: google.maps.MapTypeId.ROADMAP
  15. };
  16. var map = new google.maps.Map(document.getElementById("map"), myOptions);
  18. directionsDisplay.setMap(map);
  19. directionsDisplay.setPanel(document.getElementById('directionpanel'));
  21. var control = document.getElementById('control');
  22. control.style.display = 'block';
  25. }
  29. function calcRoute() {
  31. var start = document.getElementById('startvalue').value;
  32. var end = document.getElementById('endvalue').value;
  33. var request = {
  34. origin: start,
  35. destination: end,
  36. travelMode: google.maps.DirectionsTravelMode.DRIVING
  37. };
  38. directionsService.route(request, function (response, status) {
  39. if (status == google.maps.DirectionsStatus.OK) {
  40. directionsDisplay.setDirections(response);
  41. }
  42. });
  44. }
  48. function Button1_onclick() {
  49. calcRoute();
  50. }
  52. window.onload = InitializeMap;
  53. </script>
Step 2: Create Design.
  1. <table id="control">
  2. <tr>
  3. <td>
  4. <table>
  5. <tr>
  6. <td>
  7. From:
  8. </td>
  9. <td>
  10. <input id="startvalue" type="text" style="width: 305px" />
  11. </td>
  12. </tr>
  13. <tr>
  14. <td>
  15. To:
  16. </td>
  17. <td>
  18. <input id="endvalue" type="text" style="width: 301px" />
  19. </td>
  20. </tr>
  21. <tr>
  22. <td align="right">
  23. <input id="Button1" type="button" value="GetDirections" onclick="return Button1_onclick()" />
  24. </td>
  25. </tr>
  26. </table>
  27. </td>
  28. </tr>
  29. <tr>
  30. <td valign="top">
  31. <div id="directionpanel" style="height: 390px; overflow: auto">
  32. </div>
  33. </td>
  34. <td valign="top">
  35. <div id="map" style="height: 390px; width: 489px">
  36. </div>
  37. </td>
  38. </tr>
  39. </table>
Step 3: See View.

map

This blog Related Any Issues and Any Google API Integration of Your Own Site Than Contact Me : My Email Id: [email protected].