https://github.com/atomantic/jquery.gmapdirections

Simple jquery driven wrapper and form handler for the Google Maps Driving Directions API
https://github.com/atomantic/jquery.gmapdirections

Last synced: 11 months ago
JSON representation

Simple jquery driven wrapper and form handler for the Google Maps Driving Directions API

• Host: GitHub
• URL: https://github.com/atomantic/jquery.gmapdirections
• Owner: atomantic
• Created: 2010-11-30T21:42:56.000Z (over 15 years ago)
• Default Branch: master
• Last Pushed: 2013-06-17T18:56:50.000Z (about 13 years ago)
• Last Synced: 2024-10-16T11:28:01.626Z (over 1 year ago)
• Language: JavaScript
• Homepage: http://atomantic.github.com/jquery.gmapDirections
• Size: 167 KB
• Stars: 5
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
#License#

@author Adam Eivy (antic | atomantic)  

@link [http://intellectualpirates.net](http://intellectualpirates.net)  

@license Copyright (c) 2010 Adam Eivy (antic | atomantic) Dual licensed under the MIT and GPL licenses:  

 * [http://www.opensource.org/licenses/mit-license.php](http://www.opensource.org/licenses/mit-license.php)  

 * [http://www.gnu.org/licenses/gpl.html](http://www.gnu.org/licenses/gpl.html)

#What it does:#

This is a simple wrapper for the Google Maps API to load a map and handle a start/end address submission for retrieving driving directions.

#Usage:#

1. Get a Google Maps API Key: [http://code.google.com/apis/maps/signup.html](http://code.google.com/apis/maps/signup.html)

2. Include the needed HTML:

        Start:

        End:

        

        


        


3. Include the needed js files:

        

            

    

        

        !window.jQuery && document.write(unescape('%3Cscript src="jquery.min.js"%3E%3C/script%3E'))  

        

        

        

        

        

        

        

            $(function(){

                $('#Map').gmapDirections();

            })

        

4. You can override the element IDs for all the needed parts in the config object passed to the plugin. Here it is called with all the defaults:

        

            $(function(){

                $('#Map').gmapDirections({

                    center: 'Seattle',             // a valid address or location search to start with

                    directions: 'Directions',      // element ID to hold directions printout

                    end: 'EndAddress',             // element ID for end address textfield

                    iconHeight: 50,                // height of custom icon image

                    iconImg: false,                // custom icon image?

                    iconWidth: 50,                 // width of custom icon image

                    onFail: function(){            // failed loading center element

                        // this should be something better than an alert (something useful), but for demo purposes:

                        alert('could not find address');

                    },    

                    onFinish: function(){          // after direction load

                    },

                    start: 'StartAddress',         // element ID for start address textfield

                    submit: 'GetDirections',       // element ID for the action button

                    tooltip: false,                // custom tooltip?

                    zoom: 15                       // zoom level - refer to google maps API specs

                });

            })

        

#Demos:#

The repository holds a demo in index.html, which is published on the github project page:

[Demo](http://atomantic.github.com/jquery.gmapDirections)