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