The Google AJAX API for Geodata

GeoCharts

I recently signed up to Codementor and applied to become a mentor to other developers o.

Codementor is a great site, with many tutorials and articles on things both interesting and inspiring. They also have a variety of tutorials and courses for both beginners and developers with advanced skill/capability.

The following is an adaptation of an article I wrote for Codementor. Articles get moderated and are then publicly viewable to a community of 200K+ Developers of all skill levels, but also to the public web, and articles come up in google search if anyone searches for a topic you posted on. Please also feel free to read some of my other technology articles here.

The world has certainly become a much smaller place since Google started allowing developers to use Google Maps (through the Maps API) on personal websites. However, many people are still not aware of the functionality that has been made available: from using a static map on a website (e.g. to give people directions to your office space) to using maps for complicated data visualization; the options available through this API are endless. I even know of whole business models that were birthed out of the simplest implementation of a Google Map.

In this article, I will focus on a lesser known functionality: applying simple visualizations through an API call to a map that is already available within the same API. This means that you can work locally – all you need is an Internet connection, and a simple AJAX call will do all the work for you. Sounds too good to be true? Well, it did to metoo. Let me show you how it’s done.

You can start by creating a standard HTML5 document layout.

Within your header section, add a reference to the Google AJAX API:

In a script tag of type javascript, create the element that you require – for this exercise, we will use the GeoChart functionality. We will also create a function “drawChart” that will pass data to the Google GeoChart package:


// Load the Visualization API and the GeoChart package:
google.load('visualization', '1.0', {'packages':['corechart', 'table', 'geochart']});

// Set a callback to run once the API has completed loading the required functionality:

google.setOnLoadCallback(drawChart);

drawChart(//***your code here**//);

Next, we will focus on the “drawChart()” function, which creates and populates a data table, then initiates the chart drawing by passing data to the API, which then “draws” it. The following screenshot shows what you should see in your browser once you have completed the task:

GeoCharts

GeoCharts

Now, let’s get it set up:

The drawChart() function is just a JavaScript function, so how does this function allow us to draw such incredibly detailed maps using capabilities directly connected to its underlying data?

The key lies in the reference to the “geodata” library and its close companion — “geooptions.”

The “geochart” package sets up a chart that references “geodata” to render a geographical drawing. The “geooptions” provides further information to the rendering engine on how the graphic is to be rendered, allowing you to set colors, mapsize, etc. Certain placeholders are reserved for use in the API, which is what makes this possible. First we will set up a table. Our table contains the headers, ‘City,’ ‘Population,’ and ‘Area’ (I have included data here for two cities, but you can add as many as you like from any of the existing cities in the area of your choice):


// Send the Data you want displayed to the API:
var mapdata = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76]
]);

Now, set your map options to add a key for colours, map size, etc. (You can use any region or display mode available in the API, and any colour available in the RGB spectrum.) For this task, I chose the region “IT”, and you can see above that my markers are displayed in blue and green.


// Set the map options
var mapoptions = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};

Voila! 😃 You have created a geodata map! Congratulations 😃