Can you change the color and pins of the googlemaps Api route?

Question

Is it possible to change the color of the travel line? and potentially remove the markers so i can add my own?

I know in the google docs they have an array of style changes, but all of these affect the map directly and i cant find any that can be applied to the route/route-markers https://developers.google.com/maps/documentation/javascript/examples/style-array#maps_style_array-javascript

Below is my code if it is of any help, notice i removed my API key:

html Code:

<html>
<head>
    <style>
        #map{height:100%;
        width:100%;
        }
    </style>
    <title>Directions Service</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="script5.js"></script>
</head>


<body>
    <div id='map'></div>
    <script src='script6.js'></script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=I-REMOVED-MY-KEY&callback=initMap">
    </script>

</body>
</html>

javascript:

function initMap() {
    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 7,
      center: {lat: 52.896874,lng:-1.431861},
      
    });
    
    directionsRenderer.setMap(map);
  
calculateAndDisplayRoute(directionsService, directionsRenderer, "52.535614, -7.285257", "52.571321, -1.585436")

}

  function calculateAndDisplayRoute(directionsService, directionsRenderer, p1, p2) {
    directionsService.route(
      {
        origin: {
          query: p1,
        },
        destination: {
          query: p2,
        },
        travelMode: google.maps.TravelMode.DRIVING
      },
      (response, status) => {
        if (status === "OK") {
          directionsRenderer.setDirections(response);
        } else {
          window.alert("Directions request failed due to " + status);
        }
      }
    );
}

score 3 · Accepted Answer · answered Jul 29 '20 at 12:08

To change the route color, use polylineOptions

To suppress the markers: suppressMarkers: true

const directionsRenderer = new google.maps.DirectionsRenderer({
    suppressMarkers: true, 
    polylineOptions:{strokeColor:"#00FF00", strokeWeight:4}
});

proof of concept fiddle

code snippet:

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    polylineOptions: {
      strokeColor: "#00FF00",
      strokeWeight: 4
    }
  });
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: {
      lat: 52.896874,
      lng: -1.431861
    },

  });

  directionsRenderer.setMap(map);

  calculateAndDisplayRoute(directionsService, directionsRenderer, "52.535614, -7.285257", "52.571321, -1.585436")

}

function calculateAndDisplayRoute(directionsService, directionsRenderer, p1, p2) {
  directionsService.route({
      origin: {
        query: p1,
      },
      destination: {
        query: p2,
      },
      travelMode: google.maps.TravelMode.DRIVING
    },
    (response, status) => {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
      } else {
        window.alert("Directions request failed due to " + status);
      }
    }
  );
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

<!DOCTYPE html>
<html>

<head>
  <title>Directions Service</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

Can you change the color and pins of the googlemaps Api route?

1 Answers1