Create an interactive Google map widget with jQuery

by Cedric Dugas on June 29, 2010

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="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"><!--mce:0--></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" 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"}
	]}
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:

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}
	]}
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:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" 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}
				saveAddr.push(json)
			}
		})
		var addresses = { "markers" :saveAddr}
		usamap.AddMarkers(addresses)   // Add markers
	}
	usamap.getAddress();
	$(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!


Ads

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.



13 comments

Excellent website, I will follow your website

by csssample on July 3, 2010 at 8:54 pm. Reply #

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

by William Rouse on July 5, 2010 at 12:52 pm. Reply #

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

by Cedric Dugas on July 5, 2010 at 5:58 pm. Reply #

Cool implementation, I like the JSON data exchange.

by Jordan Walker on July 6, 2010 at 8:05 am. Reply #

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

by Max on September 6, 2010 at 6:35 am. Reply #

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.

by larf2k on December 20, 2010 at 10:37 pm. Reply #

Hi Cedric,
Thanks for that great job.
I’d like to show markers from different categories by using crossed filters. That’s why I need to use checkboxes.
I see that some people asked you the same already. Is there a way to make it?
Really appreciate your help ;)

by Antoine on January 7, 2014 at 5:32 am. Reply #

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

by Nikola on August 26, 2011 at 11:40 am. Reply #

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.

by Mordhel on December 22, 2011 at 10:06 pm. Reply #

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.

by pinballspot on January 28, 2012 at 5:10 pm. Reply #

Thanks a lot ! Great !

by arno on February 3, 2012 at 10:13 am. Reply #

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!

by akis on March 7, 2012 at 3:44 pm. Reply #

thanks alot bro u saved my 5 days research

by ayush on April 29, 2013 at 1:30 pm. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.