CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markersgoogle-maps-api-2
user1907849
user1907849

Reputation: 980

Color variations Polyline property in Google maps API

I have requirement such that I need to draw a line between Sydney, Melbourne and Adelaide and the line between Sydney and Adelaide should be dark in color and the line between Melbourne and Adelaide should be lighter.

Is it possible in current API to provide this functionality in a single object:

new google.maps.Polyline({
});

To achieve the functionality?

Upvotes: 0

Views: 1032

Answers (2)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59328

One option would be to create google.maps.Polyline object per every line, below is provided the modified example from Simple Polylines page:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: -32.9340105, lng: 128.2698231},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var flightPlanCoordinates = [
    {lat: -33.877024, lng: 151.227963},
    {lat: -37.816567, lng: 144.961489},
    {lat: -34.930054, lng: 138.593065}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates.slice(0,2),
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });

   var flightPath2 = new google.maps.Polyline({
    path: flightPlanCoordinates.slice(1,3),
    geodesic: true,
    strokeColor: '#FFCC00',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
}
html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
#map {
        height: 100%;
}
 <div id="map"></div>
 <script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Upvotes: 2

geocodezip
geocodezip

Reputation: 161334

A single polyline has a single set of properties. You can do it with a single google.maps.Polyline for each unique set of properties, so in your example, two polylines.

Upvotes: 1

Related Questions