階級区分地図を作成する

プラットフォームを選択: Android iOS JavaScript

階級区分図は、データ値に応じて行政区域が色分けまたは陰影付けされたテーマ別の地図です。google.maps.FeatureStyleFunction を使用すると、各行政区域が数値の範囲と関連付けられたデータセットに基づいて、地図のスタイルを設定できます。次の地図の例では、米国の州人口データを表す階級区分図を示しています。

この例では、データは Key-Value ペアの配列で構成され、各州の表示名と人口の数値を照合します。maps.FeatureStyleFunction は、配列の値に基づいて各地域を条件付きで色付けします。

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,
    };
};
index.ts

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,
    };
};
index.js

コードサンプルの全文

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();
index.ts

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();
index.js

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;
}

style.css

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>
index.html

サンプルを試す