googleDirections plugin Tutorial 06: Display Directions below the Map

This is part 6 of a series of tutorial for the googleDirections plugin.

  1. By default, the Google Map is displayed on the left and the routing directions on the right.
  2. If you prefer to display the directions below the map, you can use the keyword vertical=1

Directions Below the Map

  1. Directions on Right
  2. By default, the direction is displayed on the right.

    {googleDir width=360 height=360 dir_width=275 
    from="333 Post St, San Francisco, CA 94108" 
    to="900 N Point St, San Francisco, CA 94109"}
    

    MapDirections

  3. Directions Below the Map
  4. {googleDir width=360 height=360 dir_width=275 vertical=1 
    from="333 Post St, San Francisco, CA 94108" 
    to="900 N Point St, San Francisco, CA 94109"}
    

  5. Directions Below the Map - Full Width
  6. You can use width=100% and dir_width=100% to automatically expand the width of map and directions to fill the full width of the page.

    {googleDir width=100% height=360 dir_width=100% vertical=1
    from="333 Post St, San Francisco, CA 94108" 
    to="900 N Point St, San Francisco, CA 94109"}
    

Add comment


Security code
Refresh