【マップ】Googleマップの各種コントローラーの設定

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 //マーカーを表示する地図
	});
}

タイトルとURLをコピーしました