« Google Maps テンプレート（2）サイドバー表示 Google Maps テンプレート（4）Polylines、OverviewMapControl »

Google Maps テンプレート（3）タブウィンドウ、オリジナルアイコン使用

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

（3）タブウィンドウ、オリジナルアイコン使用 - Sample

GInfoWindowTab（タブのインフォウィンドウ）と、オリジナルのアイコンを使用。地図タイプ選択ボタンはひとつだけにしています。
アイコンのサンプルはこちらにも用意しています。

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

<!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 src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=キー"
            type="text/javascript"></script>

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

    // ============アイコン指定=============
	var icon = Array();
	icon[0] = new GIcon();
	icon[0].image = "./img/mano.png"; //★ オリジナルのアイコンの場所
	icon[0].iconSize = new GSize(20,34);
	icon[0].iconAnchor = new GLatLng(17,10);
	icon[0].infoWindowAnchor = new GLatLng(17,10);

	icon[1] = new GIcon();
	icon[1].image = "./img/pin.png"; //★ オリジナルのアイコンの場所
	icon[1].iconSize = new GSize(20,34);
	icon[1].iconAnchor = new GLatLng(17,10);
	icon[1].infoWindowAnchor = new GLatLng(17,10);
    // ==============以　上==============

    function load() {
      if (GBrowserIsCompatible()) { 

    // ============マーカーとフキダシ（変更不要）===============
      function createTabbedMarker(point,html1,html2,label1,label2,n) {
        var marker = new GMarker(point,icon[n]);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]);
        });
        return marker;
      }
    // ==============以　上==============

    // ============基礎部分、setCenterで中心座標を指定==============
      // ======次の行を var map = new GMap2(document.getElementById("map"));  とすれば標準======
      var map = new GMap2(document.getElementById("map"),{mapTypes:[G_SATELLITE_TYPE]});
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(35.67500798914924,139.7427463531494),13); //★中心位置とズームレベル
    // ==============以　上==============
    
    // ============タブウィンドウ設置地点設定、はじめに緯度（Lat）、後が経度（Lng）==================
      // ======ポイント１========
      var point = new GLatLng(35.67302084384546,139.74264979362488); //★
      var marker = createTabbedMarker(point, "首相官邸<br>永田町", "http://www.kantei.go.jp/<br>（日本語、English）", "概要", "WEB", 0); //★
      map.addOverlay(marker);
      
      // ======ポイント２========
      var point = new GLatLng(35.67614970376391,139.74478483200073); //★
      var marker = createTabbedMarker(point, "衆議院", "http://www.shugiin.go.jp/", "概要", "WEB", 1); //★
      map.addOverlay(marker);
      // ==============以　上==============

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

<!--スタイルシートはじまり-->
<style type="text/css">
body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	margin-top: 6px;
	margin-left: 6px;
}
div#map {
	border: 2px outset gray;
}
img {
	border: 0px;
}
</style>
<!--スタイルシートおわり-->

</head>

<body onload="load()" onunload="GUnload()">
  <div id="map" style="width: 420px; height: 360px"></div>
</body>
</html>

・次は、（4） Polylines、OverviewMapControl です。

Google Maps API サンプル一覧

※トラックバックは受け付けていません。コメントは新しい記事のみ受け付けています。

Google Maps テンプレート（3）タブウィンドウ、オリジナルアイコン使用

Google 検索

サイトマップ

Navi

About