Kobarin's Development Blog

C#やASP.NETなどについての記録です。

HTML＋JavaScriptだけで、URLパラメータ（QueryString）による座標などを指定できるGoogleマップのページ

Google Maps Google JavaScript

Googleマップのページは便利ですが、ページを沢山作ると後々メンテナンスが大変ですね。
今回も、GoogleMapsがv2からv3に移行して苦労した人も多いのでは。
ということで、単に動的なMAPを表示するだけのページなら、メンテナンス性を考え、できるだけ1つにまとめたい…とウェブ担当者なら誰でも考えるはず。


要は、画面いっぱいに地図を表示するページを1つ作っておき、それを地図が必要なページからiframeで呼び出せばよいだけです。


中心地点を表示するGoogle公式サンプル
をベースに、パラメータで座標とズームレベルを指定するサンプルを以下に示します。
極論、コピペするだけで実現できます。「良い時代になったものだ(・∀・)」

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title></title>
  <style type="text/css">
    html, body
    {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #gmap
    {
      height: 100%;
    }
    @media print
    {
      html, body
      {
        height: auto;
      }
      #gmap
      {
        height: 650px;
      }
    }
  </style>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() {
      var lat = 35.681382, lng = 139.766084, zoom = 14;  //デフォルト座標＆ズームレベル

      //QueryStringを取得
      var QS = new Array;
      if (location.search.length > 1) {
        var m_Array = location.search.substr(1).split("&");
        for (idx in m_Array) {
          QS.push(m_Array[idx].split("="));
        }
        for (idx in QS) {
          var qsvalue = QS[idx][1];
          switch (QS[idx][0]) {
            case "lat": lat = qsvalue; break;
            case "lng": lng = qsvalue; break;
            case "zm": zoom = qsvalue; break;
            default: break;
          }
        }
      }

      var myLatlng = new google.maps.LatLng(lat, lng);
      var myOptions = {
        zoom: eval(zoom),
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("gmap"), myOptions);
      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: ""
      });
    }
  </script>

</head>
<body onload="initialize()">
  <div id="gmap"> </div>
</body>
</html>

で、このページを親ページ（例えば店舗案内、アクセスマップなどのページ）からこんな感じで呼び出すだけです。

<html>
<head></head>
<body>
<iframe src="map.htm?lat=34.701980&lng=135.495320&zm=10" width="500" height="400"></iframe>
</body>
</html>