I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

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.

14 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 😀

  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.

  13. Garry says:

    Thank you for your great post sir! Finally found the solution for my problem by finding your solution. Very elegant.

  14. Tomcat says:

    awesome 🙂

Leave a Reply

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