Dare to Dream

Most of us who use internet already know about Google Map and its API, some of us also know about visualization API as well. In short actually in the way how Google itself describe visualization API is “The Google Visualization API lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Google Visualization API enables you to expose your own data, stored on any data-store that is connected to the web, as a Visualization compliant datasource. Thus you can create reports and dashboards as well as analyze and display your data through the wealth of available visualization applications. ”
Google has more description and documentation on this API. Geomap is one of the functionality that is performed through using Google’s visualization API. Geomap is rendered on a embedded flash player in the browser. Geomap is a map of country, continent or region map where we can use colors for specific region. Values are displayed as a color scale, and you can specify optional hovertext for regions. I will be describing some of the functionality of geomap. what we can configure and modify and how to use it in our websites.

Loading:
Load package of google is “geomap”
so the code for loading is:

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

The geomap visualization class name is

'Google.visualization.GeoMap'

These codes are permanent and must have codes so you cannot modify that to call geomap and visualization API.
the last we have to include some file in order to load the google visualiztion API library and I am assuming that you already have your personal API key. We have include those file in the beginning of the HTML best if you add them in head section of html page.
required only for markers, and only when not specifying lat/long values

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABCDEFG"></script>

The main library including file

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Setting the onload the callback function by stating those scripts right after loading the geomap.

google.setOnLoadCallback(drawMap);

The main thing here is

. This is our main function where we will declare the main functionality of Geomap. You can change the function name if you want.
Strating of main function
In the beginning of creating the function we need to declare the class name code will be

after that we can declare the rows and columns for drawing map and setting the value as well. We can have as many as rows we want. To declare the numbers of row we use this code

We took data as a variable where we declare a new class and we declared we will have ’1′ row inside the

function.

Now we will declare two column. one is for adding the title of a small popup type box what will be shown after hovering the mouse on the markers in the map. To add the first column we can add this line

Here we pass two parameters inside addColumns()one is declaration of data type what is string and another one is hovertext. The same will go for the other column where we will indicate number as the data type and value.
the whole part of adding rows and columns will look like this piece of code.

function drawMap() {
var data = new google.visualization.DataTable();
data.addRows(1);
data.addColumn('string', 'City');
data.addColumn('number', 'No');

Now we can use setValue() function to set up the value for columns. This code is one example of setting value in the columns where it will take three parameters whereas one is row index, column index and value respectively. We have to specify two setValue() function since we used two columns. That means for every column we have to set value.
We will use those portion of codes.

Now we will be using ‘NZ’ as region option. We can modify the region by changing it as country code name e.g:IN->India, BD->Bangladesh etc. We will use markers as ‘dataMode’ and we can also cofigure the width and height of the map by changing the value of width and height in pixels. We can use colors also by modifying the colors options. We can use zoom level as well. The code will be look like until now :

var options = {};
options['region'] = 'NZ';
options['width'] = '400px';
options['height'] = '400px';
options['dataMode'] = 'markers';<p> </p>

var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);

Last three lines of this portion of code are the final lines where the first variable detect the id of div in html page whereas geomap declare the main class and last line is used to draw the map.

Something that you can’t do using geomap

• You can’t drag the map
• You cannot scroll

Advance documentation and live examples are here
Hope this post can help with your simple questions about geomap. Comments is highly appreciative.