3D 地図モード

Maps JavaScript API では、次の 3D 地図モードを使用できます。

  • ROADMAP は、基本地図のラベルが付いたデフォルトの道路地図ビューを表示します。
  • SATELLITE は、航空写真に基づいたフォトリアリスティックな地図を表示します。
  • HYBRID は、基本地図のラベルが付いた航空写真地図ビューを表示します。

ROADMAP モードの 3D 地図の例を次に示します。

TypeScript

async function init() {
  const { Map3DElement } = await google.maps.importLibrary('maps3d');

  const map = new Map3DElement({
    center: {
      lat: 37.79334535092104,
      lng: -122.400742086205,
      altitude: 0,
    },
    range: 2400,
    tilt: 65,
    heading: 0,
    mode: 'ROADMAP',
    internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
  });

  document.body.append(map);

  // Create the controls container
  const controls = document.createElement('div');
  controls.id = 'controls';
  controls.classList.add('map-mode-control');

  // Create the select element
  const selector = document.createElement('select');
  selector.id = 'map-mode';

  const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
  modes.forEach((modeName) => {
    const option = document.createElement('option');
    option.value = modeName;
    option.textContent = modeName;
    if (modeName === 'ROADMAP') {
      option.selected = true;
    }
    selector.appendChild(option);
  });

  selector.addEventListener('change', (event) => {
    map.mode = (event.target as HTMLSelectElement).value;
  });

  controls.appendChild(selector);
  document.body.appendChild(controls);
}

init();
index.ts

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');
    const map = new Map3DElement({
        center: {
            lat: 37.79334535092104,
            lng: -122.400742086205,
            altitude: 0,
        },
        range: 2400,
        tilt: 65,
        heading: 0,
        mode: 'ROADMAP',
        internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
    });
    document.body.append(map);
    // Create the controls container
    const controls = document.createElement('div');
    controls.id = 'controls';
    controls.classList.add('map-mode-control');
    // Create the select element
    const selector = document.createElement('select');
    selector.id = 'map-mode';
    const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
    modes.forEach((modeName) => {
        const option = document.createElement('option');
        option.value = modeName;
        option.textContent = modeName;
        if (modeName === 'ROADMAP') {
            option.selected = true;
        }
        selector.appendChild(option);
    });
    selector.addEventListener('change', (event) => {
        map.mode = event.target.value;
    });
    controls.appendChild(selector);
    document.body.appendChild(controls);
}
init();
index.js

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

gmp-map-3d {
  height: 100%;
  width: 100%;
}

.map-mode-control {
  position: fixed;
  bottom: 24px;
  right: 75px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  z-index: 1;
}

.map-mode-control select {
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  background-color: white;
  color: #3c4043;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.map-mode-control select:hover {
  border-color: #1a73e8;
}

.map-mode-control select:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

style.css

HTML

<html>

<head>
  <title>3d-map-roadmap</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: "alpha" });</script>
</head>

<body>
</body>

</html>
index.html

サンプルを試す

主な特典

  • 地球儀: 抽象的な地図画像とフォトリアリスティックな地図画像を組み合わせて、さまざまなユースケースに対応する完全な地図エクスペリエンスを提供できるようになりました。
  • カスタマイズ: カスタムボタンまたは関数を使用して、コンポーネント全体を再読み込みすることなくモードを切り替えられるようになりました。