Google Maps V3のコントロールボタンのカスタマイズ

Google Maps V3のコントロールボタンのカスタマイズは以下の方法で行う。

■コントロールボタンの種類の変更

拡大縮小ボタンをiPhone等のスマートフォン向きなものに変更したい時は

navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}

Androidの標準ボタンにしたい時は

navigationControlOptions: {
style: google.maps.NavigationControlStyle.ANDROID
}

■コントロールボタンの位置

各コントロールボタンの表示位置は簡単に変更できる。

最上部

position:google.maps.ControlPosition.TOP_LEFT
position: google.maps.ControlPosition.TOP_CENTER
position:google.maps.ControlPosition.TOP_RIGHT

上部

position: google.maps.ControlPosition.LEFT_TOP
position: google.maps.ControlPosition.RIGHT_TOP

中央部

position: google.maps.ControlPosition.LEFT_CENTER
position: google.maps.ControlPosition.RIGHT_CENTER

下部

position: google.maps.ControlPosition.LEFT_BOTTOM
position: google.maps.ControlPosition.RIGHT_BOTTOM

最下部

position:google.maps.ControlPosition.BOTTOM_LEFT
position: google.maps.ControlPosition.BOTTOM_CENTER
position:google.maps.ControlPosition.BOTTOM_RIGHT

最上部と上部、下部と最下部は微妙に位置が違う

例えば、マップタイプのコントロールボタンを左上にしたい時は

mapTypeControlOptions: {
position:google.maps.ControlPosition.TOP_LEFT
},

拡大縮小ボタンを右下にしたい時は

navigationControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT,
}

■コントロールボタンの表示・非表示

ストリートビューのコントロールボタンを非表示にしたい時は

streetViewControl: false,

マップタイプのコントロールボタンを非表示にしたい時は

mapTypeControl: false,

何もコントロールボタンを表示したくない時は

disableDefaultUI: true,

■サンプルコード

<script type="text/javascript">// <![CDATA[
function attachMessage(marker, msg) {
	google.maps.event.addListener(marker, 'click', function(event) {
	  new google.maps.InfoWindow({
		content: msg
	  }).open(marker.getMap(), marker);
	});
  }
  var data = new Array();
  var myMap = new google.maps.Map(document.getElementById('map'), {
	zoom: 15,
	center: new google.maps.LatLng(26.731889,128.168945),
	streetViewControl: false,
	mapTypeControl: false,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	navigationControlOptions: {
		position: google.maps.ControlPosition.TOP_LEFT,
      style: google.maps.NavigationControlStyle.SMALL
    }
  });
  for (i = 0; i <data.length; i++) {
	var myMarker = new google.maps.Marker({
	  position: data[i].position,
	  map: myMap
	});
	attachMessage(myMarker, data[i].content);
  }
// ]]></script>

Related posts: