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.
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"
Show the Text Directions
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.
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!
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.
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.
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.
My name is Aron Brown. I am a freelance graphic designer out of Florida. You can view my temporary portfolio at http://www.birdwingfx.com.
- Default Text Direcitons ID
- Default From text input ID
- Default To text input ID
- Default Submit element ID
- Show the Text Directions
- To: and From: Text Inputs
- Submitting the Info
- Change the Default ID's
- Default zoomLevel
- Default center
- Default tooltip
- Default image
- Default imagewidth
- Default imageheight
- Change Default Settings