Home/ Questions/Q 6014445
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T02:41:35+00:00

I’ve been doing driving directions in my map app using the directionsRenderer, so it

  • 0

I’ve been doing driving directions in my map app using the directionsRenderer, so it renders both the path (on the map) and the html list of directions. My app works basically like this example: http://code.google.com/apis/maps/documentation/javascript/examples/directions-draggable.html

However, now I’ve been asked to make it a little more like the directions on Google Maps proper, for instance here

My client would like the little popups when you hover over the html items, as well as the little icons showing right turn, bear left, merge, etc.

I’ve managed to render my own html from the DirectionsService response, and hook up events for hovering and associate them with points on the map, but where I could use help is:

  1. Getting the turn by turn icons. I imagine this isn’t easy because I get each step as html text ("Take exit 433 on the left to merge onto I-80 E toward Bay Bridge/Oakland"), and I imagine that could be challenging to parse reasonably to determine which icon to show

  2. Making the little mini-popups over the map. Although I can make the popups themselves, it’s probably challenging or impossible to do it the exact same way because I don’t have a short version of the instructions.

In any case, I thought I’d check if anyone knows a way to do this sort of thing — not necessarily exactly, but just closer to it — or if I’m just out of luck because google hasn’t made any of that sort of functionality available via their api.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are correct that you will have to examine strings to get turn icons. You can parse the DirectionsResult object yourself (it is "JSON-like" according to Google’s documentation) rather than using the DirectionsRenderer if you wish, but I don’t think it will get you anything much. Here’s how it would go:

    • The DirectionsResult.route property will be an array of DirectionsRoute objects. If you didn’t set provideRouteAlternatives to true, then there will only be one DirectionsRoute object in the array.

    • The DirectionsRoute object, in turn, has a property called legs. That property is an array of DirectionsLeg objects. If you have specified no waypoints (i.e., an intermediary destination), just a start and end point, then this array will also only have one object in it.

    • The DirectionsLeg object, in turn, has a property called steps. It will be an array where each element will be a DirectionsStep object.

    • The DirectionsStep object has a property called instructions. That is a string and is what you will have to examine using a regexp or whatever to figure out what turn icon to use. (It’s possible that this may be easier to work with than the HTML you mention that I imagine is coming from the DirectionsRenderer. Or it may be possible that it isn’t any easier whatsoever. I’m not sure. I’ve never actually done it.)

    • 0