How to connect two points in Google map..?

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.computeLength(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.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>

More Related Contents:

Leave a Comment Cancel reply