poly line colour swap on mouse over using google maps JavaScript API-CodePudding

poly line on google maps works as expected. but would like to swap poly line colour between multiple colours on mouse over

let us say a poly line [link] between two locations, if there is some problem with poly line [link] it sets to red colour, if there is latency or congestion with poly line [link] it sets to orange colour, but by default it is in green colour. given in our world map it has so many poly line [links between various locations], would like to give operator to highlight the poly line [link] with pink colour that he looking into

is there a way to extract the current stroke colour code [red, orange or green] of a poly line when mouse over and change it with pink colour, so when mouse out, restore it to active colour [red, orange or green]?

sample code:

HTML:

<html>
    <head>
        <title>Simple Polylines</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script src="./index.js"></script>
    </head>
    <body>
        <div id="map"></div>
        <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap&v=weekly" async></script>
    </body>
</html>

CSS:

#map { height: 100%; }

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

JAVAScript:

function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {zoom: 3, center: { lat: 0, lng: -180 }, mapTypeId: "terrain",});
    const flightPlanCoordinates = [ { lat: 37.772, lng: -122.214 }, { lat: 21.291, lng: -157.821 }, { lat: -18.142, lng: 178.431 }, { lat: -27.467, lng: 153.027 },];
    const flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2,});
    google.maps.event.addListener(flightPath, "mouseover", function(event) { this.setOptions({strokeColor: "#FF1493", }); });
    google.maps.event.addListener(flightPath, "mouseout", function(event) { this.setOptions({strokeColor: "#008000", }); });
    flightPath.setMap(map);
}

CodePudding user response：

You can use the polyline's strokeColor property - and extract it in the listener and use it later: lastStrokeColor = this.strokeColor;.

Sample code based on your example above: https://jsfiddle.net/jdtvqLrx/2/