Google Mapのリファレンスサイト

地図を表示する・見た目（UI）のはなし

·

ぽち

まずはご自身のキーで地図を表示してみましょう。
キーが入っているのにエラーになる原因は、ほぼ「ウェブサイトの制限」に引っかかっているものと思われます。

デフォルトで地図を表示する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Google Maps表示サンプル</title>
<style>
  /* 地図表示するエリアを設定 */
  #map {
    height: 350px;
    width: 750px;
  }
  body, html {
    margin: 10 auto;
    padding: 0;
    height: 100%;
  }
</style>
</head>
<body>

<div id="map"></div>

<script>
  function initMap() {
    const tokyo = { lat: 35.681236, lng: 139.767125 }; // 東京駅の座標
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 15,
      center: tokyo,
    });
  }
</script>

<!-- ここにAPIキーを差し替えてください -->
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

</body>
</html>

MapOptions（UI）は非表示にすることができます。

<script>
  function initMap() {
    const tokyo = { lat: 35.681236, lng: 139.767125 }; // 東京駅の座標
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 15,
      center: tokyo,
      mapTypeControl: true,         // 地図タイプ切り替え（地図 / 航空写真）
      zoomControl: true,            // ＋／− ズームボタン
      streetViewControl: true,      // ストリートビュー
      rotateControl: true,          // 回転ボタン（45度表示のとき）
      scaleControl: true,           // 地図の縮尺（スケールバー）
      fullscreenControl: true,      // フルスクリーン切替ボタン
      clickableIcons: true,         // POI（施設など）のクリック有効化（falseで無効）
      disableDefaultUI: true       // true にすると全UI非表示
    });
  }
</script>

Google Maps に UI コントロールのON/OFFを切り替えるチェックボックス付き

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Google Map UIコントロール切り替えデモ</title>
  <style>
    #map {
    height: 350px;
    width: 750px;
    }
    #controls {
      margin: 10px 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
  </style>
</head>
<body>

<h2>Google Map UIコントロール切り替えデモ</h2>

<div id="controls">
  <label><input type="checkbox" id="mapTypeControl" checked> 地図タイプ切替</label>
  <label><input type="checkbox" id="streetViewControl"> ストリートビュー</label>
  <label><input type="checkbox" id="zoomControl" checked> ズームボタン</label>
  <label><input type="checkbox" id="scaleControl"> スケールバー</label>
  <label><input type="checkbox" id="clickableIcons"> POIクリック無効化</label>
</div>

<div id="map"></div>

<script>
  let map;

  function initMap() {
    const options = {
      center: { lat: 35.6812, lng: 139.7671 }, // 東京駅付近
      zoom: 15,
      mapTypeControl: document.getElementById('mapTypeControl').checked,
      streetViewControl: document.getElementById('streetViewControl').checked,
      zoomControl: document.getElementById('zoomControl').checked,
      scaleControl: document.getElementById('scaleControl').checked,
      clickableIcons: document.getElementById('clickableIcons').checked,
    };
    map = new google.maps.Map(document.getElementById('map'), options);
  }

  // 各チェックボックスでオプションを更新
  const controls = ['mapTypeControl', 'streetViewControl', 'zoomControl', 'scaleControl', 'clickableIcons'];
  controls.forEach(id => {
    document.getElementById(id).addEventListener('change', () => {
      const options = {};
      controls.forEach(k => {
        options[k] = document.getElementById(k).checked;
      });
      map.setOptions(options);
    });
  });
</script>
<!-- ここにAPIキーを差し替えてください -->
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

</body>
</html>