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