Make condition to set the colour of polyline on google maps API

Question

I've been make polyline on google Maps. But I wanna set the polyline into 3 colours. I have conditions to set it, but don't know how to place it. this is the code

    var polylinePlanCoordinates  = [];
     var polyline_data = <?php echo json_encode($data); ?>;
     for (var i=0;i< polyline_data.length;i++ ){
      polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i]['latitude'], polyline_data[i]['longitude']));
    }

    var path= new google.maps.Polyline({
      path: polylinePlanCoordinates,
     geodesic: true,
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 5
     });

     path.setMap(map);
}



google.maps.event.addDomListener(window, 'load', initialize);

and the condition is

if(polyline_data[i]['kon_jem']>0 && polyline_data[i]['kon_jem']<3){
strokeColor: '#ffffff';
}
else if (polyline_data[i]['kon_jem']>3 && polyline_data[i]['kon_jem']<9){
strokeColor: '#000000';
}
else if (polyline_data[i]['kon_jem']>9){
strokeColor: '#fff000';
}

Possible duplicate of [Changing color for the Multiple Polyline stroke on google map v3 in javascript](http://stackoverflow.com/questions/33689866/changing-color-for-the-multiple-polyline-stroke-on-google-map-v3-in-javascript) — geocodezip, Feb 11 '17 at 16:37
Possible duplicate of [Color variations Polyline property in Google maps API](http://stackoverflow.com/questions/34114183/color-variations-polyline-property-in-google-maps-api) — geocodezip, Feb 11 '17 at 16:38
possible duplicate of [Use Google maps API to draw a polyline that changes color](http://stackoverflow.com/questions/38709732/use-google-maps-api-to-draw-a-polyline-that-changes-color) — geocodezip, Feb 11 '17 at 16:39
related question: [how to draw a google maps waypoint with multi-colored polylines](http://stackoverflow.com/questions/35989237/how-to-draw-a-google-maps-waypoint-with-multi-colored-polylines) — geocodezip, Feb 11 '17 at 16:43
Possible duplicate of [Google Map API v3 — set bounds and center](http://stackoverflow.com/questions/1556921/google-map-api-v3-set-bounds-and-center) — lostAtSeaJoshua, Feb 12 '17 at 01:31

score 2 · Accepted Answer · answered Feb 13 '17 at 14:30

You need to process through your array creating individual polylines for each set of two points in your data, assign each segment the color associated with one of its endpoints.

// only go to length - 1 or you will overrun the array
for (var i = 0; i < polyline_data.length - 1; i++) {
  // for each segment of two points
  var polylinePlanCoordinates = [];
  polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i]['latitude'], polyline_data[i]['longitude']));
  polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i + 1]['latitude'], polyline_data[i + 1]['longitude']));

  // create a polyline
  var path = new google.maps.Polyline({
    path: polylinePlanCoordinates,
    geodesic: true,
    strokeOpacity: 1.0,
    strokeWeight: 5
  });
  // set the color of the segment based on the lowest index point
  if (polyline_data[i]['kon_jem'] > 0 && polyline_data[i]['kon_jem'] < 3) {
    path.setOptions({
      strokeColor: '#ffffff'
    });
  } else if (polyline_data[i]['kon_jem'] > 3 && polyline_data[i]['kon_jem'] < 9) {
    path.setOptions({
      strokeColor: '#000000'
    });
  } else if (polyline_data[i]['kon_jem'] > 9) {
    path.setOptions({
      strokeColor: '#fff000'
    });
  }
  path.setMap(map);
}

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polyline_data.length - 1; i++) {
    // for each segment of two points
    var polylinePlanCoordinates = [];
    polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i]['latitude'], polyline_data[i]['longitude']));
    polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i + 1]['latitude'], polyline_data[i + 1]['longitude']));

    // create a polyline
    var path = new google.maps.Polyline({
      path: polylinePlanCoordinates,
      geodesic: true,
      strokeOpacity: 1.0,
      strokeWeight: 5
    });
    bounds.extend(path.getPath().getAt(0));
    bounds.extend(path.getPath().getAt(1));

    if (polyline_data[i]['kon_jem'] > 0 && polyline_data[i]['kon_jem'] < 3) {
      path.setOptions({
        strokeColor: '#ffffff'
      });
    } else if (polyline_data[i]['kon_jem'] > 3 && polyline_data[i]['kon_jem'] < 9) {
      path.setOptions({
        strokeColor: '#000000'
      });
    } else if (polyline_data[i]['kon_jem'] > 9) {
      path.setOptions({
        strokeColor: '#fff000'
      });
    }
    path.setMap(map);

  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var polyline_data = [
  {latitude: 0, longitude: 0, kon_jem: 0},
  {latitude: 0.1, longitude: 0.2, kon_jem: 1},
  {latitude: 0.2, longitude: 0.1, kon_jem: 2},
  {latitude: 0.3, longitude: 0.2, kon_jem: 3},
  {latitude: 0.4, longitude: 0.1, kon_jem: 4},
  {latitude: 0.5, longitude: 0.2, kon_jem: 5},
  {latitude: 0.6, longitude: 0.1, kon_jem: 6},
  {latitude: 0.7, longitude: 0.2, kon_jem: 7},
  {latitude: 0.8, longitude: 0.1, kon_jem: 8},
  {latitude: 0.9, longitude: 0.3, kon_jem: 9},
  {latitude: 0.9, longitude: 0.1, kon_jem: 10},
  {latitude: 1.0, longitude: 0.1, kon_jem: 11},
  {latitude: 1.1, longitude: 0.2, kon_jem: 12},
  {latitude: 1.2, longitude: 0.1, kon_jem: 13},
  ];

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

score 0 · Answer 2 · answered Feb 11 '17 at 16:02

0

You could try setOption

 if($data['kon_jem']>0 && $data['kon_jem']<3){
      path.polyline.setOptions({strokeColor:'#ffffff'});
 }
 .....

answered Feb 11 '17 at 16:02

ScaisEdge

131,976
10
91
107

thank's, but can you tell me where I must place it? I've try that code but my map isn't loaded – deta oktariani Feb 13 '17 at 09:02
I have looked/copied you code .for write the answer .. . should be you that know where place the code .. anyway do the fact is a setOption on an existing object you should applied this code after the polyline is created – ScaisEdge Feb 13 '17 at 09:09
@scaisEdge: .sir tell me 1 thing i have array of start and end point and draw polyline but i have another lat and lng of driver that is different we need to change polyline color after driver reached prevoius path and next path.i have chnaged color via driver lat and lng.tell me sir how to mange this type of scenario? – Kapil Soni Sep 08 '19 at 07:55
@Kapilsoni .. is not easy .. depend how you know when the rider change the next path .. you need a function for eval this .. .. (but is not easy ) .. – ScaisEdge Sep 08 '19 at 10:05
@scaisEdge: ok sir I know that its not easy task but I need to implement this functionality plz tell me how to do this ? – Kapil Soni Sep 08 '19 at 11:42

Make condition to set the colour of polyline on google maps API

2 Answers2

Linked