Google visualization API and Geomap

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.

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

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

The geomap visualization class name is


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=";v=2&amp;key=ABCDEFG"></script>

The main library including file

<script type="text/javascript" src=""></script>

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


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

var data = new google.visualization.DataTable();

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



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.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.

data.setValue(0, 0, ‘Welington’);
data.setValue(0, 1, 12);

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>&nbsp;</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.


About Mazharul Anwar

A PHP and javascript nerd believe in web applications and open source goodness. Ex MS Windows user converted to linux fanboy and love gadgets. Coding in python and maintaining servers become my passion. Website performance and optimization geek.
This entry was posted in Google API, Programming, Websites and tagged , , , . Bookmark the permalink.

13 Responses to Google visualization API and Geomap

  1. Sadek says:

    Very good article…

  2. gayu says:

    Good Article !! Is it possible to click on the regions and navigate through the map? Does visualization provide this option

  3. Dear Gayu, there is one event called ‘regionClick’. That means you can define something in your map through this event. however, it is not possible to navigate through the map. But you can zoom out the map if you want. Thanx for your comment.

  4. Surjith says:

    Hi… new to this.. nice article.. helped me in understanding the API… Thank you for that. Now one question, is there any way, we can show the region in color without associating any value? I tried not adding the second column, but still it shows as value 0 to 0

  5. Thanks for your comment! well as long as I know you can’t change it two a single column…the value I mean that column(value) will appear whether you associate any value or not!

  6. Bgood says:

    u can reed all of this at official google site.
    silly try to repost it here

  7. bhushan says:

    Specially if you can tell how to change that default color which is always some orange color,when it hovers

    • Maz says:

      @bhushon ha ha bad! I can’t change API, but can make it work in easy and understandable way 😛

      About your question: I didn’t find anything on that, actually you cannot change that yellow color while hovering *based on my knowledge*, instead what you can do is give marker and change marker color 🙂

      If you find anything related to that, let me know. I am very much interested as well.

  8. bhushan says:

    Do u know how to change colors of Intensity Mpa ,please let me know?

    • Hi,

        var options = {};
        options['colors'] = ['#000000', '#00cc00'];
        new google.visualization.IntensityMap(document.getElementById('your_id')).
            draw(data, options);

      Hopefully this code can solve your problem. What I did is added an variable same like geo map. And give the desired colors. you can change the color by #rrggbb and most importantly string format. so basically it will be look like ‘#000000′(responsible for black color).

  9. Gudrun says:

    You post very interesting posts here. Your page deserves
    much more visitors. It can go viral if you give it initial boost,
    i know very useful tool that can help you, simply
    type in google: svetsern traffic tips

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s