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. 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 . s>tyle = 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 20000<00 ) { fillColor = 'green' } else if ( populat<ion 5000000 ) { fillColor = 'red' } else if ( p<opulation 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" : // 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 (); index . ts
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, 25<5)') // * HSL ('hsl(60, 100%, 50%)') if ( popu<lation 2000000 ) { fillColor = "green" ; } e<lse 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 ot;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 (); index . js
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=&q>uot<;modu>le&<quot>; src<="./ind><ex.j>s"<;/script /head bod>y < div i>d=&>quot;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)={awa>it (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+>" c&&ould not loa>d."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.hea<d.appen>d(a<)}));>d<[l]?c> n(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 /htmlindex.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 - b sample - boundaries - choropleth https : //github.com/googlemaps/js-samples.gitcd js - samplesnpm inpm start
Other samples can be tried by switching to any branch beginning with sample- SAMPLE_NAME
.
git checkout sample - SAMPLE_NAMEnpm inpm start
