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

Make a choropleth map

  • Choropleth maps use color-coding to represent data values within administrative areas on a map.

  • Thegoogle.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 yourFeatureStyleFunction by handling random elements externally.

Select platform:AndroidiOSJavaScript

A choropleth map is a type of thematic map in which administrative areas arecolored or shaded according to a data value. You can use agoogle.maps.FeatureStyleFunctionto style a map based on a dataset where each administrative area is associatedwith a range of numeric values. The following example map shows a choropleth mapdepicting state population data for the United States.

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

TypeScript

featureLayer.style=(featureStyleFunctionOptions)=>{constplaceFeature=featureStyleFunctionOptions.featureasgoogle.maps.PlaceFeature;constpopulation=states[placeFeature.placeId];letfillColor;// 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';}elseif(population <5000000){fillColor='red';}elseif(population <10000000){fillColor='blue';}elseif(population <40000000){fillColor='yellow';}return{fillColor,fillOpacity:0.5,};};
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

featureLayer.style=(featureStyleFunctionOptions)=>{constplaceFeature=featureStyleFunctionOptions.feature;constpopulation=states[placeFeature.placeId];letfillColor;// 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';}elseif(population <5000000){fillColor='red';}elseif(population <10000000){fillColor='blue';}elseif(population <40000000){fillColor='yellow';}return{fillColor,fillOpacity:0.5,};};

Important: The feature styling function must create predictable output. Forexample, if you want to create an example that applies a random color, yourcode must do the random parts outside ofFeatureStyleFunction.

Complete example code

TypeScript

asyncfunctioninitMap(){// Request needed libraries.(awaitgoogle.maps.importLibrary('maps'))asgoogle.maps.MapsLibrary;// Get the gmp-map element.constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;// Get the inner map.constinnerMap=mapElement.innerMap;constfeatureLayer=innerMap.getFeatureLayer(google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1);featureLayer.style=(featureStyleFunctionOptions)=>{constplaceFeature=featureStyleFunctionOptions.featureasgoogle.maps.PlaceFeature;constpopulation=states[placeFeature.placeId];letfillColor;// 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';}elseif(population <5000000){fillColor='red';}elseif(population <10000000){fillColor='blue';}elseif(population <40000000){fillColor='yellow';}return{fillColor,fillOpacity:0.5,};};// Population data by state.conststates={ChIJdf5LHzR_hogR6czIUzU0VV4:5039877,// AlabamaChIJG8CuwJzfAFQRNduKqSde27w:732673,// Alaska'ChIJaxhMy-sIK4cRcc3Bf7EnOUI':7276316,// Arizona'ChIJYSc_dD-e0ocR0NLf_z5pBaQ':3025891,// ArkansasChIJPV4oX_65j4ARVW8IJ6IJUYs:39237836,// CaliforniaChIJt1YYm3QUQIcR_6eQSTGDVMc:5812069,// ColoradoChIJpVER8hFT5okR5XBhBVttmq4:3605597,// ConnecticutChIJO9YMTXYFx4kReOgEjBItHZQ:1003384,// DelawareChIJvypWkWV2wYgR0E7HW9MTLvc:21781128,// FloridaChIJV4FfHcU28YgR5xBP7BC8hGY:10799566,// GeorgiaChIJBeB5Twbb_3sRKIbMdNKCd0s:1441553,// HawaiiChIJ6Znkhaj_WFMRWIf3FQUwa9A:1900923,// IdahoChIJGSZubzgtC4gRVlkRZFCCFX8:12671469,// IllinoisChIJHRv42bxQa4gRcuwyy84vEH4:6805985,// IndianaChIJGWD48W9e7ocR2VnHV0pj78Y:3193079,// Iowa'ChIJawF8cXEXo4cRXwk-S6m0wmg':2934582,// KansasChIJyVMZi0xzQogR_N_MxU5vH3c:4509394,// KentuckyChIJZYIRslSkIIYRA0flgTL3Vck:4624047,// LouisianaChIJ1YpTHd4dsEwR0KggZ2_MedY:1372247,// MaineChIJ35Dx6etNtokRsfZVdmU3r_I:6165129,// MarylandChIJ_b9z6W1l44kRHA2DVTbQxkU:6984723,// MassachussettsChIJEQTKxz2qTE0Rs8liellI3Zc:10050811,// Michigan'ChIJmwt4YJpbWE0RD6L-EJvJogI':5707390,// MinnesotaChIJGdRK5OQyKIYR2qbc6X8XDWI:2949965,// MississippiChIJfeMiSNXmwIcRcr1mBFnEW7U:6168187,// MisssouriChIJ04p7LZwrQVMRGGwqz1jWcfU:1104271,// MontanaChIJ7fwMtciNk4cRxArzDwyQJ6E:1963692,// Nebraska'ChIJcbTe-KEKmYARs5X8qooDR88':3143991,// NevadaChIJ66bAnUtEs0wR64CmJa8CyNc:1388992,// New Hampshire'ChIJn0AAnpX7wIkRjW0_-Ad70iw':9267130,// New JerseyChIJqVKY50NQGIcRup41Yxpuv0Y:2115877,// New MexicoChIJqaUj8fBLzEwRZ5UY3sHGz90:19835913,// New YorkChIJgRo4_MQfVIgRGa4i6fUwP60:10551162,// North Carolina'ChIJY-nYVxKD11IRyc9egzmahA0':774948,// North DakotaChIJwY5NtXrpNogRFtmfnDlkzeU:11780017,// Ohio'ChIJnU-ssRE5rIcRSOoKQDPPHF0':3986639,// OklahomaChIJVWqfm3xuk1QRdrgLettlTH0:4246155,// OregonChIJieUyHiaALYgRPbQiUEchRsI:12964056,// PennsylvaniaChIJD9cOYhQ15IkR5wbB57wYTh4:1095610,// Rhode Island'ChIJ49ExeWml-IgRnhcF9TKh_7k':5190705,// South CarolinaChIJpTjphS1DfYcRt6SGMSnW8Ac:895376,// South Dakota'ChIJA8-XniNLYYgRVpGBpcEgPgM':6975218,// TennesseeChIJSTKCCzZwQIYRPN4IGI8c6xY:29527941,// TexasChIJzfkTj8drTIcRP0bXbKVK370:3337975,// UtahChIJ_87aSGzctEwRtGtUNnSJTSY:645570,// VermontChIJzbK8vXDWTIgRlaZGt0lBTsA:8642274,// Virginia'ChIJ-bDD5__lhVQRuvNfbGh4QpQ':7738692,// WashingtonChIJRQnL1KVUSogRQzrN3mjHALs:1782959,// West Virginia'ChIJr-OEkw_0qFIR1kmG-LjV1fI':5895908,// WisconsinChIJaS7hSDTiXocRLzh90nkisCY:578803,// Wyoming};}initMap();
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

asyncfunctioninitMap(){// Request needed libraries.(awaitgoogle.maps.importLibrary('maps'));// Get the gmp-map element.constmapElement=document.querySelector('gmp-map');// Get the inner map.constinnerMap=mapElement.innerMap;constfeatureLayer=innerMap.getFeatureLayer(google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1);featureLayer.style=(featureStyleFunctionOptions)=>{constplaceFeature=featureStyleFunctionOptions.feature;constpopulation=states[placeFeature.placeId];letfillColor;// 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';}elseif(population <5000000){fillColor='red';}elseif(population <10000000){fillColor='blue';}elseif(population <40000000){fillColor='yellow';}return{fillColor,fillOpacity:0.5,};};// Population data by state.conststates={ChIJdf5LHzR_hogR6czIUzU0VV4:5039877,// AlabamaChIJG8CuwJzfAFQRNduKqSde27w:732673,// Alaska'ChIJaxhMy-sIK4cRcc3Bf7EnOUI':7276316,// Arizona'ChIJYSc_dD-e0ocR0NLf_z5pBaQ':3025891,// ArkansasChIJPV4oX_65j4ARVW8IJ6IJUYs:39237836,// CaliforniaChIJt1YYm3QUQIcR_6eQSTGDVMc:5812069,// ColoradoChIJpVER8hFT5okR5XBhBVttmq4:3605597,// ConnecticutChIJO9YMTXYFx4kReOgEjBItHZQ:1003384,// DelawareChIJvypWkWV2wYgR0E7HW9MTLvc:21781128,// FloridaChIJV4FfHcU28YgR5xBP7BC8hGY:10799566,// GeorgiaChIJBeB5Twbb_3sRKIbMdNKCd0s:1441553,// HawaiiChIJ6Znkhaj_WFMRWIf3FQUwa9A:1900923,// IdahoChIJGSZubzgtC4gRVlkRZFCCFX8:12671469,// IllinoisChIJHRv42bxQa4gRcuwyy84vEH4:6805985,// IndianaChIJGWD48W9e7ocR2VnHV0pj78Y:3193079,// Iowa'ChIJawF8cXEXo4cRXwk-S6m0wmg':2934582,// KansasChIJyVMZi0xzQogR_N_MxU5vH3c:4509394,// KentuckyChIJZYIRslSkIIYRA0flgTL3Vck:4624047,// LouisianaChIJ1YpTHd4dsEwR0KggZ2_MedY:1372247,// MaineChIJ35Dx6etNtokRsfZVdmU3r_I:6165129,// MarylandChIJ_b9z6W1l44kRHA2DVTbQxkU:6984723,// MassachussettsChIJEQTKxz2qTE0Rs8liellI3Zc:10050811,// Michigan'ChIJmwt4YJpbWE0RD6L-EJvJogI':5707390,// MinnesotaChIJGdRK5OQyKIYR2qbc6X8XDWI:2949965,// MississippiChIJfeMiSNXmwIcRcr1mBFnEW7U:6168187,// MisssouriChIJ04p7LZwrQVMRGGwqz1jWcfU:1104271,// MontanaChIJ7fwMtciNk4cRxArzDwyQJ6E:1963692,// Nebraska'ChIJcbTe-KEKmYARs5X8qooDR88':3143991,// NevadaChIJ66bAnUtEs0wR64CmJa8CyNc:1388992,// New Hampshire'ChIJn0AAnpX7wIkRjW0_-Ad70iw':9267130,// New JerseyChIJqVKY50NQGIcRup41Yxpuv0Y:2115877,// New MexicoChIJqaUj8fBLzEwRZ5UY3sHGz90:19835913,// New YorkChIJgRo4_MQfVIgRGa4i6fUwP60:10551162,// North Carolina'ChIJY-nYVxKD11IRyc9egzmahA0':774948,// North DakotaChIJwY5NtXrpNogRFtmfnDlkzeU:11780017,// Ohio'ChIJnU-ssRE5rIcRSOoKQDPPHF0':3986639,// OklahomaChIJVWqfm3xuk1QRdrgLettlTH0:4246155,// OregonChIJieUyHiaALYgRPbQiUEchRsI:12964056,// PennsylvaniaChIJD9cOYhQ15IkR5wbB57wYTh4:1095610,// Rhode Island'ChIJ49ExeWml-IgRnhcF9TKh_7k':5190705,// South CarolinaChIJpTjphS1DfYcRt6SGMSnW8Ac:895376,// South Dakota'ChIJA8-XniNLYYgRVpGBpcEgPgM':6975218,// TennesseeChIJSTKCCzZwQIYRPN4IGI8c6xY:29527941,// TexasChIJzfkTj8drTIcRP0bXbKVK370:3337975,// UtahChIJ_87aSGzctEwRtGtUNnSJTSY:645570,// VermontChIJzbK8vXDWTIgRlaZGt0lBTsA:8642274,// Virginia'ChIJ-bDD5__lhVQRuvNfbGh4QpQ':7738692,// WashingtonChIJRQnL1KVUSogRQzrN3mjHALs:1782959,// West Virginia'ChIJr-OEkw_0qFIR1kmG-LjV1fI':5895908,// WisconsinChIJaS7hSDTiXocRLzh90nkisCY:578803,// Wyoming};}initMap();
Note: The JavaScript is compiled from the TypeScript snippet.

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;}

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"></gmp-map>    </body></html>

Try Sample

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

Last updated 2025-12-18 UTC.