A choropleth map is a type of thematic map in which administrative areas are
colored or shaded according to a statistical range. You can use a
google.maps.FeatureStyleFunction
to style a map based on a dataset where
each administrative area is associated with a numeric value. 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 = placeFeature => { const population = states[placeFeature.feature.displayName]; 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 = { "Alabama": 5039877, "Alaska": 732673, "Arizona": 7276316, "Arkansas": 3025891, "California": 39237836, "Colorado": 5812069, "Connecticut": 3605597, "Delaware": 1003384, "Florida": 21781128, "Georgia": 10799566, "Hawaii": 1441553, "Idaho": 1900923, "Illinois": 12671469, "Indiana": 6805985, "Iowa": 3193079, "Kansas": 2934582, "Kentucky": 4509394, "Louisiana": 4624047, "Maine": 1372247, "Maryland": 6165129, "Massachusetts": 6984723, "Michigan": 10050811, "Minnesota": 5707390, "Mississippi": 2949965, "Missouri": 6168187, "Montana": 1104271, "Nebraska": 1963692, "Nevada": 3143991, "New Hampshire": 1388992, "New Jersey": 9267130, "New Mexico": 2115877, "New York": 19835913, "North Carolina": 10551162, "North Dakota": 774948, "Ohio": 11780017, "Oklahoma": 3986639, "Oregon": 4246155, "Pennsylvania": 12964056, "Rhode Island": 1095610, "South Carolina": 5190705, "South Dakota": 895376, "Tennessee": 6975218, "Texas": 29527941, "Utah": 3337975, "Vermont": 645570, "Virginia": 8642274, "Washington": 7738692, "West Virginia": 1782959, "Wisconsin": 5895908, "Wyoming": 578803, };
JavaScript
featureLayer.style = (placeFeature) => { const population = states[placeFeature.feature.displayName]; 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 = { "Alabama": 5039877, "Alaska": 732673, "Arizona": 7276316, "Arkansas": 3025891, "California": 39237836, "Colorado": 5812069, "Connecticut": 3605597, "Delaware": 1003384, "Florida": 21781128, "Georgia": 10799566, "Hawaii": 1441553, "Idaho": 1900923, "Illinois": 12671469, "Indiana": 6805985, "Iowa": 3193079, "Kansas": 2934582, "Kentucky": 4509394, "Louisiana": 4624047, "Maine": 1372247, "Maryland": 6165129, "Massachusetts": 6984723, "Michigan": 10050811, "Minnesota": 5707390, "Mississippi": 2949965, "Missouri": 6168187, "Montana": 1104271, "Nebraska": 1963692, "Nevada": 3143991, "New Hampshire": 1388992, "New Jersey": 9267130, "New Mexico": 2115877, "New York": 19835913, "North Carolina": 10551162, "North Dakota": 774948, "Ohio": 11780017, "Oklahoma": 3986639, "Oregon": 4246155, "Pennsylvania": 12964056, "Rhode Island": 1095610, "South Carolina": 5190705, "South Dakota": 895376, "Tennessee": 6975218, "Texas": 29527941, "Utah": 3337975, "Vermont": 645570, "Virginia": 8642274, "Washington": 7738692, "West Virginia": 1782959, "Wisconsin": 5895908, "Wyoming": 578803, };
Complete example code
TypeScript
function initMap() { const map = new google.maps.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', }); //@ts-ignore const featureLayer = map.getFeatureLayer(google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1); featureLayer.style = placeFeature => { const population = states[placeFeature.feature.displayName]; 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 = { "Alabama": 5039877, "Alaska": 732673, "Arizona": 7276316, "Arkansas": 3025891, "California": 39237836, "Colorado": 5812069, "Connecticut": 3605597, "Delaware": 1003384, "Florida": 21781128, "Georgia": 10799566, "Hawaii": 1441553, "Idaho": 1900923, "Illinois": 12671469, "Indiana": 6805985, "Iowa": 3193079, "Kansas": 2934582, "Kentucky": 4509394, "Louisiana": 4624047, "Maine": 1372247, "Maryland": 6165129, "Massachusetts": 6984723, "Michigan": 10050811, "Minnesota": 5707390, "Mississippi": 2949965, "Missouri": 6168187, "Montana": 1104271, "Nebraska": 1963692, "Nevada": 3143991, "New Hampshire": 1388992, "New Jersey": 9267130, "New Mexico": 2115877, "New York": 19835913, "North Carolina": 10551162, "North Dakota": 774948, "Ohio": 11780017, "Oklahoma": 3986639, "Oregon": 4246155, "Pennsylvania": 12964056, "Rhode Island": 1095610, "South Carolina": 5190705, "South Dakota": 895376, "Tennessee": 6975218, "Texas": 29527941, "Utah": 3337975, "Vermont": 645570, "Virginia": 8642274, "Washington": 7738692, "West Virginia": 1782959, "Wisconsin": 5895908, "Wyoming": 578803, }; } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.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", }); //@ts-ignore const featureLayer = map.getFeatureLayer( google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1 ); featureLayer.style = (placeFeature) => { const population = states[placeFeature.feature.displayName]; 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 = { "Alabama": 5039877, "Alaska": 732673, "Arizona": 7276316, "Arkansas": 3025891, "California": 39237836, "Colorado": 5812069, "Connecticut": 3605597, "Delaware": 1003384, "Florida": 21781128, "Georgia": 10799566, "Hawaii": 1441553, "Idaho": 1900923, "Illinois": 12671469, "Indiana": 6805985, "Iowa": 3193079, "Kansas": 2934582, "Kentucky": 4509394, "Louisiana": 4624047, "Maine": 1372247, "Maryland": 6165129, "Massachusetts": 6984723, "Michigan": 10050811, "Minnesota": 5707390, "Mississippi": 2949965, "Missouri": 6168187, "Montana": 1104271, "Nebraska": 1963692, "Nevada": 3143991, "New Hampshire": 1388992, "New Jersey": 9267130, "New Mexico": 2115877, "New York": 19835913, "North Carolina": 10551162, "North Dakota": 774948, "Ohio": 11780017, "Oklahoma": 3986639, "Oregon": 4246155, "Pennsylvania": 12964056, "Rhode Island": 1095610, "South Carolina": 5190705, "South Dakota": 895376, "Tennessee": 6975218, "Texas": 29527941, "Utah": 3337975, "Vermont": 645570, "Virginia": 8642274, "Washington": 7738692, "West Virginia": 1782959, "Wisconsin": 5895908, "Wyoming": 578803, }; } window.initMap = 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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBn0q_XQID1-QN1HeNAE1IwhUbM1S-dH2U&callback=initMap&v=beta" defer ></script> </body> </html>