googleDirections - To Here - plugin Tutorial 06: Display Directions below the Map

This is part 6 of a series of tutorial for the googleDirections - To Here - 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

By default, the direction is displayed on the right.

{googleDir_tohere width=320 height=360 dir_width=275
home_addr="900 N Point St, San Francisco, CA 94109}

Powered by JoomlaGadgets

Coming from: DrivingTransitBicyclingWalking Get Directions

2. Directions Below the Map

{googleDir_tohere width=320 height=360 dir_width=275 vertical=1
home_addr="900 N Point St, San Francisco, CA 94109"}

Powered by JoomlaGadgets

Coming from: DrivingTransitBicyclingWalking Get Directions

3. Directions Below the Map - Full Width

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_tohere width=100% height=360 dir_width=100% vertical=1
home_addr="900 N Point St, San Francisco, CA 94109}

Powered by JoomlaGadgets

Coming from: DrivingTransitBicyclingWalking Get Directions

Tutorials for the googleMaps plugin

• googleMaps plugin Tutorial 01: Getting Started
• googleMaps plugin Tutorial 02: Zoom Level
• googleMaps plugin Tutorial 03: Language
• googleMaps plugin Tutorial 04: Map Type
• googleMaps plugin Tutorial 05: KML Files

Tutorials for the googleDirections plugin

• googleDirections plugin Tutorial 01: Getting Started
• googleDirections plugin Tutorial 02: Specifying Stopover Points
• googleDirections plugin Tutorial 03: Travel Modes
• googleDirections plugin Tutorial 04: Unit Systems - miles or km
• googleDirections plugin Tutorial 05: Display Directions on the Left
• googleDirections plugin Tutorial 06: Display Directions below the Map
• googleDirections plugin Tutorial 07: Display Directions in your Local Language
• googleDirections plugin Tutorial 08: Specifying Stopover Points

Tutorials for the googleDirections_to_here plugin

• googleDirections - To Here - plugin Tutorial 01: Getting Started
• googleDirections - To Here - plugin Tutorial 02: Adding Label to Home Address
• googleDirections - To Here - plugin Tutorial 03: Travel Modes
• googleDirections - To Here - plugin Tutorial 04: Unit Systems - miles or km
• googleDirections - To Here - plugin Tutorial 05: Display Directions on the Left
• googleDirections - To Here - plugin Tutorial 06: Display Directions below the Map
• googleDirections - To Here - plugin Tutorial 07: Display Directions in your Local Language
• googleDirections - To Here - plugin Tutorial 08: Specifying Stopover Points