Google Geochart - Unable to set region to a specific province
Question
I'm trying to display City markers for cities within the Province of Quebec Map. Based on google documentation, we should be able to set the resolution option to provinces and set the region to the ISO code (Eg: US-GA..). When i try with CA-QC (Found this code here on wikipedia .
When I try this, the map <div> displays this message : Requested map doest not exist
See Fiddle:
google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['City', 'Popularity'], ['Quebec', 200], ['Montreal', 300], ['Sorel-Tracy', 400], ['Boucherville', 500] ]); var options = { enableRegionInteractivity: 'true',resolution: 'provinces', region:'CA-QC'}; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); }
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div>
I there a way/workaround to do this?
Thanks
2 answers
solution1
4 ACCPTED 2015-05-29 11:21:42
It does not seem possible to set regions in this country.
According to Visualization: Geochart :
'provinces' - Supported only for country regions and US state regions. Not supported for all countries; please test a country to see whether this option is supported.
But you could consider another option, draw popularity using circle markers instead of geocharts as demonstrated below:
function initialize() { var mapOptions = { zoom: 6, center: new google.maps.LatLng(46.579246, -72.024826) }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); displayPopularity(map); } function displayPopularity(map) { var citymap = {}; citymap['Quebec'] = { center: new google.maps.LatLng(46.769492, -71.290357), population: 200 }; citymap['Montreal'] = { center: new google.maps.LatLng(45.510845, -73.567888), population: 300 }; citymap['Sorel-Tracy'] = { center: new google.maps.LatLng(46.421575, -73.118540), population: 400 }; citymap['Boucherville'] = { center: new google.maps.LatLng(45.601591, -73.438919), population: 500 }; for (var city in citymap) { var populationOptions = { strokeColor: '#00FF00', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#00FF00', fillOpacity: 0.35, map: map, center: citymap[city].center, radius: Math.sqrt(citymap[city].population) * 1000 }; var cityCircle = new google.maps.Circle(populationOptions); (function (cityCircle,city) { //create info window var infoWindow = new google.maps.InfoWindow({ content: city }); google.maps.event.addListener(cityCircle, 'click', function(ev) { infoWindow.setPosition(cityCircle.getCenter()); infoWindow.open(map); }); })(cityCircle,city); } } google.maps.event.addDomListener(window, 'load', initialize);
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Popularity map</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> </head> <body> <div id="map-canvas"></div> </body> </html>
solution2
-1 2015-05-28 16:45:31
将地区更改为region:'CA'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.