Jun
29

Create an interactive Google map widget with jQuery

By Cedric Dugas  //  Articles, Javascript / jQuery  //  4 Comments

Believe it or not, I rarely had to deal with the javascript Google map api, well until recently. Last week I had to create an interactive map with markers and info bubbles taken from html elements in an address list. What a better introduction to the Google map api. These jQuery class’s are certainly not the most powerful plugins out there, but I think it can be a solid foundation for you guys that want to go beyond the scope of the article.

With these 2 plugins you will be able to create a map, add markers, links an information bubble to them, filter a list of addresses from CSS class elements and link them to the map.

Download the source code View demo

The Google Map jQuery Class

The first thing you will want to do is, of course, create a map. For that you will have to link all files and instantiate the class.

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"><!–mce:1–></script>
  2. <script src="js/helperGoogleMap.js" type="text/javascript"><!–mce:2–></script>
  3.  
  4. $(document).ready(function() {
  5.  var usamap = new HelperGoogleMap({
  6.   "container" :"gMap",   // HTML Id of the map container
  7.   "zoom"  : 4,   // Map Zoom Level
  8.   "center" : new google.maps.LatLng(39.639538, -97.470703), // Map starting position in latitude and Longitude
  9.   "mapTypeId" : google.maps.MapTypeId.SATELLITE // Type of map: SATELLITE, ROADMAP, HYBRID, TERRAIN
  10.  });
  11. });

By now, you should have a map pointing on the US. Now we want to add markers and bubbles linked to them of course!

var addresses = { “markers” : [
  1.   {"title":"This is bubble text1", "address" : "1 Learjet Way, Wichita, KS, United States"},
  2.   {"title":"This is bubble text2", "address" : "1 Croton Point Avenue, Croton On Hudson, NY, United States"}
  3.  ]}
  4. usamap.AddMarkers(addresses)

The title will be push into the information bubble, you could also put HTML tags in there. As for the address, there is a little bit of magic happening. You can’t send directly an address into the map and get a marker, you need to use what Google call, the geocoder, to get the longitude and latitude, and after that push them to the map. You could alternatively directly use the latitude and longitude following this pattern:

  1. var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  2. var myLatlng2 = new google.maps.LatLng(-25.363882,131.044922);
  3.  
  4. var addresses = { "markers" : [
  5.   {"title":"This is title 1", "address" : myLatlng },
  6.   {"title":"This is title 2", "address" : myLatlng2}
  7.  ]}
  8. usamap.AddMarkers(addresses)

That’s it, each time you will call AddMarkers, the class remove all markers and you get a clean map to work with.

Download the source code View demo

The HTML List Filter Class

The class will filter a list of elements based on the CSS class’s each have and compare them to currently selected select options.
Let’s instantiate the class:

  1. <script src="js/helperListFilter.js" type="text/javascript"></script>
  2.  
  3. $(document).ready(function() {
  4.  var stateFilter = new HelperListFilter({
  5.   "container" :".sitesListing",  // Filter everything in this container
  6.   "sorting" :".sort",  // filter every elements with this class
  7.   "filter"  :['#filter','#state']  // HTML id of the select that will be filtering (you can have as much filter as you want)
  8.  })

The class also exposes a custom event that fires when the list is filtered, that you can use this way :

  1. $(document).bind("listFiltered", function() {   …   })

If you want an one of your options to select everything, just put the value to “all”. In your list you want to add associate class on li tags that way:

  1. <li class="sort california water"><strong>Los Angeles</strong></li>

In this case, the class “sort” the the class to sort the li, and it will compare selected options against california and water.

That’s it! It will now auto filter on the onchange event.

Download the source code View demo

At last

Of course you would need to link the 2 plugins together, this is done here, in the index.html:

usamap.getAddress = function(){
  1.   var saveAddr = [];
  2.   $(".getMap").each(function(){    // get every sorted items
  3.    if($(this).css("display") != "none"){ // Are they visible?
  4.     var title = $(this).find("a").html();  // create json to add markers
  5.     var addr = $(this).find(".listaddress").html();
  6.     var json = {"title":title, "address" : addr}
  7.     saveAddr.push(json)
  8.    }
  9.   })
  10.   var addresses = { "markers" :saveAddr}
  11.   usamap.AddMarkers(addresses)   // Add markers
  12.  }
  13.  usamap.getAddress();
  14.  $(document).bind("listFiltered", function() { usamap.getAddress()  }) // exposed custom event in the filtering class

Here you go, hope you enjoy it!

Tested on:
Firefox 3+
Internet Exploder 6+
Safari 4+

If you like and use this script, please consider buying me a beer, it’s cheap and a simple way to give back!


Author: Cedric Dugas

Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.

4 Comments to “Create an interactive Google map widget with jQuery”

  • csssample July 3, 2010 at 8:54 pm

    Excellent website, I will follow your website

    Reply
  • William Rouse July 5, 2010 at 12:52 pm

    I am curious as to how this works with out a Google Key.
    Thanks!

    Reply
  • Cedric Dugas July 5, 2010 at 5:58 pm

    Seems like the googlekey is not necessary for some parts of its javascript api

    Reply
  • Jordan Walker July 6, 2010 at 8:05 am

    Cool implementation, I like the JSON data exchange.

    Reply

Leave a comment

Articles

RSSSome Tweets