Display Counties on Google Maps

map.css

.map-wrapper {
  width: 100%;
  height: 400px;
}

map.html

<div id="map-wrapper" class="map-wrapper"></div>

<script src="scripts/map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

map.js

/**
 * Google maps JavaScript API
 * https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType
 *
 */
var initMap = function() {

  /**
   * State IDs of Google Fusion Tables
   * https://support.google.com/fusiontables/answer/1182141
   *
   */
  var state_ids = {
    oh: '1Hky8qXEOcJQmTbndHmrHWo8-yhRBLV3U31HwEg',
    ny: '1V5UR5lV1rUQuJFwxPuI6fkd8xuq2ubxRtguCng',
    pa: '1uel5gE4TfUpdxb-EIH0Pqn5RZJOZo81Ltf-DXA',
  };

  /* Location details */
  var city = 'Windsor';
  var state = 'New York';
  var zip = '13865';

  /* Styles for county polygon container */
  var fill_color = '#979748';
  var fill_opacity = 0.1;

  /**
   * {location.info} Message displayed in tooltip above marker
   * {location.address} A string address that gets converted into geographic coordinates
   *
   */
  var location = {
    address: city + ', ' + state + ' ' + zip
  };

  /* Default map options */
  var map_options = {
    zoom: 8,
    disableDefaultUI: false,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };

  /* Default map styles */
  var map_styles = [
    {
      featureType: "landscape",
      elementType: "geometry",
      stylers: [
        { color: "#FAFAFA" }
      ]
    }
  ];

  var map = new google.maps.Map(document.getElementById('map-wrapper'), map_options);
  var styled_map = new google.maps.StyledMapType(map_styles, {name: 'Styled Map'});

  /**
   * Geocoding is the process of converting addresses into geographic coordinates
   * https://developers.google.com/maps/documentation/javascript/geocoding
   *
   */
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode( { 'address': location.address }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

      map.setCenter(results[0].geometry.location);

    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });

  // The outlined county or counties and their styles
  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: "geometry",
      from: state_ids.ny,
      where: "'State-County' = 'NY-Broome'"
    }
  });

  var layer_two = new google.maps.FusionTablesLayer({
    query: {
      select: "geometry",
      from: state_ids.ny,
      where: "'State-County' = 'NY-Chenango'"
    }
  });

  var layer_three = new google.maps.FusionTablesLayer({
    query: {
      select: "geometry",
      from: state_ids.ny,
      where: "'State-County' = 'NY-Delaware'"
    }
  });

  var layer_four = new google.maps.FusionTablesLayer({
    query: {
      select: "geometry",
      from: state_ids.pa,
      where: "'State-County' = 'PA-Susquehanna'"
    }
  });

  /* Call the map styles and add county layer(s) to map */
  map.mapTypes.set('map_style', styled_map);
  map.setMapTypeId('map_style');
  layer.setMap(map);
  layer_two.setMap(map);
  layer_three.setMap(map);
  layer_four.setMap(map);

};