Yahoo!地図との切り替え表示
ここでは、Yahoo!地図APIを使った地図サービスと、Google Maps API地図サービスを両方使いつつ、表示する地図をselectフォームで切り替える方法を説明します。
サンプル
以下のサンプルはGoogle MAPS APIとYahoo!地図APIを使ったページのソースです。 あまり複雑な事はしておらず、CSSのz-indexの値を変更しているだけです。
地図APIキー部分に、それぞれ適切な値を代入してご利用下さい。
<html>
<head>
<script type="text/javascript"
src="http://map.yahooapis.jp/MapsService/js/V2/?appid=○○○"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=○○○○"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
window.onload = function() {
var ymap = new YahooMapsCtrl("ymap");
var gmap = new GMap2(document.getElementById("gmap"));
gmap.setCenter(new GLatLng(37.441944, -122.141944), 13);
}
function changemap()
{
var sel = document.getElementById("sel");
var n = sel.selectedIndex;
var value = sel.options[n].value;
switch (n) {
case 0:
showid = 'ymap';
hideid = 'gmap';
break;
case 1:
showid = 'gmap';
hideid = 'ymap';
break;
default:
return;
}
var show = document.getElementById(showid);
var hide = document.getElementById(hideid);
hide.style.zIndex = "1";
show.style.zIndex = "200";
}
</script>
</head>
<body>
<p>
<select id="sel" onChange="changemap()">
<option value="ymap" selected>Yahoo!地図
<option value="gmap">Google Maps
</select>
</p>
<div style="position:relative;width:280px;height:280px;text-align:left;">
<div id="ymap" style="position:absolute;width:280px;height:280px;z-index:200;"></div>
<div id="gmap" style="position:absolute;width:280px;height:280px;z-index:1;"></div>
</div>
</body>
上記サンプルコードでは、Google Maps側がgmapというidのdivとして記述され、Yahoo!地図側がymapというidのdivとして記述されています。 new YahooMapsCtrlとnew GMap2の引数にそれぞれのidが指定してあるのがポイントです。 それらはのdiv、position:relativeのdivに入っています。
地図切り替えのトリガーはselectフォームによって発生します。 selectフォームで地図タイプ選択が変更されたときにchangemap()というfunctionが呼び出されます。 changemap()の中で、gmapとymapに対するzIndexが変更され、地図の上下関係が変更されます。
表示例
表示例です。
