このページでは、MapクラスのオプションであるoverviewMapControlOptionsの説明をしています。
MapクラスのoverviewMapControlOptionsは、オーバービューマップコントロールのスタイルを制御するオプションです。オプションとなるオブジェクトを指定することで、スタイルを調整することができます。2015年9月現在は、開閉状態を指定するopenedしか、ありません。単純に、{ opened: true }を指定すれば、初期から、オーバービューマップコントロールを開いた状態にすることができます。なお、オーバービューマップコントロールは、別途、overviewMapControlをtrueにしておかないと実装されません。
overviewMapControlOptionsに指定できる値の説明です。
| 値 | 説明 |
|---|---|
| { opened: true } | 開いた状態 |
| { opened: false } | 閉じた状態 |
上の地図はoverviewMapControlOptionsの値に{ opened: true }を指定した例です。オーバービューマップコントロールが、初期から開いているのを確認して下さい。
map.js
// グローバル変数の定義
var map = null ; // 地図のインスタンス
// 地図の出力
function initialize()
{
/* 変数の定義 */
var canvas , latlng , mapOptions ;
/* キャンパスの要素[<div id="map-canvas"></div>]を取得する */
canvas = document.getElementById( 'map-canvas' );
/* 中心座標を、LatLngクラスで用意する */
latlng = new google.maps.LatLng( 35.2477839,136.0689719 );
/* Mapクラスのオプションを設定する */
mapOptions = {
zoom: 15 , //ズーム値
center: latlng , //中心座標 [LatLngクラスで指定]
overviewMapControl: true , // オーバービューマップコントロール
overviewMapControlOptions: { opened: true } , // オーバービューマップコントロールの初期状態
} ;
/* Mapクラスのインスタンスを作成する */
map = new google.maps.Map( canvas , mapOptions ) ;
}
/* ページのロード後に関数[initialize()]を実行する */
google.maps.event.addDomListener( window , 'load' , initialize ) ;map.html
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript APIのサンプルデモ</title>
<link rel="stylesheet" href="./map.css">
</head>
<body>
<!-- 地図のキャンパス -->
<div class="map-embed">
<div id="map-canvas"></div>
</div>
<!-- JavaScriptの読み込み -->
<script src="//maps.googleapis.com/maps/api/js"></script>
<script src="./map.js"></script>
</body>
</html>map.css
/* 地図のキャンパスを囲む要素 */
.map-embed
{
position: relative ;
top: 0 ;
left: 0 ;
margin: 2em auto 0 ;
padding: 0 0 67.5% ;
width: 100% ;
height: 0 ;
background: #f2f2f2 ;
}
div._embed-5625
{
padding: 0 0 56.25% ;
}
/* 地図のキャンパス */
.map-embed > div
{
position: absolute ;
top: 0 ;
left: 0 ;
width: 100% ;
height: 100% ;
margin: 0 ;
padding: 0 ;
}
/* 表示崩れを防ぐ */
.map-embed img
{
max-width: none ;
}