jQuery GPS Documentation

Here you will find a full documentation for all the settings and Default ID's for the plugin.
The index is on the right hand side of the page.

If you like the plugin then Help Spread the Word!
reTweet

Default Element ID's

You can also view information on the Default Plugin Settings

As you can see in this code snippet the only element ID we pass to the plugin is the name of the element to put the map in "#map". So how does the plugin know where to load the actual text directions? Or what text input is the To: field and which is From:? What about telling the submit button to activate the plugin?

The answer is easy. The plugin has default element ID's built in! Here is a list.

Default Element ID's

  • ID for text directions: "directions"
  • ID for From text input: "start"
  • ID for To text input: "end"
  • ID for submit element: "getdirections"

- Back to top -

Show the Text Directions

If you want to show the actual Text Turn by Turn directions all you have to do is provide an empty div tag using the Default Element ID's You can of course Change The Default ID's

That will make the turn by turn directions appear. If you don't want to show text directions just don't add this div tag.

- Back to top -

To: and From: Text Inputs

The To: and From: elements have to be text inputs. This is where your users enter the addresses to optain their directions. This is how they will look using the Default Element ID's You can of course Change The Default ID's

If you want to have a default ending address, say you own a business and you went the end address to be the address of your business, there are two ways to do it.
One way is to have the ending address, say 2333 El Jobean Road Port Charlotte, FL 33948, already visible in the To: field. You can accomplish this using the value attribute of the input text field.

Now the From: text input field will by default have your address in it, with no input required from the user!
However this method allows the user to change the ending address. If you want to have an ending address that the user can NOT change use the following method.

This method uses a field that the user cannot see or alter to pass an ending address to the plugin.
Controlling everything with the elements directly in the HTML allows for easier setup of the plugin!

- Back to top -

Submitting the Info

Submitting the information to the plugin is easy using the Default Element ID's You can of course Change The Default ID's
You can submit the information with ANY type of HTML element. A link, a form button, a picture ect..
Here are a few examples using the default ID that on click submits the information.

- Back to top -

Default Plugin Settings

Along with the Default Element ID's the plugin also has a few default settings that control some google map settings such as the zoom level, and where the map is centered when it first loads.

Here is a complete list of the Default Settings and what they do.

Default Plugin Settings

  • zoomLevel: Default value "10"
    Controls how far the map is zoomed in.
  • center: Default value "2000 Florida Ave NW Washington, DC 20009-1231"
    Controls the place that is centered on the map when it first loads.
  • tooltip: Default value "false"
    If set to something other than the default opens a tooltip when the map first loads. The tooltip is for the address you set for "center".
  • image: Default value "false"
    Other than the default it only accepts relative URL's for an image to be placed on the address that you set for "center".
  • imagewidth: Default value "50"
    Sets the width of the image placed on the map for the "image" setting.
  • imageheight: Default value "50"
    Sets the height of the image placed on the map for the "image" setting.

- Back to top -

Change the Default ID's and Settings

Changing the Default Element ID's and Settingsis very easy. They are both changed the same way. You simply pass the information to the plugin through the googleMap() function used to load the map.
For example if I wanted to change the zoomLevel to 5 I would pass the zoomLevel variable to the plugin.

If you want to change more than one Default ID or Setting at a time you just have to seperate them by a comma.
Like if I wanted to set the zoomLevel to 5 and add a tooltip that said "The Location" I would pass both variables.

There are some inconsistencies when it comes to changing the Default Element ID's.
First of all, the plugin will only accept ID's you can NOT set an element by class. ID's only.
Second, when you actually declare the ID's to change them the variables Start, End, and Submit must have a # in front of the element ID your passing, but when changing the directions variable you can NOT have a #. It's just an inconsistency I haven't figured out how to get around quite yet.

$("#map").googleMap({
start: '#start', //Must have the #
end: '#end', //Must have the #
submit: '#getdirections', //Must have the #
directions: 'directions' //Can NOT have the #
}).load();

//start refers to this tag
<input type="text" id="start" />

//end refers to this tag
<input type="text" id="end" />

//submit refers to this tag
<input type="submit" id="getdirections" />

//directions refers to this tag
<div id="directions"></div>

- Back to top -