読者です 読者をやめる 読者になる 読者になる

Hope is a Dream. Dream is a Hope.

非公開ふぃふぃ工房ブログ

↓LINE登録はこちら↓

定期的につぶやいてます. 記事に興味を持って頂いたかたや、Line Botを使ってみたいかたは試しに登録どうぞ

友だち追加

googleMapsAPIにて、ユーザ操作を無効にしたい。

数値計算 Javascript WEB

googleMapsAPIにて、ユーザ操作を無効にしたい。  

どうゆうこっちゃ。

つまり

ズームやら移動やらを無効にして、常に地図を固定しておきたいのだけど。。。

やりかたがわから

人力検索に聞いてみた

google map api を使って、webサイト内に地図を配置しようと考えております。  
その際、使用者が地図を操作?(ズームや移動)できないようにするにはどうしたよいのか悩んでおります。  
このような自分で検索することすらままならない素人ですが、なにかヒントでもいただけると幸いです。
どなたかご教授のほどどうかよろしくお願いいたします。

すると、すばやく返信をいただけた。

1. APIのデフォルトのUI設定をオフにする

コントロール - Google Maps JavaScript API v3 — Google Developers

API のデフォルトの UI 設定をオフにする場合は、  
Map の disableDefaultUI プロパティ(Map options オブジェクト内)を true に設定します。  
このプロパティは、Google Maps API のすべての自動の UI 動作を無効にします。

2. さらに細かい設定

  • panControl:
    移動コントロールの有効/無効を設定します。
    このコントロールは、デフォルトでは地図の左上隅に表示されます。さらに、panControlOptions フィールドはこのコントロールで使用する PanControlOptions を指定します。

  • zoomControl:
    ズーム コントロールの有効/無効を設定します。
    このコントロールは、デフォルトでは地図の左上隅に表示されます。さらに、zoomControlOptions フィールドはこのコントロールで使用する ZoomControlOptions を指定します。

  • scaleControl:
    シンプルな地図縮尺を表示するスケールコントロールの有効/無効を設定します。
    このコントロールは、デフォルトでは表示されません。有効にすると、地図の左下隅に表示されます。さらに、scaleControlOptions はこのコントロールで使用する ScaleControlOptions を指定します。

等のオプションがあります。組み合わせてお使いください。

3. イベントリスナーでの対応

 あと、イベントリスナーでの無理矢理な対応として以下が上げられます。

Google Maps Javascript API V3 Reference - Google Maps JavaScript API v3 — Google Developers

まず、

  • google.maps.event.clearListeners(map,"click")関数でマップへのクリックを止めます。 同様に

  • google.maps.event.clearListeners(map, "zoom_changed")関数でマップのズームを止めます。

※mapはgoogle.maps.Mapクラスのインスタンスです。

お礼

sasadaさんご回答ありがとうございました。