ドロップダウン形式のマップタイプ選択コントロール
広告
このページに記載されている内容はGoogle Maps API V2用のものであり、最新バージョンのものとは違います。ご注意下さい。
GMenuMapTypeControlコントロールは選択可能なマップタイプをドロップダウン形式で表示するコントロールです。GMenuMapTypeControlクラスのコンストラクタ関数は次のようになっています。
GMenuMapTypeControl(useShortNames?:Boolean)
GMenuMapTypeControl を作成します。useShortNames が true に設定されている 場合は、短縮 (alt) 名を使用し、デフォルトでは正式名を使用します。
使用するマップタイプとして設定されているマップタイプをドロップダウン形式で表示します。現在表示されているマップタイプの横に表示された矢印をクリックするとドロップダウンメニューが表示され他のマップタイプを選択することができます。省略可能な1番目の引数にtrueを設定すると、正式名の代わりに短縮された名前をボタンに表示します。
このコントロールを追加するには次のように記述します。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.172304,136.908306), 15);
map.addControl(new GMenuMapTypeControl());
GMenuMapTypeControlクラスのオブジェクトを作成し、addControlメソッドを使ってコントロールを追加して下さい。
サンプル
では実際に試してみます。
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(38.074987,138.441467), 11);
map.addControl(new GMenuMapTypeControl());
}
}
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>サンプル：ドロップダウン形式のマップタイプ選択コントロール</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
type="text/javascript" charset="utf-8"></script>
<script src="./js/code5_1.js" type="text/javascript"></script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 400px"></div>
</body>
</html>
ではブラウザで上記のURLを見てみます。
地図の右上に現在選択されているマップタイプが表示されています。その横に表示されている矢印をクリックすると、使用可能なマップタイプがメニューとして登録されたドロップダウンメニューが表示されます。
メニュー表示されたマップタイプのいずれかをクリックすると、マップタイプが切り替わります。
( Written by T.buzz.Ikura+ )
Facebook Page