jQuery Google Maps plugin

**birdwing** · October 31st, 2009, 02:47 AM

For one of my recent clients I had to add a google map to the website that allowed people to put in their address and get directions to the festival location.

Looking around I saw a bunch of jQuery plugins that could get the job done. But they were bulky and loaded with features I didn't need.

My solution! Create my own jQuery plugin that allows for simple functionality.

Thus jQuery GPS was born

You can create a simple directions application with a From: and To: box that will give users turn by turn directions and highlight the google map with only 1 actual line of javascript (using default ID's and not including the loading of jQuery the plugin or the google API)

Here Is an example

You can change where the map is centered when it first loads, Put a custom icon on that location and open a custom tooltip. Perfect for people who want to include directions to their stores, or other places of work.

All the code used to create
the Demo was this:

Code:

<script type="text/javascript" src="jquery.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=GOOGLE_API_KEY" type="text/javascript"></script>
<script type="text/javascript" src="gps.jquery.js"></script>
<script type="text/javascript">
$(function() {

$("#map").googleMap().load();

});
</script>
</head>

<body onunload="GUnload()">
    <div id="directions"></div>
    <div id="map"></div>
    
    <form action="directions.php" method="post">
        <p><b>From: </b><input id="end" type="text" value="2333 El Jobean Road Port Charlotte, FL 33948" />
        <b>To: </b><input id="start" type="text" /></p>
        <input name="submit" id="getdirections" type="submit" value="Get Directions" />
    </form>

    
</body>

You can also view how I used it on My Clients Website

--------------------------

jQuery GPS homepage: http://www.birdwingfx.com/jQuery_gps
jQuery GPS on jQuery: http://plugins.jquery.com/project/jGPS

Full documentation available on the homepage as well as license info.

off topic:
-------------------------

I was thinking of calling it the Google positioning system... but since Google actually has a GPS navigation system for Android 2.0 I decided I would probably get in trouble for that

**simplistik** · October 31st, 2009, 10:36 AM

nice work man. i might suggest looking at their new api though, v3, cause it doesn't require that you have a developer key. not sure how that will affect your script code but may be worth a looksie. but really nice and simple work.