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>
 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク