Google Maps テンプレート（2）サイドバー表示

Abril 23, 2006 - Modificado: Abril 23, 2008 | 個別ページ

（2）サイドバー表示 - Sample

マーカー、右サイドのリンクいずれをクリックしてもフキダシを出します。地図タイプ選択ボタンを右下に、ズームコントロールを左下にしています。

・以下のテンプレート内の★印の箇所を好きなように書き換えてください。
緯度と経度はこちらのツールで割り出してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API 2  テンプレート（サイドバー）</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAAObg9xo1xsyXIuPEWNUfDxRtpul6El1X6cyOwN4vo1Y8O5IZ8BSFc3NnKFXy5SwiDvTS9xwyfBgoRA"></script>
<!-- ★前の行の「key」はグーグルから取得した独自のものに変更する -->
<!-- スタイル指定の例 -->
<style type="text/css">
body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 13px;
}
div#map {
	border: 2px outset gray;
}
div#side_bar {
	border: 1px solid #666;
	padding: 6px;
	line-height: 2;
	overflow:auto;
}
img {
	border: 0px;
}
</style>
<!-- スタイル指定おわり -->
<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>
<script type="text/javascript">_uacct ='UA-1220676-1'; urchinTracker();</script>
<!-- 前の2行はアクセス解析タグ、削除のこと -->
</head>

<body onunload="GUnload()">

<table summary="table-map">
  <tr>
    <td valign="top"><div id="map" style="width: 400px; height: 360px"></div></td>
    <td valign="top"><div id="side_bar" style="overflow:auto;width:88px;height:348px;"></div></td>
  </tr>
</table>

<p><a href="http://japonyol.net/editor/">月と六ペソ: Home</a></p>

<!-- javascriptはじまり -->
<script type="text/javascript">
//<![CDATA[

    // ===== 変更不要 =====
    if (GBrowserIsCompatible()) { 
      var side_bar_html = "";
      var gmarkers = [];
      var i = 0;

    // ===== 基礎部分、setCenterで中心位置を指定 =====
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(35.675007, 139.742746), 13); // ★ 左の現状は、国会議事堂周辺を中心に、ズームレベルは13

    // ===== マーカーとフキダシ。name がサイドバー、html がフキダシの表示内容（変更不要）=====
      function createMarker(point, name, html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers[i] = marker;
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br \/>';
        i++;
        return marker;
      }
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }

    // ===== 地点設定、前が緯度（Lat）、後が経度（Lng）=====
      // ===== ポイント１ =====
      var point = new GLatLng(35.673020, 139.742649); // ★ お好きな場所を
      var marker = createMarker(point,"官邸","首相官邸"); // 順に point, name, html ★  お好きな文章を
      map.addOverlay(marker);

      // ===== ポイント２ =====
      var point = new GLatLng(35.676149, 139.744784); // ★  お好きな場所を
      var marker = createMarker(point,"議事堂","国会議事堂"); // ★  お好きな文章を
      map.addOverlay(marker);

    // ===== サイドバー書き出し（変更不要）=====
      document.getElementById("side_bar").innerHTML = side_bar_html;
    // ====== 以上 =====

      }
//]]>
</script>
<!-- javascriptおわり -->
</body>
</html>

★　infowindow（フキダシ）の中に画像やリンクを仕込んだり、少しスタイルを凝った別のサンプルもあります。Google Earth のアイコンを使った例はコチラです。

・次は、（3）タブウィンドウ、オリジナルアイコン使用です。

Google Maps API サンプル一覧