googleDirections plugin Tutorial 01: Getting Started

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

Using the googleDirections plugin is as easy as 1-2-3:

  1. Specify the start point. This can be real address or in latitude/longitude.
  2. Specify the end point. This can be real address or in latitude/longitude.
  3. Specify the width, height and dir_width. This sets the size of your map (width and height), and also the width of the directions (dir_width).

Different ways of specifying Start and End points

  1. You can specify the start and end point using real address
    • Enclose from and to in double quotes (")
    • Enter the full address in one line. If you're not in US, specify your country too.

    {googleDir width=400 height=360 dir_width=275
    from="1600 Amphitheatre Parkway, Mountain View CA 94043"
    to="701 First Avenue, Sunnyvale, CA 94089"}

  2. You can specify the start and end point using latitude / longitude
    • This method allows you to pinpoint very accurately to the exact start and end points that you want, especially when Google cannot decode your address correctly.
    • If you need to know the latitude and longitude of the start or end point, you can find out here: Free Geocoder v2.0 by kksou.
    • Enclose the latitude/longitude in double quotes (")
    {googleDir width=400 height=360 dir_width=275
    from="37.4211444, -122.0853032"
    to="37.4148428, -122.0249135"}

Width and Height of the Map and Directions

  • Note that for Google Map with directions, you cannot specify the width and height in percentages. All dimensions are in px.
  • Please make sure you set all the 3 dimensions: width, height and dir_width, otherwise no map or direction will appear on your page.

Zoom Level

You do not need to specify any zoom level.

The default zoom level of the map is automatically set by Google such that the start point and end point are being displayed optimally on the map.

Tutorials for the googleMaps plugin

Tutorials for the googleDirections plugin

Tutorials for the googleDirections_to_here plugin

Add comment

Security code