Make a choropleth map

A choropleth map is a type of thematic map in which administrative areas are colored or shaded according to a statistical range. You can use a google.maps.FeatureStyleFunction to style a map based on a dataset where each administrative area is associated with a numeric value. The following example map shows a choropleth map depicting state population data for the United States.

In this example, the data consists of an array of key-value pairs, matching the display name of each state with a numeric population value. The maps.FeatureStyleFunction conditionally colors each region based on the values in the array.

TypeScript

featureLayer.style = placeFeature => {

    const population = states[placeFeature.feature.displayName];

    let fillColor;
    // Specify colors using any of the following:
    // * Named ('green')
    // * Hexadecimal ('#FF0000')
    // * RGB ('rgb(0, 0, 255)')
    // * HSL ('hsl(60, 100%, 50%)')

    if (population < 2000000) {
        fillColor = 'green'
    } else if (population < 5000000) {
        fillColor = 'red'
    } else if (population < 10000000) {
        fillColor = 'blue'
    } else if (population < 40000000) {
        fillColor = 'yellow'
    }
    return {
        fillColor,
        fillOpacity: 0.5
    }
}

// Population data by state.
const states = {
    "Alabama": 5039877,
    "Alaska": 732673,
    "Arizona": 7276316,
    "Arkansas": 3025891,
    "California": 39237836,
    "Colorado": 5812069,
    "Connecticut": 3605597,
    "Delaware": 1003384,
    "Florida": 21781128,
    "Georgia": 10799566,
    "Hawaii": 1441553,
    "Idaho": 1900923,
    "Illinois": 12671469,
    "Indiana": 6805985,
    "Iowa": 3193079,
    "Kansas": 2934582,
    "Kentucky": 4509394,
    "Louisiana": 4624047,
    "Maine": 1372247,
    "Maryland": 6165129,
    "Massachusetts": 6984723,
    "Michigan": 10050811,
    "Minnesota": 5707390,
    "Mississippi": 2949965,
    "Missouri": 6168187,
    "Montana": 1104271,
    "Nebraska": 1963692,
    "Nevada": 3143991,
    "New Hampshire": 1388992,
    "New Jersey": 9267130,
    "New Mexico": 2115877,
    "New York": 19835913,
    "North Carolina": 10551162,
    "North Dakota": 774948,
    "Ohio": 11780017,
    "Oklahoma": 3986639,
    "Oregon": 4246155,
    "Pennsylvania": 12964056,
    "Rhode Island": 1095610,
    "South Carolina": 5190705,
    "South Dakota": 895376,
    "Tennessee": 6975218,
    "Texas": 29527941,
    "Utah": 3337975,
    "Vermont": 645570,
    "Virginia": 8642274,
    "Washington": 7738692,
    "West Virginia": 1782959,
    "Wisconsin": 5895908,
    "Wyoming": 578803,
};
index.ts

JavaScript

featureLayer.style = (placeFeature) => {
  const population = states[placeFeature.feature.displayName];
  let fillColor;

  // Specify colors using any of the following:
  // * Named ('green')
  // * Hexadecimal ('#FF0000')
  // * RGB ('rgb(0, 0, 255)')
  // * HSL ('hsl(60, 100%, 50%)')
  if (population < 2000000) {
    fillColor = "green";
  } else if (population < 5000000) {
    fillColor = "red";
  } else if (population < 10000000) {
    fillColor = "blue";
  } else if (population < 40000000) {
    fillColor = "yellow";
  }
  return {
    fillColor,
    fillOpacity: 0.5,
  };
};

// Population data by state.
const states = {
  "Alabama": 5039877,
  "Alaska": 732673,
  "Arizona": 7276316,
  "Arkansas": 3025891,
  "California": 39237836,
  "Colorado": 5812069,
  "Connecticut": 3605597,
  "Delaware": 1003384,
  "Florida": 21781128,
  "Georgia": 10799566,
  "Hawaii": 1441553,
  "Idaho": 1900923,
  "Illinois": 12671469,
  "Indiana": 6805985,
  "Iowa": 3193079,
  "Kansas": 2934582,
  "Kentucky": 4509394,
  "Louisiana": 4624047,
  "Maine": 1372247,
  "Maryland": 6165129,
  "Massachusetts": 6984723,
  "Michigan": 10050811,
  "Minnesota": 5707390,
  "Mississippi": 2949965,
  "Missouri": 6168187,
  "Montana": 1104271,
  "Nebraska": 1963692,
  "Nevada": 3143991,
  "New Hampshire": 1388992,
  "New Jersey": 9267130,
  "New Mexico": 2115877,
  "New York": 19835913,
  "North Carolina": 10551162,
  "North Dakota": 774948,
  "Ohio": 11780017,
  "Oklahoma": 3986639,
  "Oregon": 4246155,
  "Pennsylvania": 12964056,
  "Rhode Island": 1095610,
  "South Carolina": 5190705,
  "South Dakota": 895376,
  "Tennessee": 6975218,
  "Texas": 29527941,
  "Utah": 3337975,
  "Vermont": 645570,
  "Virginia": 8642274,
  "Washington": 7738692,
  "West Virginia": 1782959,
  "Wisconsin": 5895908,
  "Wyoming": 578803,
};
index.js

Complete example code

TypeScript

