GoogleMapsJavaScriptAPIでCameraControlを無効にする方法

2025年3月、久しぶりに自作の「氷点下コーラの全国マップ」を開いたら、地図の右側に見覚えのない丸いボタンが増えていました。

コードは何も変えていません。

調べると、Maps JavaScript APIの更新で「カメラコントロール」が既定で表示されるようになっていました。

この記事では、なぜコードを変えていないのに表示が変わったのかと、cameraControl: falseで非表示にした手順をまとめます。

忙しい人向け

• google.maps.MapのオプションにcameraControl: falseを足すと、カメラコントロールは消えます（公式ガイド）
• ズームボタン（＋／－）はzoomControlで別に指定できるので、ズームボタンだけ残すこともできます

前提条件

• Maps JavaScript APIで地図を表示している
• APIの読み込みでweeklyチャネルを使っている
• 地図のコントロールをfullscreenControlやzoomControlで個別に指定している

発生環境

• macOS／Google Chrome
• Vue: 3.4.30（Vue CLI 5で作成）
• @googlemaps/js-api-loader: 1.16.6
• Maps JavaScript API: weeklyチャネル
• 気づいた時期: 2025年3月

※ バージョンはマップのソースのpackage-lock.jsonで確かめた値です。

問題発生時のファイル構成（例）

src/
└─ components/
   └─ MainContent.vue   # 地図の初期化をここで行っていた

症状

地図の右側に、上下左右の矢印が入った丸いボタンが表示されるようになりました。

赤枠で囲ったのがカメラコントロールです。

その上の照準のようなボタンは、現在地へ移動するために自分で追加したボタンで、Google Mapsの標準のコントロールではありません。

下には、もともと出していたペグマン（ストリートビュー）とズームボタン（＋／－）もそのまま残っています。

このときの地図の初期化は次のとおりです。

Vueで使うため、@googlemaps/js-api-loaderでAPIを読み込んでいます。

loader = new Loader({
  apiKey: process.env.VUE_APP_GOOGLE_API_KEY,
  version: "weekly",
  language: "ja",
  libraries: ["marker"],
});

loader.load().then((google) => {
  vm.map = new google.maps.Map(document.getElementById("map"), {
    mapId: "<mapID>",
    zoom: 10,
    center: { lat: 35.681236, lng: 139.767125 },
    fullscreenControl: true, // 全画面表示のコントロール
    mapTypeControl: true, // 地図／航空写真の切り替え
    zoomControl: true, // ズームボタン
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_BOTTOM,
    },
  });
});

カメラコントロールについては、何も書いていません。

原因

調べていたら、GOGAさんのブログにカメラコントロールが登場したという記事がありました。

公式のリリースノートでも確かめると、2025年2月20日の3.60.1で、既定のズームコントロールがカメラコントロールに置き換わっていました。

カメラコントロールは、パン（上下左右の移動）とズームのボタンを1つにまとめたコントロールです。

その半年前の2024年8月22日（3.58.1a）にはbetaチャネルで先に入っていて、cameraControlとcameraControlOptionsもそのときに追加されています（リリースノートのアーカイブ）。

氷点下コーラの全国マップはLoaderでversion: "weekly"を指定していたので、2025年2月の更新がそのまま入ってきました。

weeklyは毎週更新される最新版のチャネルなので、コードを変えていなくても、読み込むAPIのほうが変わります。

「久しぶりに開いたら増えていた」のは、このためでした。

cameraControlを指定していない地図では、カメラコントロールが既定で表示されます。

今回はzoomControl: trueも指定していたので、カメラコントロールとズームボタンの両方が並んでいました。

対処手順

手順1: cameraControl: falseを足す

地図のオプションにcameraControl: falseを1行足します。

vm.map = new google.maps.Map(document.getElementById("map"), {
  mapId: "<mapID>",
  zoom: 10,
  center: { lat: 35.681236, lng: 139.767125 },
  fullscreenControl: true,
  mapTypeControl: true,
  zoomControl: true,
  zoomControlOptions: {
    position: google.maps.ControlPosition.RIGHT_BOTTOM,
  },
  cameraControl: false, // カメラコントロールを非表示にする
});

公式のコントロールのガイドでも、各コントロールはtrue／falseで表示・非表示を切り替えられると説明されています。

cameraControlにfalseを指定すると、地図の大きさにかかわらず表示されません。

手順2: 前後を比べて確かめる

変更後に地図を開き、変更前のスクリーンショットと比べました。

丸いボタンが消え、ズームボタンはそのまま残っています。

ほかの方法との比較

消す以外にも、いくつか方法があります。

• cameraControlOptionsで位置を変える

  カメラコントロールを残したまま、positionで表示する場所を変えられます。

  パン操作のボタンを使ってほしい地図なら、こちらが向いています。

• disableDefaultUI: trueを指定する

  既定のコントロールがまとめて消えます。

  ほかのコントロールも個別に出し直す必要があるので、1つだけ消したいときはcameraControl: falseのほうが手軽です。

• versionを固定する

  weeklyではなくバージョン番号を指定すると、変更が入る時期を自分で選べます。

まとめ

コードを変えていないのに地図の見た目が変わったのは、weeklyチャネルで読み込んでいたAPIのほうが更新されたからでした。

同じマップでは、以前にもInfoWindowのヘッダー行の追加で似たことが起きています（GoogleMapsJavaScriptAPIのInfoWindowの余白を消す方法）。

weeklyを使うなら、リリースノートをときどき確認しておくと、こうした変化に早く気づけます。

なお、氷点下コーラの全国マップは、その後2025年8月にOpenStreetMapへ移行し、2026年9月に閉鎖しました。

この記事は、Google Mapsを使っていた当時の記録です。

参考リンク

• Maps JavaScript APIリリースノート
• Maps JavaScript APIリリースノート（アーカイブ）
• コントロール（Maps JavaScript APIガイド）
• 新たにカメラコントロールが登場（GOGAブログ）