Google Maps APIを利用して表示するGoogleマップで、各種コントローラーの表示・非表示の設定をします。
html、css、Googleマップのコントローラーの設定以外のjavascriptは下記の記事と同様です。
javascriptのコードです。上記の記事から下記の設定を追加しています。
fullscreenControl: false //マップを全画面モードで表示するボタンを非表示
streetViewControl: false //ストリートビューに切り替えるボタンを非表示
scaleControl: true //地図のスケールを表示(デフォルトは非表示)
mapTypeControl: false //地図と航空写真を切り替えるボタンを非表示
mapTypeId: google.maps.MapTypeId.TERRAIN //マップタイプを地形情報に設定(デフォルトはROADMAP)
scrollwheel: false //マウスホイールの拡大・縮小を無効化
なお、zoomControlをfalseに設定すると拡大・縮小ボタンを非表示にすることが可能です。今回はデフォルトのまま表示させています。
function initMap() {
var latlng = new google.maps.LatLng(35.6843218, 139.70311200000003); //中心の緯度, 経度
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 17,
center: latlng,
fullscreenControl: false, //マップを全画面モードで表示するボタンを非表示
streetViewControl: false, //ストリートビューに切り替えるボタンを非表示
scaleControl: true, //地図のスケールを表示(デフォルトは非表示)
mapTypeControl: false, //地図と航空写真を切り替えるボタンを非表示
mapTypeId: google.maps.MapTypeId.TERRAIN, //マップタイプを地形情報に設定
scrollwheel: false //マウスホイールの拡大・縮小を無効化
});
var marker = new google.maps.Marker({
position: latlng, //マーカーの位置(必須)
map: map //マーカーを表示する地図
});
}