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が変更され、地図の上下関係が変更されます。

表示例

表示例です。