-1

I'm using the Google Maps JS API v3 to fetch me some directions with multiple routes, custom polylines to select routes per direction and custom location markers. I have set the renderer options as followed:

var directionsRendererRequest = {
    map: map,
    directions: response,
    routeIndex: i,
    draggable: true,
    suppressInfoWindows: true,
    suppressMarkers: true,
    suppressPolylines: true
};

As you can see, I'm suppressing infowindows, markers and polylines so I can use my own custom ones. I'm also using the draggable option to make routes draggable. The problem is, however, because I'm already suppressing markers, the draggable markers won't appear either. Would this indicate that I would need to render my own draggable markers and add listeners to them? How would I go on about this?

I need to know how I can add custom draggable markers and apply these to my routes individually.

My original code is as follows:

var directionsRequest = {
    origin: fromTo[j].origin,
    destination: fromTo[j].destination,
    travelMode: google.maps.TravelMode.DRIVING,
    provideRouteAlternatives: true
};

setTimeout(function() {
    directionsService.route(directionsRequest, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            responses.push(response);

            // Render directions, markers & polylines.
            renderDirections(j, response);
            renderDirectionsMarkers(j, response);
            renderDirectionsPolylines(j, response);

            if (responses.length === fromTo.length) {
                centerMapOnMarkers();
                handleTotalDistance();
            }
        } else {
            console.log('Directions request failed due to ' + status);

            j--;
            delay++;
        }
    });
}, delay);

Now I was thinking of adding custom draggable markers onto my polylines as I drag over them:

var polylineMousemove = function(index, route, event) {
    position = { lat: event.latLng.lat(), lng: event.latLng.lng() };

    if (typeof dragHandles[index] === 'undefined') {
        dragHandles[index] = new google.maps.Marker({
            map: map,
            position: position,
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 6,
                fillColor: '#FFFFFF',
                fillOpacity: 1,
                strokeColor: '#000000',
                strokeWeight: 3,
            },
            draggable: true
        });

        google.maps.event.addListener(dragHandles[index], 'mousedown', function(event) { dragHandleMouseDown(event); });
        google.maps.event.addListener(dragHandles[index], 'mouseup', function(event) { dragHandleMouseUp(event); });
    } else {
        dragHandles[index].setPosition(position);
    }
};

This works fine, and I can drag the markers across the map, but how do I link them to any of the routes I render?

Functions:

renderDirections

var renderDirections = function(index, response) {
    directions[index] = [];

    routeDistance[index] = [];
    routeDuration[index] = [];

    for (var i = 0; i < response.routes.length; i++) {
        var route = response.routes[i];
        var legs = route.legs;

        routeDistance[index][i] = 0;
        routeDuration[index][i] = 0;

        var directionsRendererRequest = {
            map: map,
            directions: response,
            routeIndex: i,
            draggable: true,
            suppressInfoWindows: true,
            suppressMarkers: true,
            suppressPolylines: true
        };

        directions[index][i] = new google.maps.DirectionsRenderer(directionsRendererRequest);

        routeDistance[index][i] = legs[0].distance.value;
        routeDuration[index][i] = legs[0].duration.text;
    }

    handleRouteDistance(index, 0);
};

renderDirectionsMarkers

var renderDirectionsMarkers = function(index, response) {
    markers[index] = [];

    var leg = response.routes[0].legs[0];
    var positions = [
        { lat: leg.start_location.lat(), lng: leg.start_location.lng() },
        { lat: leg.end_location.lat(), lng: leg.end_location.lng() }
    ];

    for (var i = 0; i < positions.length; i++) {
        var markerOptions = {
            map: map,
            position: positions[i],
            label: labels[(index + i) % labels.length]
        };

        markers[index][i] = new google.maps.Marker(markerOptions);
    }
};

renderDirectionsPolylines

var renderDirectionsPolylines = function(index, response) {
    polylines[index] = [];

    for (var i = 0; i < response.routes.length; i++) {
        var route = response.routes[i];
        var legs = route.legs;
        var strokeColor = i > 0 ? strokeColorInactive : strokeColorActive;
        var zIndex = i > 0 ? 0 : 1;

        var polylineOptions = {
            strokeColor: strokeColor,
            strokeOpacity: 1,
            strokeWeight: 4,
            zIndex: zIndex
        };

        polylines[index][i] = [];

        for (var j = 0; j < legs.length; j++) {
            var steps = legs[j].steps;

            for (var k = 0; k < steps.length; k++) {
                var nextSegment = steps[k].path;
                var stepPolyline = new google.maps.Polyline(polylineOptions);

                for (var l = 0; l < nextSegment.length; l++) {
                    stepPolyline.getPath().push(nextSegment[l]);
                }

                stepPolyline.setMap(map);

                polylines[index][i][k] = stepPolyline;

                // Add event listeners.
                google.maps.event.addListener(stepPolyline, 'mouseover', function(event) { polylineMouseover(index, i, event, this); });
                google.maps.event.addListener(stepPolyline, 'mousemove', function(event) { polylineMousemove(index, i, event); });
                google.maps.event.addListener(stepPolyline, 'mouseout', function(event) { polylineMouseout(index, i, event); });
                google.maps.event.addListener(stepPolyline, 'click', function(event) { polylineClick(index, i, event); });
            }
        }
    }
};

1 Answer 1

1

This works fine, and I can drag the markers across the map, but how do I link them to any of the routes I render?

If you set the marker on the line and drag it somewhere you have to delete the old line ( x.........y ) and to set up 2 new lines (x ..... m and m.......z).

Is that what you are looking for? Here an example for that: Gmap study: multi auto routes/direction with unlimited waypoints click by click

HTH, Reinhard

1
  • Thanks for pointing me in the right direction. Much appreciated. Apr 26, 2016 at 7:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.