The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 3 of 3

Thread: jQuery Google Maps plugin

  1. #1

    jQuery Google Maps plugin

    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

    Last edited by birdwing; October 31st, 2009 at 03:11 AM.

    Twitter / The Human Conditions

    biznuge: "that doesn't grammatical sense..."

  2. #2
    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.
    Let us live so that when we come to die even the undertaker will be sorry. - Mark Twain
    Don't PM me your CSS, xHTML, JS or PHP questions. I will not reply to ANY IE6 questions.

  3. #3
    Thanks I'll take a look maybe I'll do that for version 2

    Twitter / The Human Conditions

    biznuge: "that doesn't grammatical sense..."

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012