Draw the Direction between points in google maps

Question

We have json like this

var myjson=[ { "Longitude": "17.4266008", "Lattitude": "78.5497557", "UserID": "2" }, { "Longitude": "17.4265974", "Lattitude": "78.5497276", "UserID": "2" }, { "Longitude": "17.4266509", "Lattitude": "78.5496451", "UserID": "2 " }, { "Longitude": "17.4266506", "Lattitude": "78.5497198", "UserID": "2" }, { "Longitude": "17.4266805", "Lattitude": "78.5496888", "UserID": "2" }, { "Longitude": "17.4266805", "Lattitude": "78.5496888", "UserID": "2" }, { "Longitude": "17.4266805", "Lattitude": "78.5496888", "UserID": "2" }, ];

We need Like this So We tried like this

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom: 6,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected == true) {
      waypts.push({
          location:checkboxArray[i].value,
          stopover:true});
    }
  }

  var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

We know only draw Lines Between two points but We have json.In json have number of latitude and longitude .We need to Draw Lines Between points.Please guide me.And tell me what wrong in my code. calcRoute method is called in button action

Answer 1

Instead of reading the waypoints from the DOM, read them from your array. Something like

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var waypts = [];

    var myjson = [{
        "Longitude": "17.4266008",
        "Lattitude": "78.5497557",
        "UserID": "2"
    }, {
        "Longitude": "17.4265974",
        "Lattitude": "78.5497276",
        "UserID": "2"
    }, {
        "Longitude": "17.4266509",
        "Lattitude": "78.5496451",
        "UserID": "2 "
    }, {
        "Longitude": "17.4266506",
        "Lattitude": "78.5497198",
        "UserID": "2"
    }, {
        "Longitude": "17.4266805",
        "Lattitude": "78.5496888",
        "UserID": "2"
    }, {
        "Longitude": "17.4266805",
        "Lattitude": "78.5496888",
        "UserID": "2"
    }, {
        "Longitude": "17.4266805",
        "Lattitude": "78.5496888",
        "UserID": "2"
    }];


    for (var i = 0; i < myjson.length; i++) {
        waypts.push({
            location: new google.maps.LatLng(parseFloat(myjson[i].Lattitude), parseFloat(myjson[i].Longitude)),
            stopover: true
        });
    }