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.
TypeScript
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 } }
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 , }; };
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 ();
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 ();
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>
