Using Google WorldMap visualization component in your applications

Its really hard to find a good flash based world map component to use in your web applications. They are either too complex to add or they cost quite a lot. And even sometime if you pay that, its tough to customize the chart as you want it to look like. But you know there is someone called “Uncle G” (i.e google) here who has almost all the components in his Pandora’s box. So lets see how can we use the geomap component from their Visualization Library.

First we need to create a datatable which will act as a data source for this world map, as usual like all other google visualization component.

var data = new google.visualization.DataTable();
data.addRows(5);
data.addColumn('string', 'Country');
data.addColumn('number', 'Number of ZCEs');
data.setValue(0, 0, 'Bangladesh');
data.setValue(0, 1, 19);
data.setValue(1, 0, 'India');
data.setValue(1, 1, 150);
data.setValue(2, 0, 'Pakistan');
data.setValue(2, 1, 4);
data.setValue(3, 0, 'Nepal');
data.setValue(3, 1, 5);
data.setValue(4, 0, 'Sri Lanka');
data.setValue(4, 1, 7);

now we will initialize the google visualization framework and draw this component using this data source

var geomap = new google.visualization.GeoMap(document.getElementById('<container_div_id>'));
geomap.draw(data, null);

but wait, we are not done yet – to make sure that everything works properly, we need to wrap all of these code inside a function (for example name this function as drawGeoMap) and we will use that function as a callback to draw this map. and of course, we need to load the google visualization library and geomap component first

so here is the complete code of this

<html>
<head>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['geomap']});

    function drawGeoMap() {
      var data = new google.visualization.DataTable();
	  data.addRows(5);
	  data.addColumn('string', 'Country');
	  data.addColumn('number', 'Number of ZCEs');
	  data.setValue(0, 0, 'Bangladesh');
	  data.setValue(0, 1, 19);
	  data.setValue(1, 0, 'India');
	  data.setValue(1, 1, 150);
	  data.setValue(2, 0, 'Pakistan');
	  data.setValue(2, 1, 4);
	  data.setValue(3, 0, 'Nepal');
	  data.setValue(3, 1, 5);
	  data.setValue(4, 0, 'Sri Lanka');
	  data.setValue(4, 1, 7);
      
      var geomap = new google.visualization.GeoMap(
          document.getElementById('map'));
      geomap.draw(data, null);
    }
    

    google.setOnLoadCallback(drawGeoMap);
  </script>
</body>
</html>

you can check the demo at http://sandbox.ofhas.in/geomapv1.php

it will display a world map with highlighted countries like below
Geomap V 1

but wait – lets make ca nifty change and add event listeners to it. we will add event listeners in such a way so that whenever users click on any country in the map, it will take you to zend yellow page corresponding to that country :) that will make it really an useful component :). here is the code

<html>
<head>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
  <script type="text/javascript">
  	var data, geomap;
  	var cids = [18,102,166,152,203]
    google.load('visualization', '1', {packages: ['geomap']});
    

    function drawGeoMap() {
      data = new google.visualization.DataTable();
	  data.addRows(5);
	  data.addColumn('string', 'Country');
	  data.addColumn('number', 'Number of ZCEs');
	  data.setValue(0, 0, 'Bangladesh');
	  data.setValue(0, 1, 19);
	  data.setValue(1, 0, 'India');
	  data.setValue(1, 1, 150);
	  data.setValue(2, 0, 'Pakistan');
	  data.setValue(2, 1, 4);
	  data.setValue(3, 0, 'Nepal');
	  data.setValue(3, 1, 5);
	  data.setValue(4, 0, 'Sri Lanka');
	  data.setValue(4, 1, 7);
      
      geomap = new google.visualization.GeoMap(
     	document.getElementById('map'));
     	 google.visualization.events.addListener(geomap, 'select', selectHandler);
      geomap.draw(data, null);
      
    }
    

    google.setOnLoadCallback(drawGeoMap);
   
    
    function selectHandler()
    {
        var selection = geomap.getSelection();
        var item = selection[0];
        var cid = cids[item.row];
        var url = "http://www.zend.com/en/yellow-pages#list-cid="+cid+"&firstname=&lastname=&orderby=name&sid=XX&company=&photo_first=&certtype=&ClientCandidateID="
        window.open(url);
        
    }
  </script>
</body>
</html>

check the demo at http://sandbox.ofhas.in/geomapv2.php

now you can click on any country and it will open a new tab with that particular country pre selected – and you can see who are the zend certified engineers from that country. i hope you’ve liked this :). Thanks goes the theam Visualization team at google for creating these awesome components and to make them free for use

For reference – check out geomap reference at google code at http://code.google.com/apis/visualization/documentation/gallery/geomap.html. you can do many other cool things like displaying only US states map or Canadian States map with this :)

wrapper for google static map api

google maps is one of the very best mapping services available these days. using their api you can embed interactive maps of different types in your web pages. and there are many plugins to make your life easier to embed such maps in your web pages and applications.

to embed interactive google map, you need to include some external javascript files first. now when you are using some hosted solutions like wordpress, they may not allow you to include external javascript files in your blog/pages for different security pre-cautions. this is where google static map api comes handy.

google static maps api takes latitude and longitude of some places as parameter, along with other optional formatting params and delivers a static image in your expected image format (default is gif, but you can choose among gif, png and jpeg). so you dont need to bother about permission of including any other javascript files in your pages and you can embed such static maps by specifying the url as a “src” attribute of <img> tag.

there is still one problem that might knock you down. for example if you want to display “dhaka”, the capital or bangladesh in your static map, you need to know it’s latitude and longitude. so not everyone of us speaks in a language of ‘latitude’ and ‘longitude’ but onle the name of the places. like we all know about “university of berkeley” but only very few can figure out it’s lat-lon or they have to find it out from existing geocoding services.

yesterday night i was studying about this static map api and decided to build a geocoding wrapper so that you can pass only the name of a place and my wrapper class will convert it to latitude and longitude using geociding services and then generate a static map image for you. the whole wrapper will work around two objects – geocoding service and google static map api. for geocoding i prefer to use google because of it’s amazing precision but i must say that yahoo’s geocoding service is also pretty good.

here is my wrapper class and i am sure you can find it useful. now you can use it to embed google map to anywhere you would like to :). this class is released under LGPL.

there is a sample usage file (gmap.php which you will make use of) and a source object “staticgmap.php”. this class became a part of orchid framework and prothom alo blog. if you enjoy/use this class, dont forget to drop a line here in this post. the class and usage file is moderately commented, so you will not face any problem to understand. however the usage file is also pretty fine working.

please download the class from this page
download: http://svnpg.net/gmap/

supported features
1. geocoding service, both yahoo and google (default is yahoo)
2. support of zooming (0-19, default is 12)
3. support of image format (gif, jpeg and png. default is GIF)
4. maptype support (roadmap, satellite, mobile, hybrid and terrain where default is roadmap)
5. support of markers (just as plain location name)
6. variable dimension support (default size is 400×400)

sample maps

locate dhaka and moti jheel
http://svnpg.net/gmap/gmap.php?location=dhaka&markers=dhaka,moti jheel
dhaka and motijheel marked on a static google map

locate berkeley and emeryvlle

http://svnpg.net/gmap/gmap.php?location=berkeley&markers=berkeley,emeryville&zoom=11

berkeley and emeryville marked on google static map


place where i live – uttara 14 with custom zoom level and custom size

http://svnpg.net/gmap/gmap.php?location=uttara 14&zoom=16&size=400×300

uttara 14