How to Use Google AJAX API in Geodata Maps
So you want to be a Javascript developer? Presenting *** drum roll ***
The Google AJAX API for Geodata!
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:
<!DOCTYPE html>
<html>
<header></header>
</html>
Within your header section, add a reference to the Google AJAX API:
<header>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</header>
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:
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
Author’s Bio: Theresa Mostert is a front-end developer with a keen interest in enterprise JavaScript solutions that scale for small to medium enterprise sector in Cape Town, South Africa. She loves to spend time with family, and you will probably find her atop a mountain on a weekend.
