bckurera's thoughts

Just another WordPress.com site

Marking maps with Google Visualization

on February 11, 2014

If you ever wonder an easiest way to mark places, countries, regions etc on a map for presentations or web content, it can be easily achieved by using Geo-charts in Google Visualization API.

Find more information on https://developers.google.com/chart/interactive/docs/gallery/geochart

For example I wanted to mark some countries on a map and then use it on my presentation (web), following gave me a good result with 2-3 minutes of work.

<html>
<head>
<script type=’text/javascript’ src=’https://www.google.com/jsapi’></script&gt;
<script type=’text/javascript’>
google.load(‘visualization’, ‘1’, {‘packages’: [‘geochart’]});
google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
[‘Country’],
[‘LK’],
[‘US’],
[‘NO’],
]);

var options = {
magnifyingGlass: {enable: true, zoomFactor: 5.0}
};

var chart = new google.visualization.GeoChart(document.getElementById
(‘chart_div’));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id=”chart_div” style=”width: 600px; height: 600px;”></div>
</body>
</html>

Advertisements

Please add your valuable idea below, will make a discussion, thanks !

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: