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.

<script src="" type="text/javascript"><!--mce:0--></script>
<script src="" type="text/javascript"><!--mce:1--></script>
<script src="js/helperGoogleMap.js" type="text/javascript"><!--mce:2--></script>
$(document).ready(function() {
 var usamap = new HelperGoogleMap({
		"container"	:"gMap",   // HTML Id of the map container
		"zoom"		: 4,   // Map Zoom Level
		"center"	: new google.maps.LatLng(39.639538, -97.470703), // Map starting position in latitude and Longitude
		"mapTypeId"	: google.maps.MapTypeId.SATELLITE // Type of map: SATELLITE, ROADMAP, HYBRID, TERRAIN

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" : [
		{"title":"This is bubble text1", "address" : "1 Learjet Way, Wichita, KS, United States"},
		{"title":"This is bubble text2", "address" : "1 Croton Point Avenue, Croton On Hudson, NY, United States"}

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:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng2 = new google.maps.LatLng(-25.363882,131.044922);
var addresses = { "markers" : [
		{"title":"This is title 1", "address" : myLatlng },
		{"title":"This is title 2", "address" : myLatlng2}

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:

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

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

$(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:

<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(){
		var saveAddr = [];
		$(".getMap").each(function(){    // get every sorted items
			if($(this).css("display") != "none"){ // Are they visible?
				var title = $(this).find("a").html();  // create json to add markers
				var addr = $(this).find(".listaddress").html();
				var json = {"title":title, "address" : addr}
		var addresses = { "markers" :saveAddr}
		usamap.AddMarkers(addresses)   // Add markers
	$(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!


Download testking 000-081 study guides and testking JN0-331 video demos to learn how improve your website usability using jQuery features. Become expert developer with testking 642-426 web development course.

12 thoughts on “Create an interactive Google map widget with jQuery

  1. I’m having trouble using this plugin
    Firebug returns “google.maps.MapTypeId is undefined” on line 17 of the helper…

  2. Great plugin!

    I was wondering if you knew of a way to use checkboxes rather than select/option forms – or really a combination of both. I’ve tried giving the input’s id’s that are referenced in the stateFilter object, but that doesn’t seem to yield the results I’m looking for.

    Any ideas would be greatly appreciated.

  3. COOL! I’m so happy to find this site ­čÖé
    p.s. like larf2k, i will try (successful, I hope) with checkboxes!

  4. Good afternoon Cedric.

    Just out of curiosity, instead of having all of the map locations as list items in the html, could you pull them in from an external XML file instead ?

    Thanks for your time.

  5. Any ideas on how to make this map interactive, so that users can add locations to desired marker category (held for moderation), request to edit locations, or flag wrong/inappropriate locations with comments that could be auto emailed to a moderator? Thanks for the cool demo.

  6. Great job! Could you explain me what I have to do if I want the results to appear after hitting a submit button,while the bubbles in the map are filtered by the options anyway?
    Thanks for this,
    Again,Great job!

Comments are closed.