rssGoogle has an interesting API for geo data (and other drawings/mapping): the Visualization API
See http://code.google.com/apis/visualization/documentation/gallery/geomap.html
Using this api you can easily create a worldmap with, for instance, several countries highlighted.
The code:
<html> <head> <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script type="text/javascript"> google.load('visualization', '1', {'packages': ['geomap']}); google.setOnLoadCallback(function() { var data = new google.visualization.DataTable(); data.addRows(2); data.addColumn('string', 'Code'); data.addColumn('number', 'Count'); data.addColumn('string', 'Country'); data.setValue(0, 0, 'RU'); data.setValue(0, 1, 7); data.setValue(0, 2, 'Russia'); data.setValue(1, 0, 'AU'); data.setValue(1, 1, 4); data.setValue(1, 2, 'Australia'); var options = {}; options['dataMode'] = 'regions'; options['colors'] = [0x00AAFF, 0x0000FF]; var container = document.getElementById('map'); var mymap = new google.visualization.GeoMap(container); google.visualization.events.addListener(mymap, 'regionClick',function(e) { var rowindex = data.getFilteredRows([{column: 0, value: e['region']}]); var count = data.getValue(rowindex[0],1); if (count > 0) { alert('count: '+count); //location.href = "http://www.kwalinux.nl/somehwere?"+e['region'] } }); mymap.draw(data, options); }); </script> </head> <body> <div id="map"></div> </div> </body> </html>
To combine this with jQuery it’s best to use google’s document ready function:
google.setOnLoadCallback(function() { // do your thing when the DOM is loaded }
If you want, for example, use jquery-ui’s tabs and display the above worldmap in a tab (and another chart
in another tab) you can do:
<html> <head> <style type="text/css"> body { font: 80% verdana, arial, helvetica, sans-serif; text-align: center; /* for IE */ background-color: #cdcd5c; } #container { margin: 0 auto; /* align for good browsers */ text-align: center; /* counter the body center */ border: 0px; width: 60%; } </style> <link rel="stylesheet" type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css"> <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script type="text/javascript"> google.load("jquery", "1.4.2"); google.load("jqueryui", "1.8.1"); google.load('visualization', '1', {'packages': ['geomap']}); google.setOnLoadCallback(function() { $("#myTabs").tabs(); var travels = new google.visualization.DataTable(); travels.addRows(2); travels.addColumn('string', 'Code'); travels.addColumn('number', 'Travels'); travels.addColumn('string', 'Country'); travels.setValue(0, 0, 'RU'); travels.setValue(0, 1, 7); travels.setValue(0, 2, 'Russia'); travels.setValue(1, 0, 'AU'); travels.setValue(1, 1, 4); travels.setValue(1, 2, 'Australia'); var fotos = new google.visualization.DataTable(); fotos.addRows(2); fotos.addColumn('string', 'Code'); fotos.addColumn('number', 'Fotos'); fotos.addColumn('string', 'Country'); fotos.setValue(0, 0, 'RU'); fotos.setValue(0, 1, 9); fotos.setValue(0, 2, 'Russia'); fotos.setValue(1, 0, 'AU'); fotos.setValue(1, 1, 6); fotos.setValue(1, 2, 'Australia'); var options = {}; options['dataMode'] = 'regions'; options['colors'] = [0x00AAFF, 0x0000FF]; var travels_container = document.getElementById('map_travels'); var travelsmap = new google.visualization.GeoMap(travels_container); google.visualization.events.addListener(travelsmap, 'regionClick', function(e) { var rowindex = travels.getFilteredRows([{column: 0, value: e['region']}]); var count = travels.getValue(rowindex[0],1); if (count > 0) { alert('travels: '+count); //location.href = "http://www.kwalinux.nl/somehwere?"+e['region'] } }); travelsmap.draw(travels, options); var fotos_container = document.getElementById('map_fotos'); var fotosmap = new google.visualization.GeoMap(fotos_container); google.visualization.events.addListener(fotosmap, 'regionClick', function(e) { var rowindex = fotos.getFilteredRows([{column: 0, value: e['region']}]); var count = fotos.getValue(rowindex[0],1); if (count > 0) { alert('fotos: '+count); //location.href = "http://www.kwalinux.nl/somehwere?"+e['region'] } }); fotosmap.draw(fotos, options); }); </script> </head> <body> <div id="container"> <div id="myTabs"> <ul> <li>Travels</li> <li>Fotos</li> </ul> <div id="map_travels"></div> <div id="map_fotos"></div> </div> </div> </body> </html>
Have fun with it!