Skip to content

examples(directions): upgrade Directions example to modern Routes API.#991

Open
caio1985 wants to merge 1 commit into
visgl:mainfrom
caio1985:issue-720-routes-api-upgrade
Open

examples(directions): upgrade Directions example to modern Routes API.#991
caio1985 wants to merge 1 commit into
visgl:mainfrom
caio1985:issue-720-routes-api-upgrade

Conversation

@caio1985
Copy link
Copy Markdown

Description

This PR resolves issue #720 by upgrading the official directions example component to utilize the modern, non-deprecated client-side Routes API (google.maps.routes.Route) instead of the deprecated legacy DirectionsService and DirectionsRenderer.

Key Improvements

  1. Bypasses CORS Limits Natively: Sourced client-side routing via the JavaScript SDK library engine (Route.computeRoutes), completely avoiding browser CORS restrictions that block direct REST API calls.
  2. Vibrant Modern Styling: Custom-styled route polylines using the modern Route.createPolylines() with clean React-friendly rendering options.
  3. Eliminates Deprecation Warnings: Cleaned up console health by eliminating legacy service runtime warnings.
  4. Refactored Control Panel: Updated description texts, headers, and links to reflect the recommended Routes API upgrade while retaining clear migration instructions for legacy service users.

Verification & Testing

  • Run typecheck compiler: npm run test:tsc:examples (compiles with 0 errors and 0 warnings).
  • Serves locally: npm run start-local inside examples/directions works perfectly and draws the route beautifully.
image

@caio1985 caio1985 force-pushed the issue-720-routes-api-upgrade branch 2 times, most recently from 0a95128 to f675b12 Compare May 22, 2026 18:48
@caio1985 caio1985 force-pushed the issue-720-routes-api-upgrade branch from f675b12 to f15407a Compare May 22, 2026 18:51
@mrMetalWood
Copy link
Copy Markdown
Collaborator

Hi @caio1985 👋

Thanks for the PR! Overdue that we migrate the legacy directions example.

A few things to finalize this PR:

  • The official Google Maps typescript types recently got an update. Lets try to use those types as much as possible. They should also include typings for the Routes API. That way we dont have to create our own and can avoid any "anys" as much as possible
  • Would be nice to also have the origin and destination marker still visible like previously. You can get those with <polyline>.createWaypointAdvancedMarkers() method.
  • The routes-panel is not displayed anywhere as far as i can see 👀 Either show it somewhere or just return null from there. I dont think we necessarily need the distance/time values displayed anywhere.

Would you be able to go for another pass on this? If not, I could also take it over from here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants