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
  2. 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}
    

    Coming from:

  3. Directions Below the Map
  4. {googleDir_tohere width=320 height=360 dir_width=275 vertical=1
    home_addr="900 N Point St, San Francisco, CA 94109"}
    

    Coming from:

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

    Coming from:

Tutorials for the googleMaps plugin

Tutorials for the googleDirections plugin

Tutorials for the googleDirections_to_here plugin

Comments   

+1 # apostolos 2012-12-29 12:54
i use Directions Below the Map - Full Width but I can't put on the same line "coming from" - "address input"- "get directions" pls help me!!!

thanks
Reply | Reply with quote | Quote
0 # Bryce 2013-01-18 16:41
This doesn't seem to work on an iPhone. See here:

https://lge-ctsmotorsports.com/contact/k2-extra-field-groups/contact

Any ideas?
Reply | Reply with quote | Quote
0 # Bryce 2013-01-18 16:42
Quoting Bryce:
This doesn't seem to work on an iPhone. See here:

https://lge-ctsmotorsports.com/contact/k2-extra-field-groups/contact

Any ideas?

Disregard, it didn't work on the first 5 refreshes but now it does. Great extension!
Reply | Reply with quote | Quote
0 # Jimwpds 2018-02-02 19:58
Great plug ins thanks. Couple of minor points.
1. How do I get the map and directions box to align horizontally side by side?
2. Also is it possible to word wrap the directions to keep within the display width? the directions wrapped Ok on an early version.
Thanks.
Reply | Reply with quote | Quote
0 # kksou 2018-02-03 10:03
Hi Jim,

(1) In the previous version, I used a standard 2-column HTML table. The map goes on the left and the directions is displayed on the right.

Due to the popularity of mobile phones, most websites are now using responsive design. Google SEO also penalize those websites that do not support responsive design. As such, in the latest version, the plugin now supports responsive design (through the use of CSS). You can try it on an iPad. In the landscape mode, the map and directions are displayed side by side. But in the portrait mode, the map and directions are displayed top and bottom.

(2) The directions are entirely returned by Google. I did not do any formatting before displaying the directions.

For (1), if you require the map and directions to be displayed side by side, you can use back the previous version, or you can change the code yourself back to using HTML table.

Let me know if you need any of the previous version of the plugin, ok?

Warm Regards,
/kksou
Reply | Reply with quote | Quote
0 # Jimwpds 2018-02-07 16:26
Hi, I had a previous version but trying that did not make any improvements. So I uninstalled all and reinstalled your latest versions and all is now working perfectly. Well, occasionally there are two copies of the directions shown, one above the other.
Best regards
Jim
Reply | Reply with quote | Quote
0 # kksou 2018-03-06 06:57
Hi Jim,

Code:> Well, occasionally there are two copies of the directions shown, one above the other
Do you mean when you go to the backend Extensions: Manage and you see 2 different entries there?

Or do you mean the frontend where the maps and directions are being displayed?

Warm Regards,
/kksou
Reply | Reply with quote | Quote

Add comment


Security code
Refresh