Search code examples
javascriptuser-interfacegoogle-mapsdirections

Displaying Google's 'directions' box on a map

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'.

Solution

  • 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:

    Displaying Google’s ‘directions’ box on a map