Want VIP access? Get the latest tutorials, videos, giveaways and more!


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

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(
		     		 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 jQuery and tagged , , , . Bookmark the permalink.

12 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 :)


  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!

  12. Abi says:

    Love the simplicity. Thank you for the tutorial.

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>