Home/ Questions/Q 4103460
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T20:57:41+00:00

I have a problem in polyline of google maps. I have a polyline from

  • 0

I have a problem in polyline of google maps.

I have a polyline from one points to another point. When I click on the polyline, I need the latitude and logitude of the two ends.

Please can anyone help me?

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
function initialize()
{   
    var myLatLng = new google.maps.LatLng(0, -180);   
    var myOptions = {zoom: 2,center: myLatLng,mapTypeId: google.maps.MapTypeId.TERRAIN};  
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var flightPlanCoordinates = [   new google.maps.LatLng(17.772323, 78.214897),
                                    new google.maps.LatLng(28.46758, 78.027892),
                                    new google.maps.LatLng(29.46758, 88.027892),
                                    new google.maps.LatLng(20.46758, 97.027892),
                                    new google.maps.LatLng(17.772323, 78.214897)
                                ]; 
    var flightPath = new google.maps.Polyline({path: flightPlanCoordinates,strokeColor: "#FF0000",strokeOpacity: 1.,strokeWeight: 10});
    var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(flightPath, 'click', function() 
                                                        {        
                                                        //attached click event now do your logic here       
                                                            this.getPath().forEach(function(el, index)
                                                                                    {          
                                    //infowindow.setContent('Point ' + index + ' : Latitude = ' + el.lat() + ' | Longitude = ' + el.lng());         
                                                alert('Point ' + index + ' : Latitude = ' + el.lat() + ' | Longitude = ' + el.lng());
                                                                                    });
                                                        });
    flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width=100%; height:60%"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    UPDATE: Click on the polyline and starting and end points will have markers on top of them.

    Here is one way of doing it JSFiddle Demo. Basically, using google map’s click event property LatLng we get the Lat and Lng of the location of the mouse click in relation to the map. Using that LatLng along with the points in the polyline we can determine if the targeted point lines on a straight line with two of the points in the polyline. Furthermore, we’ll have to use Geo distance formulate to calculate if two adjacent points in the polyline and the targetted point are on the same line. If they are then by subtracting sum of point a and target and target and point b by the sum of point a and point b the distance difference should be closest to zero. So using this link’s Geo distance formula and toRad() function we are able to get the distance between three points.

    UPDATE #2:

    Q1: The if statement above basically extends the Number native function to include toRad function which converts numeric degrees to radians. This is used to calculate the geo distance difference between two geo points.

    Q2: The function distanceBetween

    uses the ‘haversine’ formula to
    calculate great-circle distances
    between the two points – that is, the
    shortest distance over the earth’s
    surface – giving an
    ‘as-the-crow-flies’ distance between
    the points (ignoring any hills!).

    if (typeof(Number.prototype.toRad) === "undefined") {
    Number.prototype.toRad = function() {
        return this * Math.PI / 180;
    }
}
var markerDist;
var startPointMarker = new google.maps.Marker();
var endPointMarker = new google.maps.Marker();
var map;

function distanceBetween(lat1, lat2, lon1, lon2) {
    var R = 6371; // km
    var dLat = (lat2 - lat1).toRad();
    var dLon = (lon2 - lon1).toRad();
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
    return parseFloat(d);
}

function initialize() {
    var myLatLng = new google.maps.LatLng(0, -180);
    var myOptions = {
        zoom: 2,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var flightPlanCoordinates = [new google.maps.LatLng(-27.46758, 153.027892), new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(29.46758, 88.027892), new google.maps.LatLng(20.46758, 97.027892), new google.maps.LatLng(17.772323, 78.214897)];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    google.maps.event.addListener(flightPath, 'click', function(el) {
        markerDist = {p1:'', p2:'', d:-1};
        startPointMarker.setMap(null);
        endPointMarker.setMap(null);
        var curLat = el.latLng.lat();
        var curLng = el.latLng.lng();

        var allPoints = this.getPath().getArray();
        for (var i = 0; i < allPoints.length - 1; i++) {
            var ab = distanceBetween(allPoints[i].lat(), curLat, allPoints[i].lng(), curLng);
            var bc = distanceBetween(curLat, allPoints[i + 1].lat(), curLng, allPoints[i + 1].lng());
            var ac = distanceBetween(allPoints[i].lat(), allPoints[i + 1].lat(), allPoints[i].lng(), allPoints[i + 1].lng());
            console.log(parseFloat(markerDist.d) + ' '+ Math.abs(ab+bc-ac));
            if ((parseFloat(markerDist.d) == -1) || parseFloat(markerDist.d) > parseFloat(Math.abs(ab + bc - ac))) {
                markerDist.p1 = allPoints[i];
                markerDist.p2 = allPoints[i + 1];
                markerDist.d = Math.abs(ab + bc - ac);
            }
        }
        startPointMarker.setPosition(markerDist.p1);
            endPointMarker.setPosition(markerDist.p2);
            startPointMarker.setMap(map);
            endPointMarker.setMap(map);
    });
    flightPath.setMap(map);
}

window.onload = initialize;
    • 0