Google Maps APIを使って地図の操作ができないように制御する方法

Google Maps APIを使って地図の操作ができないように制御する方法

Google Maps APIを使って地図の操作ができないように制御する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイトにGoogleマップを埋め込む時に、地図の切り替えやズームなどの地図を操作するボタンを無効化する方法をご紹介いたします。

ついでにマウスホイールによる拡大・縮小も無効化して、サイト閲覧者が地図を操作できないようにしてみたいと思います。

スポンサードリンク

Googleマップに表示可能な操作ボタンの種類

Googleマップに表示可能な操作ボタンの種類は、以下の通りです。

mapTypeControll 地図タイプ
overviewMapControl 詳細地図(デフォルトでは非表示)
panControl 位置の移動
RotateControl 地図の回転
scaleControll 地図の縮尺(デフォルトでは非表示)
streetViewControl ストリートビュー
zoomControl 地図の拡大・縮小

最初から表示されるものと、有効にしないと表示されないものがあります。

Google Maps APIを使って地図の操作ができないように制御する方法

ステップ1. APIキーの取得

まずは、Google Maps APIを利用するために、Google Maps APIでAPIキーを取得します。

APIキーの取得方法につきましては、こちらの記事をご参照ください。

ステップ2. APIの読み込みと地図表示用タグの設置

<head>~</head>内に以下のコードを記述します。

<script src="//maps.google.com/maps/api/js?key=【APIキー】"></script>

【APIキー】には、Google Maps APIで取得したAPIキーを入れてください。

続いて、bodyに「onload=”initialize();”」を追加します。

<body onload="initialize();">

Googleマップを表示したい場所に以下を記述します。

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

CSSで横幅と高さを指定します。

#campus-map {
  width: 100%;
  height: 300px;
}
ステップ3. 地図の操作を無効化するスクリプトの実行

地図の操作を無効化して表示するために、以下のようなスクリプトを追加します。

<script>
function initialize() {
  var latlng = new google.maps.LatLng(35.710071, 139.810679);
  var myOptions = {
    zoom: 15,
    center: latlng,
    scrollwheel: false,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('campus-map'), myOptions);
 
  //マーカー
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'スカイツリー'
  });
}
</script>

「disableDefaultUI: true」ですべての操作ボタンを無効化し、「scrollwheel: false」でマウスホイールによる拡大・縮小を無効化しています。

「disableDefaultUI: true」だと、すべての地図操作ボタンが無効化されますが、それぞれのボタンを個別に無効化することも可能です。例えば、地図タイプの場合は「mapTypeControl: false」と指定すればOKです。

あとがき

Google Maps APIを使うと、地図を色々とカスタマイズできて面白いですね。

Googleマップのカスタマイズについては、オリジナルのマーカーを表示する方法地図をグレースケールにする方法も紹介していますので、よかったらご参照いただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。