ボタン形式のマップタイプ選択コントロール
広告
このページに記載されている内容はGoogle Maps API V2用のものであり、最新バージョンのものとは違います。ご注意下さい。
マップタイプを選択するコントロールは3つありますが、GMapTypeControlコントロールはマップタイプ毎にボタンを配置しマップタイプを選択できるコントロールです。GMapTypeControlクラスのコンストラクタ関数は次のようになっています。
GMapTypeControl(useShortNames?:Boolean)
GMapTypeControl を作成します。useShortNames が true に設定されている場合 は、短縮 (alt) 名を使用し、デフォルトでは正式名を使用します。
使用するマップタイプとして設定されているマップタイプ毎にボタンを作成し表示します。ボタンをクリックすることで地図に使用するマップタイプを切り替えることが可能です。省略可能な1番目の引数にtrueを設定すると、正式名の代わりに短縮された名前をボタンに表示します。
このコントロールを追加するには次のように記述します。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.172304,136.908306), 15);
map.addControl(new GMapTypeControl());
GMapTypeControlクラスのオブジェクトを作成し、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 GMapTypeControl());
}
}
<!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/code4_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