Google map geolocator polyline edit color

Question

site app which takes the user from it's current position and gives destination details to a specific point. And I have two problems. First I cannot figure out how I change the polyline color between the two points. The default is blue but I cannot seem to override it.

Also how do I get rid of the markers once the destination has been generated?

Where do I put this snippet in the code below for it to work?

var polylineOptions = {
strokeColor:"#FF0000",
strokeOpacity: 1, 
strokeWeight: 2, 
zIndex: 5
}

And heres the rest of the google map js.

var directionsService = new google.maps.DirectionsService(),
            directionsDisplay = new google.maps.DirectionsRenderer(),
            createMap = function (start) {
                var travel = {
                    origin: (start.coords) ? new google.maps.LatLng(start.lat, start.lng) : start.address,
                    destination: customPosition,

                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                    // Exchanging DRIVING to WALKING above can prove quite amusing :-)
                },


                map = new google.maps.Map(document.getElementById("map"), mapOptions);
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById("map-directions"));
                directionsService.route(travel, function (result, status) {
                    if (status === google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(result);
                    }

                    var marker = new google.maps.Marker({
                        position: customPosition,
                        map: map,
                        clickable: false,
                        icon: 'images/minilogo.png',
                        animation: google.maps.Animation.DROP,
                        zoomControlOptions: {
                            style: google.maps.ZoomControlStyle.SMALL
                        }
                    });
                });
            };

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                // Success! 
                enableHighAccuracy: true,
                $("#map-directions").show();
                $("#geo").each(function () {
                    $(this).animate({
                        opacity: 0.5
                    }, 1000);
                    $(this).unbind();
                    $(this).html("<a>Position funnen!</a>");
                });

                console.log("that worked like a charm");
                createMap({
                    polylineOptions:{strokeColor:'red'},
                    suppressMarkers:true,
                    coords: true,
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                });



            }, function errorCallback(error) {
                // Gelocation fallback: Defaults to Stockholm, Sweden
                console.log("Something went wrong, fallback initalized");
                $("#geo").html("<a>Kunde inte hitta din position - pröva igen</a>");
                $("#map-directions").hide();
                $("#map-directions").unbind();
                createMap({
                    coords: true,
                    address: customPosition,
                    zoom: 15
                });
            }, {
                maximumAge: Infinity,
                timeout: 10000
            });
        } else {
            // No geolocation fallback: Defaults to Lisbon, Portugal
            $('#geo').html('<p>Old browser, cannot run function</p>');
            $("#map-directions").hide();
            createMap({
                coords: true,
                address: customPosition
            });
        } //else

Thanks a lot!

Answer 1

You have to set them for DirectionsRenderer object:

directionsDisplay = new google.maps.DirectionsRenderer(),

Like

directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions: polylineOptions
}),

Or call

directionsDisplay.setOptions({
    polylineOptions: polylineOptions
});