Stay organized with collections Save and categorize content based on your preferences.
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.
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
}
}Note: Read the guide on using TypeScript and Google Maps. 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,
};
};
Important: The feature styling function must create predictable output. For example, if you want to create an example that applies a random color, your code must do the random parts outside of FeatureStyleFunction. 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();Note: Read the guide on using TypeScript and Google Maps. 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();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.
*/
#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>
</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> Try Sample
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-07-09 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-09 UTC."],[[["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."]]],[]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4