Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

Make a choropleth map

AI-generated Key Takeaways

Choropleth maps use color-coding to represent data values within administrative areas on a map.
The google.maps.FeatureStyleFunction allows customization of region colors based on corresponding data values.
Data is structured as key-value pairs, linking administrative areas with their numeric data.
Ensure predictable output from your FeatureStyleFunction by handling random elements externally.

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.

  

     

             }; Note: Read

Complete example code

TypeScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    const featureLayer = innerMap.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.
    (await google.maps.importLibrary('maps'));
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    const featureLayer = innerMap.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. 
 */
gmp-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>
    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </head>
  <body>
    <gmp-map center="40.76,-101.64" zoom="5" map-id="8b37d7206ccf01219cd548d3">
  </body>
</html>index.html

Try Sample

JSFiddle.net

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-11-05 UTC.

Stack Overflow
Ask a question under the google-maps tag.
GitHub
Fork our samples and try them yourself.
Discord
Chat with fellow developers about Google Maps Platform.
Issue Tracker
Something wrong? Send us a bug report!