create a polyline with multiple points, then join an added marker to a line segment google maps v3

Question

I have a google map that I am plotting a route on and linking my points with a polyline. I create a new point on the line with a right click on the map. I also have the ability to create a point of interest along my path and I'm using a different marker icon for those as well as showing an info window with the POI text.

google.maps.event.addListener(Map, "rightclick", function (event) {

            var markerIndex = polyLine.getPath().length;
            polyLine.setMap(Map);
            var isFirstMarker = markerIndex === 0;
            var marker;
            var poiText = "";
            if(!isAddingPOI) {
                marker = new google.maps.Marker({
                    map: Map,
                    position: event.latLng,
                    draggable: true,
                    icon: '/images/waypoint.png'
                });
            } else {
                poiText = prompt("Enter a short description for this point of interest", "");
                if (poiText != null) {
                    marker = new google.maps.Marker({
                        map: Map,
                        position: event.latLng,
                        draggable: true,
                        icon: '/images/point_of_interest.png',
                        info: new google.maps.InfoWindow({
                            content:poiText
                        })
                    });

                }
            }

            if (isAddingPOI) {
                predefinedPositions.push(new predefinedPosition(event.latLng.lat(), event.latLng.lng(), poiText));
                google.maps.event.addListener(marker, 'click', function () {
                    marker.info.open(Map, marker);
                });
                isAddingPOI = false;
            } else {
                predefinedPositions.push(new predefinedPosition(event.latLng.lat(), event.latLng.lng()));
            }

            polyLine.getPath().push(event.latLng);

            outlineMarkers.push(marker);

            google.maps.event.addListener(marker, 'drag', function (dragEvent) {
                polyLine.getPath().setAt(markerIndex, dragEvent.latLng);
                predefinedPositions[markerIndex].Latitude = dragEvent.latLng.lat();
                predefinedPositions[markerIndex].Longitude = dragEvent.latLng.lng();
                updateDistance(outlineMarkers);
            });                

            updateDistance(outlineMarkers);
        });

what I need now is the ability for the user to specify a LatLng for a new marker which would be placed on the map as draggable and then to be able to merge (by dragging) that marker to my created path. Ideally, I'd like for the segment of the polyline where the marker is dragged to change colors while the marker is over it. I'll then need to add that marker to the path array for the final output.

I found this which is the closest to what I want that I could find but it's not quite what I'm looking for: Google Maps API v3 - Draggable Marker Along a Polyline

I also tried adding a 'mouseover' event to my polyline to update the color which doesn't ever get triggered while I'm dragging a marker. It also updates the entire polyline's color (not just the segment) when I mouse over it. I'm sure I can sort out the segment color change myself, but I'm stuck on dragging the marker over the line and having it change colors and ultimately merging it to my path.

any suggestions would be greatly appreciated.

TIA

You can't update the color of a segment of a polyline (each polyline only has one color). You need to create a separate polyline for each segment, then change itsthe color of the polyline/segment on mouseover. Please provide a [mcve] that demonstrates your issue. — geocodezip, Aug 16 '16 at 23:37

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

I got it sorted out using something similar to this: Confine dragging of Google Maps V3 Marker to Polyline

I didn't get the polyline segment to change colors, but this "snap-to" functionality is really close to what I was looking for.

edited May 23 '17 at 12:32

Community

1
1

answered Aug 17 '16 at 02:49

Blair Holmes

1,521
2
22
35

score 0 · Answer 2 · answered Sep 22 '16 at 06:05

try this way

//data sample
var cities = [
    {
            city : 'Mayestik Tailor',
            desc : 'Jln Aspal Rata',
            lat : -6.2426373,
            lng : 106.7907953
        },
        {
            city : 'Bubur Ayam Barito',
            desc : 'Jl. Gandaria Tengah 3, Kramat Pela, Kebayoran Baru',
            lat : -6.2457674,
            lng : 106.790865
        },
        {
            city : 'Apartment Permata Gandaria',
            desc : 'Jl. Kyai Moh. Syafii Hadzami/Jl. Taman Gandaria',
            lat : -6.2450461,
            lng : 106.7882604

        }
];

create function to center point of layout

var mapOptions = {
        zoom: 15,
        center:new google.maps.LatLng(-6.2451528,106.7901808),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var createMarker = function (info){
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(info.lat, info.lng),
            title: info.city
        });
    }

    var arr = [];
    for (i = 0; i < cities.length; i++){
        arr.push(new google.maps.LatLng(cities[i].lat, cities[i].lng));
    }

    // create polyline
        var flightPath = new google.maps.Polyline({
            path: arr,
            geodesic: true,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        flightPath.setMap(map);

 // loop for marker
    for (i = 0; i < cities.length; i++){
        createMarker(cities[i]);
    }

for css class

#map {
    height:420px;
    width:600px;
}
.infoWindowContent {
    font-size:  14px !important;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}
h2 {
    margin-bottom:0;
    margin-top: 0;
}

on HTML Code

<div id="map"></div>

create a polyline with multiple points, then join an added marker to a line segment google maps v3

2 Answers2