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

表示例

表示例です。