Skip to content

Instantly share code, notes, and snippets.

@lplotni
Created September 26, 2013 08:22
Show Gist options
  • Save lplotni/6711336 to your computer and use it in GitHub Desktop.
Save lplotni/6711336 to your computer and use it in GitHub Desktop.
Using google visualization API, I render the world map and some cities.
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Office'],
['London, UK', 1],
['Manchester, UK',1],
['Hamburg, DE',1],
['Chicago', 1],
['New York',1],
['San Francisco',1],
['Johannesburg',1],
['Kampala',1],
['Brisbane',1],
['Melbourne',1],
['Perth',1],
['Singapore',1],
['Sydney',1],
['Bejing',1],
['Chengdu',1],
['Shanghai',1],
['Xian,China',1],
['Bangalore',1],
['Chennai',1],
['Gurgaon',1],
['Pune',1],
['Atlanta',1],
['Austin',1],
['Dallas',1],
['Toronto',1],
['Porto Alegre',1],
['Quito',1],
['Recife',1],
['Sao Paulo',1]
]);
var options = {
region: 'world',
displayMode: 'markers',
legend: 'none',
markerOpacity: 1,
sizeAxis: {minValue: 4, maxSize: 5},
colorAxis: {colors: ['cad57f'],
}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment