Add a route planner based on Google Maps webservices on your webpage to quickly get the best route including multiple waypoints, alternative routes and travelmodes. See the demo project for a correct implementation.

See all features in action here: https://googlemapsrouteplanner-sandbox.mxapps.io/

This widget uses React / TypeScript and the new pluggable widgets API. Additional features:

• Get distance and direction for a given route
• Based on either arrival time or departure time
• Select to get alternative routes, which can be chosen from a modal popup
• Make markers draggable, updating route directly
• SearchBox option to being able to zoom so specific region

• API Key:

  • Production: If you want to use the widget in Production a valid Google Maps API key needs to be entered in every widget instance.
  • Development: Developing can be done without an API key, but will show messages on top of the Google Map, making it unusable in Production.

• Add the Google Maps Route Planner widget to your page, see screenshots for Settings in Studio Pro or even better download the demo project available here:

• At least configure all attributes in the Data source tab

https://googlemapsrouteplanner-sandbox.mxapps.io/

None known as of now.

Thanks to the team maintaining the React Google Maps API library, see https://www.npmjs.com/package/@vis.gl/react-google-maps