Displaying Google's 'directions' box on a map

Question

I'm implementing a Google Map on a website.

One requirement is to display a directions box, which contains the same fields as the one Google Maps uses, and which pops up when the user clicks a button.

I'm aware that the Google Maps API allows you to draw a line between two different locations.

Is it possible to display the directions box itself using the API, rather than coding the box myself?

Please note: I'm referring to the initial directions form - i.e. the form into which you enter the 'A' and 'B' destinations and click 'Get Directions'.

Answer 1

Yes, the DirectionsRenderer can render the "directions box" automatically. Simply create a <div id="dir_box"> in your HTML and then pass it to your DirectionsRenderer object via the setPanel() method:

directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dir_box'));

Check out this example from the Google Maps API tutorials for a basic example: