Change the route style on Google Maps in React

When using Google Maps in React, it is common to need to customize the appearance of the route lines between two points. Fortunately, the Google Maps API provides an easy way to achieve this using the DirectionsRenderer’s polylineOptions property. By modifying this property, you can change the style of the route line to fit your specific use case.

To change the style of the route line, first, you need to define the polylineOptions object with the desired properties, such as stroke color, weight, and opacity. Once you have defined this object, you can pass it as a prop to the DirectionsRenderer component in your React code. The API will then use the polylineOptions object to render the route line with the custom styles you have specified. This technique allows you to create visually appealing and informative route lines that match your project’s design and style guidelines.

Demo Application

Output - Change the route style on Google Maps in React - Clue Mediator
Output – Change the route style on Google Maps in React – Clue Mediator

Change the route style on google maps in React

  1. Project structure
  2. Package dependencies
  3. Implementation
  4. Output

1. Project structure

  • route-style-google-maps-react
    • node_modules
    • public
      • index.html
    • src
      • App.js
      • GMap.js
      • index.css
      • index.js
    • package-lock.json
    • package.json

2. Package dependencies

Run the following command to install @googlemaps/js-api-loader npm package.

You will find the version of the following packages in React application.


3. Implementation

We need to use the polylineOptions property of the DirectionsRenderer to modify the style of the route.

Refer to the following files for the implementation.


4. Output

Run your application and check the output in the browser.
Live Demo

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository StackBlitz Project
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *