function createLine()
{

        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(7.5653, 80.4303);
        var mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("directionpanel"), mapOptions);

        var address = document.getElementById('startvalue').value;
        var address2 = document.getElementById('endvalue').value;

        var temp, temp2;

        geocoder.geocode({ 'address': address }, function (results, status) {
            temp = results[0].geometry.location;
        });
        geocoder.geocode({ 'address': address2 }, function (results, status) {
            temp2 = results[0].geometry.location;
        });

        var route = [
          new google.maps.LatLng(temp),
          new google.maps.LatLng(temp2)
        ];


    var polyline = new google.maps.Polyline({
        path: route,
        strokeColor: "#ff0000",
        strokeOpacity: 0.6,
        strokeWeight: 5
    });

    polyline.setMap(map);


}

I want to draw a direct line to connect two points and i wont to calculate that line distance.any way i try to connect points using this code but it didn't work.Please help me..

    function createLine()
{

        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(7.5653, 80.4303);
        var mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("directionpanel"), mapOptions);

        var address = document.getElementById('startvalue').value;
        var address2 = document.getElementById('endvalue').value;

        var temp, temp2;

        geocoder.geocode({ 'address': address }, function (results, status) {
            temp = results[0].geometry.location;
        });
        geocoder.geocode({ 'address': address2 }, function (results, status) {
            temp2 = results[0].geometry.location;
        });

        var route = [
          new google.maps.LatLng(temp),
          new google.maps.LatLng(temp2)
        ];


    var polyline = new google.maps.Polyline({
        path: route,
        strokeColor: "#ff0000",
        strokeOpacity: 0.6,
        strokeWeight: 5
    });

    polyline.setMap(map);


}

I want to draw a direct line to connect two points and i wont to calculate that line distance.any way i try to connect points using this code but it didn't work.Please help me..

• javascript
• google-maps
• google-maps-api-3

1 Answer 1

Geocoding is asynchronous. Try something like this (call the second geocoder operation from the call back of the first, use the results of both inside the call back of the second).

function createLine()
{

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(7.5653, 80.4303);
    var mapOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("directionpanel"), mapOptions);

    var address = document.getElementById('startvalue').value;
    var address2 = document.getElementById('endvalue').value;

    var temp, temp2;

    geocoder.geocode({ 'address': address }, function (results, status) {
        temp = results[0].geometry.location;
        geocoder.geocode({ 'address': address2 }, function (results, status) {
            temp2 = results[0].geometry.location;

        var route = [
          temp,
          temp2
        ];

        var polyline = new google.maps.Polyline({
            path: route,
            strokeColor: "#ff0000",
            strokeOpacity: 0.6,
            strokeWeight: 5
        });

        polyline.setMap(map);
        });
    });
}

working example

code snippet:

var geocoder;
var map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(7.5653, 80.4303);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  createLine();
}

function createLine() {

  var address = document.getElementById('startvalue').value;
  var address2 = document.getElementById('endvalue').value;

  var temp, temp2;

  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status != "OK") alert("geocode of address:" + address + " failed, status=" + status);
    temp = results[0].geometry.location;
    document.getElementById('results').innerHTML += temp.toUrlValue() + "<br>";
    geocoder.geocode({
      'address': address2
    }, function(results, status) {
      if (status != "OK") alert("geocode of address:" + address + " failed, status=" + status);
      temp2 = results[0].geometry.location;
      document.getElementById('results').innerHTML += temp2.toUrlValue() + "<br>";

      var route = [
        temp,
        temp2
      ];

      var polyline = new google.maps.Polyline({
        path: route,
        strokeColor: "#ff0000",
        strokeOpacity: 0.6,
        strokeWeight: 5
      });

      var lengthInMeters = google.maps.geometry.spherical.puteLength(polyline.getPath());
      // alert("polyline is "+lengthInMeters+" long");            
      document.getElementById('results').innerHTML += "Polyline is " + lengthInMeters + " meters long<br>";

      polyline.setMap(map);
      var bounds = new google.maps.LatLngBounds();
      bounds.extend(temp);
      bounds.extend(temp2);
      map.fitBounds(bounds);
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  margin: 0;
  padding: 0;
  height: 100%;
}

<input id="startvalue" type="text" width="90" value="Megaswewa, Sri Lanka"></input>
<input id="endvalue" type="text" width="90" value="Kandy, Sri Lanka"></input>
<input type="button" value="Geocode" onclick="createLine()"></input>
<div id="map" style="width:600px;height:500px;"></div>
<div id="results"></div>
<script src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>