Draw a line between two point on a Google map using jQuery?

Question

How to draw a line between two points (Latitude and Longitude) with the Google map API using jQuery or Javascript? I need the shortest path between the two points. It may be any type of line.

Answer 1

Here's an API v3 way of drawing a line.

var line = new google.maps.Polyline({
    path: [
        new google.maps.LatLng(37.4419, -122.1419), 
        new google.maps.LatLng(37.4519, -122.1519)
    ],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 10,
    map: map
});

This simply draws a straight line between two points. If you want it to be the shortest path , you need to account for the fact that the earth is curved, and draw a geodesic line. To do that, you have to use the geometry library in the Google Maps API, by adding this optional libraries parameter:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

And then just add geodesic: true to the options for your Polyline:

var line = new google.maps.Polyline({
    path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 10,
    geodesic: true,
    map: map
});

Answer 2

For API v2 only!

The following code snippet creates a 10-pixel-wide red polyline between two points:

var polyline = new GPolyline([
  new GLatLng(37.4419, -122.1419),
  new GLatLng(37.4519, -122.1519)],
  "#ff0000", 10);
map.addOverlay(polyline);

You can find the documentation here .

Answer 3

This draws a line between two points...and beyond. You simply keep entering new places into the searchbox and it will keep plotting the points between the most recent two points:

SEE WORKING EXAMPLE HERE

HTML:

<div id="inputDiv">
    <input id="startvalue" type="text" width="90" value="" autofocus placeholder="Keep Adding Places and searching...">
</div>
<div id="map"></div>
<div id="results"></div>

JS:

var geocoder;
var map;
var location1;
var location2;

$(document).ready(function(){
    initialize();    
    $("#startvalue").on('keydown',function(event){
        if (event.keyCode == 13 ) {
            createLine();
            $(this).val("");
            $(this).focus();
        }
    });

})

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

    setZoom();

    var input = /** @type {HTMLInputElement} */(
    document.getElementById('startvalue'));

    var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

}

var address;
var address2;
function createLine(){

    if (address){
        address2 = document.getElementById('startvalue').value;     
    } else {
        address = document.getElementById('startvalue').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;
        if (address2){
            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: "#FF5E56",
                    strokeOpacity: 0.6,
                    strokeWeight: 5
                });
                location1 = convertLocationToLatLong(temp.toUrlValue())
                location2 = convertLocationToLatLong(temp2.toUrlValue())



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

                polyline.setMap(map);
                plotMap(location1,location2);
            });   
            address = address2;          
        } else {
            location1 = convertLocationToLatLong(temp.toUrlValue());
            plotMap(location1);
        }
    });
}

function convertLocationToLatLong(location){
    var location = location.split(',').map(function(item) {
        return parseFloat(item);
    });
    return location
}

function plotMap(location1,location2){
    var location1 = new google.maps.LatLng(location1[0],location1[1]);
    if (location2){
        var location2 = new google.maps.LatLng(location2[0],location2[1]);      
    }
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(location1);
    if(location2){
        bounds.extend(location2);    
    }
    map.fitBounds(bounds);       
    setZoom();
}

function setZoom(){
    google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomChangeBoundsListener = 
        google.maps.event.addListener(map, 'bounds_changed', function(event) {
            if (this.getZoom() > 15 && this.initialZoom == true) {
                // Change max/min zoom here
                this.setZoom(15);
                this.initialZoom = false;
            }
            google.maps.event.removeListener(zoomChangeBoundsListener);
        });
    });
    map.initialZoom = true;
}

CSS:

#map {
    margin: 0;
    padding: 0;
    height: 400px;
    margin-top:30px;
   width:100%;
}

#inputDiv{
    position:absolute;
    top:0;
}

#startvalue{
  width:300px;
  padding:8px;
}