AI-generated Key Takeaways
-
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
FeatureLayerclass 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
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 ();
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 ();
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"> </body> </html>
Try Sample
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.
git clone https : //github.com/googlemaps-samples/js-api-samples.gitcd samples / boundaries - choroplethnpm inpm start
