0

I am using google-map-react to render a google map, for a path, using GPS positions. At the moment, I am rendering a path in a single colour.

enter image description here

I would like to change the colour of the line, based on speed. Is there a way to update the colour of the path samples, based on some criteria?

At the moment, I only see how to set the colour for the whole path:

var flightPath = new maps.Polyline(
  {
      path: path,
      geodesic: true,
      strokeColor: "#FF0033",
      strokeOpacity: 2,
      strokeWeight: 4
  });

  flightPath.setMap(map);

With path being specified as:

const path = places ? places.map((event) => {
    return {
        lat: event.position.lat,
        lng: event.position.lng
    }
  }) : [];

Is it possible to set each event in the path's colour?

Craig
  • 18,074
  • 38
  • 147
  • 248
  • Break the path into multiple segments. – MrUpsidown Sep 05 '21 at 12:59
  • So would I create multiple Polylines with different colours? Not sure how I add multiple. Can I just call setMap multiple times? That seems the best way. Not sure if performance. Hopefully it’s ok. – Craig Sep 05 '21 at 13:23
  • Try it. Unless you need several thousands of them I can't think of why it wouldn't work. And yes, 1 Polyline for each color segment. – MrUpsidown Sep 05 '21 at 16:35
  • FYI, there are 2 open feature requests that you can star/comment if you want to add weight to the request: [here](https://issuetracker.google.com/issues/35825727) and [here](https://issuetracker.google.com/issues/137528815). Don't expect anything to happen soon though... – MrUpsidown Sep 06 '21 at 06:44

0 Answers0