Google Charts - GeoChart - USA Counties for West Virginia

Question

I am trying to display a map of the counties for West Virginia (USA) using Google Charts GeoChart. All I'm getting with the code below is the outline of West Virginia, but no counties. How may I fix that?

I've been messing around with the "options" setting, but region = "US-WV" and resolution = "provinces" is the closest I've been able to get. The code example provides data for two example counties. Using resolution = "metros" may be an answer, but it doesn't look correct.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['County', 'Popularity'],
          ['Kanawha County', 200],
          ['Barbour County', 150]
        ]);

        var options = {
            tooltip: {trigger: focus},
            region: "US-WV",
            resolution: "provinces"
        };

        var chart = new google.visualization.GeoChart(document.getElementById('districts'));

        chart.draw(data, options);
      }
    </script>

I would like to be able to see the individual counties for West Virginia, with the end goal being able to see data for those counties on hover.

Thanks!

Answer 1

you will need to use resolution: "metros" to get the county outlines.

however, county names in the data, don't appear to work.

if I change the county name to longitude / latitude coordinates,
then something appears...

var data = google.visualization.arrayToDataTable([
  ['lat', 'lng', 'Popularity'],
  [38.2556905, -81.42789839999999, 200],  // <-- 'Kanawha County'
]);

you can retrieve the lng / lat using the following url...

https://maps.googleapis.com/maps/api/geocode/json?address=Kanawha%20County&sensor=false&key=AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY

(note: probably won't work with the above api key)

which returns the following json, you can use geometry.location...

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "Kanawha County",
               "short_name" : "Kanawha County",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "West Virginia",
               "short_name" : "WV",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Kanawha County, WV, USA",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 38.6264269,
                  "lng" : -81.194113
               },
               "southwest" : {
                  "lat" : 37.9672089,
                  "lng" : -81.91519679999999
               }
            },
            "location" : {
               "lat" : 38.2556905,
               "lng" : -81.42789839999999
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 38.6264269,
                  "lng" : -81.194113
               },
               "southwest" : {
                  "lat" : 37.9672089,
                  "lng" : -81.91519679999999
               }
            }
         },
         "place_id" : "ChIJNQedGRPUSIgRZaN_DqYadAE",
         "types" : [ "administrative_area_level_2", "political" ]
      }
   ],
   "status" : "OK"
}

---

what I've done in the past is add a column to the database, and pre-fill the lng / lat,
rather than requesting those when drawing the chart...