Google maps

tutorial: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

by Ankit Kanojia

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<html>

  <body>
    <form id="form1" runat="server">
      <div id="dvMap" style="height: 400px; width: 80%;">
      </div>
      <br /> Average Speed (km/hr) :
      <input type="text" />
      <br />
      <br />
      <div align="left" style="width: 100%;">
        <table id="HtmlTable1" width="80%" border="1" style="border-color: #275D18; text-align: center;" cellpadding="3" cellspacing="0">
          <tr style="background-color: #D1E8B0;">
            <td style="width: 80px; color: #275D18; font-weight: bold;">
              Sr No.
            </td>
            <td style="width: 80px; color: #275D18; font-weight: bold;">
              Location Name
            </td>
            <td style="width: 100px; color: #275D18; font-weight: bold;">
              Latitude
            </td>
            <td style="width: 100px; color: #275D18; font-weight: bold;">
              Longitude
            </td>
            <td style="width: 100px; color: #275D18; font-weight: bold;">
              Distance (Meters)
            </td>
            <td style="width: 70px; color: #275D18; font-weight: bold;">
              Time (Minutes)
            </td>
            <td style="width: 60px; color: #275D18; font-weight: bold;">
              Delete
            </td>
          </tr>
        </table>
      </div>
      <div align="left" style="width: 100%;">
        <table id="HtmlTable" width="80%" border="1" style="border-color: #275D18; text-align: center;" cellpadding="3" cellspacing="0"></table>
      </div>
      

    </form>

  </body>

</html>

CSS

#map-canvas {
    height: 300px;
    width: 600px;
    background-color: #CCC;
}

JavaScript

//You can calculate directions (using a variety of methods of transportation) by using the DirectionsService object.
var directionsService = new google.maps.DirectionsService();

//Define a variable with all map points.
var _mapPoints = new Array();

//Define a DirectionsRenderer variable.
var _directionsRenderer = '';

//InitializeMap() function is used to initialize google map on page load.
function InitializeMap() {

  //DirectionsRenderer() is a used to render the direction
  _directionsRenderer = new google.maps.DirectionsRenderer();

  //Set the your own options for map.
  var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(21.7679, 78.8718),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  //Define the map.
  var map = new google.maps.Map(document.getElementById("dvMap"), myOptions);

  //Set the map for directionsRenderer
  _directionsRenderer.setMap(map);

  //Set different options for DirectionsRenderer mehtods.
  //draggable option will used to drag the route.
  _directionsRenderer.setOptions({
    draggable: true
  });

  //Add the doubel click event to map.
  google.maps.event.addListener(map, "dblclick", function(event) {

    //Check if Avg Speed value is enter.
    if ($("#txtAvgSpeed").val() == '') {
      alert("Please enter the Average Speed (km/hr).");
      $("#txtAvgSpeed").focus();
      return false;
    }

    var _currentPoints = event.latLng;
    _mapPoints.push(_currentPoints);
    getRoutePointsAndWaypoints();
  });

  //Add an event to route direction. This will fire when the direction is changed.
  google.maps.event.addListener(_directionsRenderer, 'directions_changed', function() {
    computeTotalDistanceforRoute(_directionsRenderer.directions);
  });
}

//getRoutePointsAndWaypoints() will help you to pass points and waypoints to drawRoute() function
function getRoutePointsAndWaypoints() {
  //Define a variable for waypoints.
  var _waypoints = new Array();

  if (_mapPoints.length > 2) //Waypoints will be come.
...