Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Make a choropleth map

  • This example demonstrates a choropleth map using the Maps JavaScript API to visualize US state population data.

  • State boundaries are styled with different colors based on population ranges, providing a clear visual representation of population density.

  • The map uses the FeatureLayer class to apply styles to administrative areas, enhancing the visualization of geographic data.

  • The sample code is available in both TypeScript and JavaScript, allowing developers to choose their preferred language.

  • Users can interact with the map, zooming and panning to explore different regions and their corresponding population data.

This example map shows a choropleth map depicting state population data for the United States.

Read the documentation.

[フレーム]

TypeScript

asyncfunctioninit(){
// 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(
'ADMINISTRATIVE_AREA_LEVEL_1'
);
featureLayer.style=(
featureStyleFunctionOptions:google.maps.FeatureStyleFunctionOptions
)=>{
constplaceFeature=
featureStyleFunctionOptions.featureasgoogle.maps.PlaceFeature;
constpopulation=states[placeFeature.placeId];
letfillColor:string|undefined;
// 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:Record<string,number>={
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
};
}
voidinit();

JavaScript

asyncfunctioninit(){
// 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(
'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,// 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
};
}
voidinit();

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>
 <script>
 // prettier-ignore
 (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: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <gmp-map
 center="40.76,-101.64"
 zoom="5"
 map-id="8b37d7206ccf01219cd548d3"></gmp-map>
 </body>
</html>

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. 

gitclonehttps://github.com/googlemaps-samples/js-api-samples.git
cdsamples/boundaries-choropleth
npmi
npmstart

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 2026年09月01日 UTC.