Googleマップで高速道路を緑色にする

ALL
インターネット生活
スポンサーリンク

Googleマップでは高速道路も国道もオレンジ色で表示されます。けっこう前は高速道路が緑色でわかりやすかったのですが・・
Google Maps Platform APIキーを取得する必要がありますが、それを使用してマップを表示させると、下の画像のように高速道路を緑色に出来ます。

緑色になる高速道路は、NEXCO 3社が管理する高速道路のようです。
地図からICを探す | 高速料金・ルート検索 | NEXCO 西日本の高速道路・料金・ETC割引・渋滞情報
の青色の道路です

ただ、一部緑色にできない高速道路もあり、たとえば、島根県の浜田道が緑色になっていません。他にもあるかもしれません。

さて、高速道路を緑色する方法ですが、次のHTMLで XXXXXXXXX の箇所を Google Maps Platform APIキーにしてブラウザで表示させると、先の画像のように高速道路が緑色で表示できます。

<html>
  <head>
    <title>高速道路を緑に</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX"></script>
    <script>
      function initMap() {
        const defaultPos = { lat: 35.366, lng: 132.75 };

        const map = new google.maps.Map(document.getElementById("map"), {
          center: defaultPos,
          zoom: 8,
          styles: [
            // 背景
            { featureType: "landscape", elementType: "geometry", stylers: [{ color: "#e5e5e5" }] },
            { featureType: "poi", elementType: "geometry", stylers: [{ color: "#f7f7f7" }] },
            { featureType: "water", elementType: "geometry", stylers: [{ color: "#a4caff" }] },

            // 高速道路を緑に
            {
              featureType: "road.highway.controlled_access",
              elementType: "geometry.fill",
              stylers: [{ color: "#00cc00" }]
            },
            {
              featureType: "road.highway.controlled_access",
              elementType: "geometry.stroke",
              stylers: [{ color: "#006600" }]
            },
            {
              featureType: "road.highway.controlled_access",
              elementType: "labels.text.fill",
              stylers: [{ color: "#006600" }]
            }
          ],
        });

        // --- 現在地を取得 ---
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            (position) => {
              const userPos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude,
              };
              map.setCenter(userPos);
            },
            () => {
              console.warn("位置情報の取得が許可されていません。");
            }
          );
        } else {
          console.warn("このブラウザでは位置情報がサポートされていません。");
        }
      }
    </script>
  </head>
  <body onload="initMap()">
    <div id="map" style="width:100%; height:100vh;"></div>
  </body>
</html>

コメント