Wes Bos

Designer, Developer & Entrepreneur making the web an awesome place.

Screen shot 2011-03-16 at 11.44.30 PM

Was helping someone out in the jQuery IRC channel today and they were having some trouble with a JSON api that they were using. To simply put it they wanted to:

  1. Load a JSON file via Ajax
  2. Parse the results
  3. Pass it to Google’s Visualization into a data table
  4. Create a map based on that data.

Now the example given is great, however it doesn’t jive well when you want to add in a friendly library like jQuery. So here is how we fixed it:

The JSON Data in regiontop10.json

[
    {
        "DisplayName": "United States",
        "Name": "US",
        "population": 307006550
    },
    {
        "DisplayName": "Canada",
        "Name": "CA",
        "population": 33739900
    },
    {
        "DisplayName": "United Kingdom",
        "Name": "GB",
        "population": 61838154
    },
    {
        "DisplayName": "Mexico",
        "Name": "MX",
        "population": 107431225
    }
]

Then we just needed load the data from this file and create the map. Comments on how this code works are inline.

    google.load('visualization', '1', {packages: ['geomap']});

    $(function() {
    		// when document loads, grab the json
			$.getJSON('regiontop10.json', function(data) {
				// once grabbed, we run this callback

				// setup the new map and its variables
				var map = new google.visualization.DataTable();
					map.addRows(data.length);  // length gives us the number of results in our returned data
					map.addColumn('string', 'Country');
	      		map.addColumn('number', 'Population');

				// now we need to build the map data, loop over each result
				$.each(data, function(i,v) {
					// set the values for both the name and the population
					map.setValue(i, 0, v.DisplayName);
					map.setValue(i, 1, v.population);
				});
				// finally, create the map!
				var geomap = new google.visualization.GeoMap(
		          document.getElementById('visualization'));
		     		 geomap.draw(map, null);

			});
   });

And that is it! Take a look at the demo and view source for the rest of the HTML markup.

This entry was posted in Code Snippets, jQuery and tagged , , , . Bookmark the permalink.

11 Responses to Using jQuery, JSON and Google’s Visualization Geo API Together

  1. Uncleserb says:

    We implemented something quite similar not so long ago; feel free to take a look: http://show.askia.com/askiavistashowcase/GoogleCharts.aspx

    Thanks for sharing your tutorial ;)

  2. Nice little tutorial! Wish all tutorials were this straightforwardly laid out :D

  3. Thanks for sharing mate, here is another example/plugin about jQuery & GPS maby usefull to others :)

    http://p-xr.com/jquery-google-maps/

  4. Brandon says:

    Hi, is the “Name” field in JSON needed? And this API is limited to 2 cols as I can’t seem to expand it to 3? (correct me if I’m wrong)

  5. Vinícius says:

    Thanks ! This tutorial is perfect for me. I really thank you !

  6. ub3rst4r says:

    In case anyone hasnt noticed:

    Its suppose to be:

    var geomap = new google.visualization.GeoChart(document.getElementById(‘visualization’));

    Instead of:

    var geomap = new google.visualization.GeoMap(document.getElementById(‘visualization’));

  7. Pingback: Google Visualization APIをjQuery, JSONを用いて使ってみる | Yama's Memorandum

  8. Pingback: Google Visualization API を jQuery、JSONを用いて使ってみる | Yama's Memorandum

  9. Esther says:

    Thanks! It took me a long time to find a helpful tutorial!! (JSON file is kinda hard to load..) Thanks!

  10. Shridhar says:

    Thank a lot! I was looking for same.

  11. Great Help! Although i had to do a little tweaking in my case!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>