Duncan's blog

September 12, 2013

Draggable polyline markers

Filed under: Google Maps,Javascript — duncan @ 6:39 pm
Tags: , , ,

In response to a comment on a previous post I did with draggable polylines, I wrote this little example.  I’ve drawn a polyline along several coordinates, with a marker at each point.  And if you drag the markers to new locations, it updates the polyline.

<!DOCTYPE html>
<html>
<head>
<title></title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { width:500px; height:400px }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    var arrDestinations;

    function initialize() {
        var i, latlng, nextlatlng, marker, map = new google.maps.Map(document.getElementById("map"), {
            zoom: 15,
            center: new google.maps.LatLng(56.873406,-5.432421),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        arrDestinations = [
            {lat: 56.872831, lng: -5.442528},
            {lat: 56.874837, lng: -5.435876},
            {lat: 56.876056, lng: -5.433408},
            {lat: 56.876267, lng: -5.431155},
            {lat: 56.875306, lng: -5.428301},
            {lat: 56.874332, lng: -5.4277},
            {lat: 56.873394, lng: -5.427786}
        ];

        for (i = 0; i < arrDestinations.length; i++) {
            latlng = new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lng);

            if (i < arrDestinations.length-1) {
                nextlatlng = new google.maps.LatLng(arrDestinations[i+1].lat, arrDestinations[i+1].lng);

                // draw a line from this marker to the next one 
                arrDestinations[i].polyline = new google.maps.Polyline({
                    path: [latlng, nextlatlng],
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.5,
                    strokeWeight: 2,
                    map: map
                });
            }

            marker = new google.maps.Marker({
                position: latlng,
                map: map, 
                draggable: true
            });

            bindMarkerToPolylines(marker, i);
        }
    }

    function bindMarkerToPolylines(marker, index) {
        google.maps.event.addListener(marker, 'dragend', function() {
            var nextlatlng, prevlatlng, newMarkerLatLng = marker.getPosition();

            // for all markers apart from the last one, we have the polyline from this marker to the next one to update
            if (index < arrDestinations.length-1) {
                nextlatlng = new google.maps.LatLng(arrDestinations[index+1].lat, arrDestinations[index+1].lng);
                arrDestinations[index].polyline.setPath([newMarkerLatLng, nextlatlng]);
            }

            // for all markers apart from the first one, we have the polyline to this marker from the previous one
            if (index > 0) {
                prevlatlng = new google.maps.LatLng(arrDestinations[index-1].lat, arrDestinations[index-1].lng);
                arrDestinations[index-1].polyline.setPath([prevlatlng, newMarkerLatLng]);
            }

            // update our lat/lng values
            arrDestinations[index].lat = newMarkerLatLng.lat();
            arrDestinations[index].lng = newMarkerLatLng.lng();
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
    <div id="map"></div>
</body>
</html>

Which gives me a lovely little map like this (centred on the Glenfinnan viaduct in case you’re wondering):

draggablePolyline

And I can then drag the markers to new locations, and end up with it looking more like so:

draggablePolyline2

Although the number of markers remains the same.  An exercise for another day would be how to delete any marker.

3 Comments »

  1. Thanks for the Help, i will try to implement this on my map, to delete each one of them is easy hard must be the part where the polyline goes to the next one.🙂 Cheers.

    Comment by Nelson — September 12, 2013 @ 10:04 pm | Reply

  2. Example of how to clear a marker by it´s id, one by one:

    var id;

    arrDestinations.marker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: ‘https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png’,
    draggable: true,
    });

    arrDestinations.marker.setMap(map);
    id = arrDestinations.marker.__gm_id
    mark[id] = arrDestinations.marker;

    google.maps.event.addListener(arrDestinations.marker, “rightclick”, function (point) {
    var conf = confirm(“Clear Marker?”);
    if (conf == true) {
    id = this.__gm_id; <<< this marker id
    delMarker(id)});

    var delMarker = function (id) {
    arrDestinations.marker = mark[id];
    arrDestinations.marker.setMap(null);
    }

    Comment by Nelson — September 13, 2013 @ 9:21 am | Reply

  3. I was not able to implement this solution on my code, because i do not use array[{}] with values built in, i get them from database and i could’n put it in that format so i can use them.😦

    Thanks.

    Comment by Nelson — September 13, 2013 @ 2:40 pm | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: