Make a choropleth map

Select platform: Android iOS JavaScript

A choropleth map is a type of thematic map in which administrative areas are colored or shaded according to a data value. You can use a google.maps.FeatureStyleFunction to style a map based on a dataset where each administrative area is associated with a range of numeric values. 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 = featureStyleFunctionOptions => {
    const placeFeature = featureStyleFunctionOptions.feature as google.maps.PlaceFeature;
    const population = states[placeFeature.placeId];

    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
    }
}
index.ts

JavaScript

featureLayer.style = (featureStyleFunctionOptions) => {
  const placeFeature = featureStyleFunctionOptions.feature;
  const population = states[placeFeature.placeId];
  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,
  };
};

index.js

Complete example code

TypeScript

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

    const map = new 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',
    });

    const featureLayer = map.getFeatureLayer(google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1);

    featureLayer.style = featureStyleFunctionOptions => {
        const placeFeature = featureStyleFunctionOptions.feature as google.maps.PlaceFeature;
        const population = states[placeFeature.placeId];

        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 = {
        "ChIJdf5LHzR_hogR6czIUzU0VV4": 5039877, // Alabama
        "ChIJG8CuwJzfAFQRNduKqSde27w": 732673, // Alaska
        "ChIJaxhMy-sIK4cRcc3Bf7EnOUI": 7276316, // Arizona
        "ChIJYSc_dD-e0ocR0NLf_z5pBaQ": 3025891, // Arkansas
        "ChIJPV4oX_65j4ARVW8IJ6IJUYs": 39237836, // California
        "ChIJt1YYm3QUQIcR_6eQSTGDVMc": 5812069, // Colorado
        "ChIJpVER8hFT5okR5XBhBVttmq4": 3605597, // Connecticut
        "ChIJO9YMTXYFx4kReOgEjBItHZQ": 1003384, // Delaware
        "ChIJvypWkWV2wYgR0E7HW9MTLvc": 21781128, // Florida
        "ChIJV4FfHcU28YgR5xBP7BC8hGY": 10799566, // Georgia
        "ChIJBeB5Twbb_3sRKIbMdNKCd0s": 1441553, // Hawaii
        "ChIJ6Znkhaj_WFMRWIf3FQUwa9A": 1900923, // Idaho
        "ChIJGSZubzgtC4gRVlkRZFCCFX8": 12671469, // Illinois
        "ChIJHRv42bxQa4gRcuwyy84vEH4": 6805985, // Indiana
        "ChIJGWD48W9e7ocR2VnHV0pj78Y": 3193079, // Iowa
        "ChIJawF8cXEXo4cRXwk-S6m0wmg": 2934582, // Kansas
        "ChIJyVMZi0xzQogR_N_MxU5vH3c": 4509394, // Kentucky
        "ChIJZYIRslSkIIYRA0flgTL3Vck": 4624047, // Louisiana
        "ChIJ1YpTHd4dsEwR0KggZ2_MedY": 1372247, // Maine
        "ChIJ35Dx6etNtokRsfZVdmU3r_I": 6165129, // Maryland
        "ChIJ_b9z6W1l44kRHA2DVTbQxkU": 6984723, // Massachussetts
        "ChIJEQTKxz2qTE0Rs8liellI3Zc": 10050811, // Michigan
        "ChIJmwt4YJpbWE0RD6L-EJvJogI": 5707390, // Minnesota
        "ChIJGdRK5OQyKIYR2qbc6X8XDWI": 2949965, // Mississippi
        "ChIJfeMiSNXmwIcRcr1mBFnEW7U": 6168187, // Misssouri
        "ChIJ04p7LZwrQVMRGGwqz1jWcfU": 1104271, // Montana
        "ChIJ7fwMtciNk4cRxArzDwyQJ6E": 1963692, // Nebraska
        "ChIJcbTe-KEKmYARs5X8qooDR88": 3143991, // Nevada
        "ChIJ66bAnUtEs0wR64CmJa8CyNc": 1388992, // New Hampshire
        "ChIJn0AAnpX7wIkRjW0_-Ad70iw": 9267130, // New Jersey
        "ChIJqVKY50NQGIcRup41Yxpuv0Y": 2115877, // New Mexico
        "ChIJqaUj8fBLzEwRZ5UY3sHGz90": 19835913, // New York
        "ChIJgRo4_MQfVIgRGa4i6fUwP60": 10551162, // North Carolina
        "ChIJY-nYVxKD11IRyc9egzmahA0": 774948, // North Dakota
        "ChIJwY5NtXrpNogRFtmfnDlkzeU": 11780017, // Ohio
        "ChIJnU-ssRE5rIcRSOoKQDPPHF0": 3986639, // Oklahoma
        "ChIJVWqfm3xuk1QRdrgLettlTH0": 4246155, // Oregon
        "ChIJieUyHiaALYgRPbQiUEchRsI": 12964056, // Pennsylvania
        "ChIJD9cOYhQ15IkR5wbB57wYTh4": 1095610, // Rhode Island
        "ChIJ49ExeWml-IgRnhcF9TKh_7k": 5190705, // South Carolina
        "ChIJpTjphS1DfYcRt6SGMSnW8Ac": 895376, // South Dakota
        "ChIJA8-XniNLYYgRVpGBpcEgPgM": 6975218, // Tennessee
        "ChIJSTKCCzZwQIYRPN4IGI8c6xY": 29527941, // Texas
        "ChIJzfkTj8drTIcRP0bXbKVK370": 3337975, // Utah
        "ChIJ_87aSGzctEwRtGtUNnSJTSY": 645570, // Vermont
        "ChIJzbK8vXDWTIgRlaZGt0lBTsA": 8642274, // Virginia
        "ChIJ-bDD5__lhVQRuvNfbGh4QpQ": 7738692, // Washington
        "ChIJRQnL1KVUSogRQzrN3mjHALs": 1782959, // West Virginia
        "ChIJr-OEkw_0qFIR1kmG-LjV1fI": 5895908, // Wisconsin
        "ChIJaS7hSDTiXocRLzh90nkisCY": 578803, // Wyoming
    };
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const map = new 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",
  });
  const featureLayer = map.getFeatureLayer(
    google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1,
  );

  featureLayer.style = (featureStyleFunctionOptions) => {
    const placeFeature = featureStyleFunctionOptions.feature;
    const population = states[placeFeature.placeId];
    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 = {
    "ChIJdf5LHzR_hogR6czIUzU0VV4": 5039877, // Alabama
    "ChIJG8CuwJzfAFQRNduKqSde27w": 732673, // Alaska
    "ChIJaxhMy-sIK4cRcc3Bf7EnOUI": 7276316, // Arizona
    "ChIJYSc_dD-e0ocR0NLf_z5pBaQ": 3025891, // Arkansas
    "ChIJPV4oX_65j4ARVW8IJ6IJUYs": 39237836, // California
    "ChIJt1YYm3QUQIcR_6eQSTGDVMc": 5812069, // Colorado
    "ChIJpVER8hFT5okR5XBhBVttmq4": 3605597, // Connecticut
    "ChIJO9YMTXYFx4kReOgEjBItHZQ": 1003384, // Delaware
    "ChIJvypWkWV2wYgR0E7HW9MTLvc": 21781128, // Florida
    "ChIJV4FfHcU28YgR5xBP7BC8hGY": 10799566, // Georgia
    "ChIJBeB5Twbb_3sRKIbMdNKCd0s": 1441553, // Hawaii
    "ChIJ6Znkhaj_WFMRWIf3FQUwa9A": 1900923, // Idaho
    "ChIJGSZubzgtC4gRVlkRZFCCFX8": 12671469, // Illinois
    "ChIJHRv42bxQa4gRcuwyy84vEH4": 6805985, // Indiana
    "ChIJGWD48W9e7ocR2VnHV0pj78Y": 3193079, // Iowa
    "ChIJawF8cXEXo4cRXwk-S6m0wmg": 2934582, // Kansas
    "ChIJyVMZi0xzQogR_N_MxU5vH3c": 4509394, // Kentucky
    "ChIJZYIRslSkIIYRA0flgTL3Vck": 4624047, // Louisiana
    "ChIJ1YpTHd4dsEwR0KggZ2_MedY": 1372247, // Maine
    "ChIJ35Dx6etNtokRsfZVdmU3r_I": 6165129, // Maryland
    "ChIJ_b9z6W1l44kRHA2DVTbQxkU": 6984723, // Massachussetts
    "ChIJEQTKxz2qTE0Rs8liellI3Zc": 10050811, // Michigan
    "ChIJmwt4YJpbWE0RD6L-EJvJogI": 5707390, // Minnesota
    "ChIJGdRK5OQyKIYR2qbc6X8XDWI": 2949965, // Mississippi
    "ChIJfeMiSNXmwIcRcr1mBFnEW7U": 6168187, // Misssouri
    "ChIJ04p7LZwrQVMRGGwqz1jWcfU": 1104271, // Montana
    "ChIJ7fwMtciNk4cRxArzDwyQJ6E": 1963692, // Nebraska
    "ChIJcbTe-KEKmYARs5X8qooDR88": 3143991, // Nevada
    "ChIJ66bAnUtEs0wR64CmJa8CyNc": 1388992, // New Hampshire
    "ChIJn0AAnpX7wIkRjW0_-Ad70iw": 9267130, // New Jersey
    "ChIJqVKY50NQGIcRup41Yxpuv0Y": 2115877, // New Mexico
    "ChIJqaUj8fBLzEwRZ5UY3sHGz90": 19835913, // New York
    "ChIJgRo4_MQfVIgRGa4i6fUwP60": 10551162, // North Carolina
    "ChIJY-nYVxKD11IRyc9egzmahA0": 774948, // North Dakota
    "ChIJwY5NtXrpNogRFtmfnDlkzeU": 11780017, // Ohio
    "ChIJnU-ssRE5rIcRSOoKQDPPHF0": 3986639, // Oklahoma
    "ChIJVWqfm3xuk1QRdrgLettlTH0": 4246155, // Oregon
    "ChIJieUyHiaALYgRPbQiUEchRsI": 12964056, // Pennsylvania
    "ChIJD9cOYhQ15IkR5wbB57wYTh4": 1095610, // Rhode Island
    "ChIJ49ExeWml-IgRnhcF9TKh_7k": 5190705, // South Carolina
    "ChIJpTjphS1DfYcRt6SGMSnW8Ac": 895376, // South Dakota
    "ChIJA8-XniNLYYgRVpGBpcEgPgM": 6975218, // Tennessee
    "ChIJSTKCCzZwQIYRPN4IGI8c6xY": 29527941, // Texas
    "ChIJzfkTj8drTIcRP0bXbKVK370": 3337975, // Utah
    "ChIJ_87aSGzctEwRtGtUNnSJTSY": 645570, // Vermont
    "ChIJzbK8vXDWTIgRlaZGt0lBTsA": 8642274, // Virginia
    "ChIJ-bDD5__lhVQRuvNfbGh4QpQ": 7738692, // Washington
    "ChIJRQnL1KVUSogRQzrN3mjHALs": 1782959, // West Virginia
    "ChIJr-OEkw_0qFIR1kmG-LjV1fI": 5895908, // Wisconsin
    "ChIJaS7hSDTiXocRLzh90nkisCY": 578803, // Wyoming
  };
}

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>

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

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

Try Sample