function initMap() {
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 40.76, lng: -101.64 },
        zoom: 5,
        // In the cloud console, configure this Map ID with a style that enables the
        // "Administrative Area Level 1" feature layer.
        mapId: '7ba16be0c9375fa7',
    });

    //@ts-ignore
    const featureLayer = map.getFeatureLayer(google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1);

    featureLayer.style = placeFeature => {

        const population = states[placeFeature.feature.displayName];

        let fillColor;
        // Specify colors using any of the following:
        // * Named ('green')
        // * Hexadecimal ('#FF0000')
        // * RGB ('rgb(0, 0, 255)')
        // * HSL ('hsl(60, 100%, 50%)')

        if (population < 2000000) {
            fillColor = 'green'
        } else if (population < 5000000) {
            fillColor = 'red'
        } else if (population < 10000000) {
            fillColor = 'blue'
        } else if (population < 40000000) {
            fillColor = 'yellow'
        }
        return {
            fillColor,
            fillOpacity: 0.5
        }
    }

    // Population data by state.
    const states = {
        "Alabama": 5039877,
        "Alaska": 732673,
        "Arizona": 7276316,
        "Arkansas": 3025891,
        "California": 39237836,
        "Colorado": 5812069,
        "Connecticut": 3605597,
        "Delaware": 1003384,
        "Florida": 21781128,
        "Georgia": 10799566,
        "Hawaii": 1441553,
        "Idaho": 1900923,
        "Illinois": 12671469,
        "Indiana": 6805985,
        "Iowa": 3193079,
        "Kansas": 2934582,
        "Kentucky": 4509394,
        "Louisiana": 4624047,
        "Maine": 1372247,
        "Maryland": 6165129,
        "Massachusetts": 6984723,
        "Michigan": 10050811,
        "Minnesota": 5707390,
        "Mississippi": 2949965,
        "Missouri": 6168187,
        "Montana": 1104271,
        "Nebraska": 1963692,
        "Nevada": 3143991,
        "New Hampshire": 1388992,
        "New Jersey": 9267130,
        "New Mexico": 2115877,
        "New York": 19835913,
        "North Carolina": 10551162,
        "North Dakota": 774948,
        "Ohio": 11780017,
        "Oklahoma": 3986639,
        "Oregon": 4246155,
        "Pennsylvania": 12964056,
        "Rhode Island": 1095610,
        "South Carolina": 5190705,
        "South Dakota": 895376,
        "Tennessee": 6975218,
        "Texas": 29527941,
        "Utah": 3337975,
        "Vermont": 645570,
        "Virginia": 8642274,
        "Washington": 7738692,
        "West Virginia": 1782959,
        "Wisconsin": 5895908,
        "Wyoming": 578803,
    };
}

declare global {
    interface Window {
        initMap: () => void;
    }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.76, lng: -101.64 },
    zoom: 5,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Administrative Area Level 1" feature layer.
    mapId: "7ba16be0c9375fa7",
  });
  //@ts-ignore
  const featureLayer = map.getFeatureLayer(
    google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1
  );

  featureLayer.style = (placeFeature) => {
    const population = states[placeFeature.feature.displayName];
    let fillColor;

    // Specify colors using any of the following:
    // * Named ('green')
    // * Hexadecimal ('#FF0000')
    // * RGB ('rgb(0, 0, 255)')
    // * HSL ('hsl(60, 100%, 50%)')
    if (population < 2000000) {
      fillColor = "green";
    } else if (population < 5000000) {
      fillColor = "red";
    } else if (population < 10000000) {
      fillColor = "blue";
    } else if (population < 40000000) {
      fillColor = "yellow";
    }
    return {
      fillColor,
      fillOpacity: 0.5,
    };
  };

  // Population data by state.
  const states = {
    "Alabama": 5039877,
    "Alaska": 732673,
    "Arizona": 7276316,
    "Arkansas": 3025891,
    "California": 39237836,
    "Colorado": 5812069,
    "Connecticut": 3605597,
    "Delaware": 1003384,
    "Florida": 21781128,
    "Georgia": 10799566,
    "Hawaii": 1441553,
    "Idaho": 1900923,
    "Illinois": 12671469,
    "Indiana": 6805985,
    "Iowa": 3193079,
    "Kansas": 2934582,
    "Kentucky": 4509394,
    "Louisiana": 4624047,
    "Maine": 1372247,
    "Maryland": 6165129,
    "Massachusetts": 6984723,
    "Michigan": 10050811,
    "Minnesota": 5707390,
    "Mississippi": 2949965,
    "Missouri": 6168187,
    "Montana": 1104271,
    "Nebraska": 1963692,
    "Nevada": 3143991,
    "New Hampshire": 1388992,
    "New Jersey": 9267130,
    "New Mexico": 2115877,
    "New York": 19835913,
    "North Carolina": 10551162,
    "North Dakota": 774948,
    "Ohio": 11780017,
    "Oklahoma": 3986639,
    "Oregon": 4246155,
    "Pennsylvania": 12964056,
    "Rhode Island": 1095610,
    "South Carolina": 5190705,
    "South Dakota": 895376,
    "Tennessee": 6975218,
    "Texas": 29527941,
    "Utah": 3337975,
    "Vermont": 645570,
    "Virginia": 8642274,
    "Washington": 7738692,
    "West Virginia": 1782959,
    "Wisconsin": 5895908,
    "Wyoming": 578803,
  };
}

window.initMap = initMap;
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Choropleth Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBn0q_XQID1-QN1HeNAE1IwhUbM1S-dH2U&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

Try Sample