google maps api v3 draw polyline between draggable markers

StackOverflow https://stackoverflow.com/questions/22202724

Question

I have multiple markers on google map v3. When map gets loaded it draws all marker and polyline. Initial path of the polyline would be same LatLng of each marker. When you drag marker it should draw the line between original LatLng to new position of the marker. You can move all and/or any markers on the map and each marker should have separate line showing marker's original LatLng to new position. I have done similar thing in below code but the problem is when I move marker it looses previous line of the marker. It always shows only one line of the dragged marker. How to solve this problem. Thanks in advance... Ash

<!DOCTYPE html>
<html>
<head>
    <title>Marker with line example two</title>
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_canvas {
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <script>
        var line;
        var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
        var marker;
        var lines = [];
        function initialize() {
            var domain = [new google.maps.LatLng(11.2583, 75.1374)];
            var markers = [];

            var mapOptions = {
                zoom: 2,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                opacity: 0.2,
                disableDefaultUI: true,
                draggable: false
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            var lineCoordinates = [
              new google.maps.LatLng(53.215556, 56.949219),
              new google.maps.LatLng(75.797201, 125.003906),
              new google.maps.LatLng(37.7833, 144.9667),
              new google.maps.LatLng(-24.797201, 26.003906),
              new google.maps.LatLng(27.797201, -101.003906)
            ];

            for (i = 0; i < lineCoordinates.length; i++) {
                var latLng = lineCoordinates[i],
                    marker = new google.maps.Marker({
                        position: latLng,
                        draggable: true,
                        title: i.toString(),
                        map: map,
                    });
                markers.push({
                    key: i.toString(),
                    latLng: latLng
                });

                line = new google.maps.Polyline({
                    path: [latLng, latLng],
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    strokeColor: '#f00',
                    geodesic: true                    
                });
                line.setMap(map);

                lines.push(line);

                google.maps.event.addListener(marker, 'drag', function (event) {
                    var title = this.title,
                        result = $.grep(markers, function (e) { return e.key === title }),
                        oldLatLng = result[0].latLng,
                        newLatLng = new google.maps.LatLng(this.getPosition().lat(), this.getPosition().lng());

                    line.setPath([oldLatLng, newLatLng]);
                });

            } //end of for loop
        } //end of initialize function
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width: 1000px; height: 675px; margin-left: 400px; margin-top: 38px;"></div>
</body>
</html>
Was it helpful?

Solution

You were almost there. You have to make closure for variable line for event listener:

        (function(line) {
            google.maps.event.addListener(marker, 'drag', function (event) {
                var title = this.title,
                    result = $.grep(markers, function (e) { return e.key === title }),
                    oldLatLng = result[0].latLng,
                    newLatLng = new google.maps.LatLng(this.getPosition().lat(), this.getPosition().lng());

                line.setPath([oldLatLng, newLatLng]);
            });
        })(line);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top