Menu
I want to make a U.S. map of selectable states similar to what's shown here.
Source
Except, instead of multiple countries, I only want to render U.S. states, similar to the following.
In this jsBin, I expect to see individual states outlined that highlight upon hovering with some popup text. However, I actually only see a grey background outline of the U.S. with no discernible individual states.
Please provide a working jsBin which accomplishes the task.
http://jsbin.com/jodesitoto/edit?html,output<!DOCTYPE html>
<html>
<head>
<!---- >
https://developers.google.com/chart/interactive/docs/gallery/geochart#full
<!---->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Select'],
['US-AL', 0],
['US-AK', 0],
['US-AR', 0],
['US-AK', 0],
['US-AZ', 0],
['US-Colorado', 0],
['US-CO', 0],
['US-DE', 0],
['US-FL', 0],
['US-HI', 0],
['US-KS', 0],
['US-KY', 0],
['US-MI', 0],
['US-MO', 0],
['US-MS', 0],
['US-MT', 0],
['US-NE', 0],
['US-NJ', 0],
['US-NM', 0],
['US-NY', 0],
['US-OR', 0],
['US-PA', 0],
['US-TX', 0],
['US-UT', 0],
['US-VA', 0],
['US-WA', 0],
['US-WV', 0],
['US-WY', 0],
]);
var options = {
region: 'US',
displayMode: 'regions',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="geochart" style="width: 900px; height: 500px;"></div>
</body>
</html>
584
About Google chart tools Google chart tools are powerful, simple to use, and free.
Use a geo chart to show a map of a country, continent, or region. The values for each location are shown with colors. For example, create a map that shows the population of countries in Europe. Learn how to add & edit a chart.
A geochart is a map of a country, a continent, or a region with areas identified in one of three ways: The region mode colors whole regions, such as countries, provinces, or states. The markers mode uses circles to designate regions that are scaled according to a value that you specify.
Add resolution: 'provinces', to the options object.
var options = {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With