Google Maps テンプレート（1）基本

・ああでもない、こうでもないと試行錯誤しながらGoogle Mapsを作っておりますと、そのうち何がナンだか判らなくなり混乱をきたしてきました。しかもAPI 2 が出て従来のバージョン1はいずれ使えなくなるというので、ちょっと要点を整理。覚書代わりに、ひながたのほうが判りやすいかなぁと。他人様の役にも立てるかな？
・以下のひながたをコピーしてメモ帳などに貼り付け、Sign up for the Google Maps APIで取得した固有のAPI Keyを「キー」の部分に記述、あとは★印の箇所だけ好きなように書き換えアップロードすればいいだけです。

注：「名前を付けて保存」する際に文字コードは「UTF-8」にしないといけません。HEADのmetaも、 content="text/html; charset=UTF-8"にしないといけません。DOCTYPE は、Strict でも Transitional でも大丈夫（以下のサンプルも同じ）。

・何はともあれマークしたい場所の緯度と経度を探し出さないといけませんが、こちらのツールで割り出してください。

（1）基本 - サンプルの Map を見る

地図タイプ選択ボタン、ズームコントロール、マーカー、フキダシの基本形。

<!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" lang="ja" xml:lang="ja">
<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.x&amp;key=キー"
            type="text/javascript"></script>

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

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

    // ===== 基礎部分、setCenterで中心座標とズームレベルを指定 =====
      // 次の行を var map = new GMap2(document.getElementById("map"),{mapTypes:[G_NORMAL_MAP, G_SATELLITE_MAP]});  とすればハイブリッドは表示されない
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl()); // ズームコントロール。Small で小型に
      map.addControl(new GMapTypeControl()); // 地図タイプ切り替えボタン
      map.setCenter(new GLatLng(35.675007, 139.742746), 13); // ★ およそ北緯35度67分・・・、およそ東経139度74分・・・、ズームレベルは13（最大は19）

    // ===== マーカーとフキダシ（変更不要） =====
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

    // ===== ポイント設置設定、前が緯度（Lat）、後が経度（Lng） =====
      // ===== ポイント１ =====
      var point = new GLatLng(35.673020,139.742649); //★
      var marker = createMarker(point,'<div style="width:240px; padding:8px; background-color:#CCCCFF; font-family:Courier; border:solid 1px #6600CC;" ><a href="http://www.kantei.go.jp/">首相官邸<\/a> kantei.go.jp<\/div><br />スタイルを指示したら少しおされ') //★
      map.addOverlay(marker);
      // ===== ポイント２ =====
      var point = new GLatLng(35.676149,139.744784); //★
      var marker = createMarker(point,'<a href="http://www.shugiin.go.jp/index.nsf/html/index.htm">衆議院<\/a><br /><img src="gmap/diet.jpg" width="120" height="102"/>') //★
      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>

・次は、（2）サイドバー表示です。

Google Maps API サンプル一覧

コメント(2)

まさやん | July 30, 2007 3:04 PM

参考にさせて頂いております。

ふとした疑問なのですが、API Keyとかって削除することはできるのでしょうか。
ドメインが変わった時に登録を削除してからとか思ったんですが。

えらく変なことを聞いても申し訳ありませんが、宜しくお願い致します。

editor | July 30, 2007 4:11 PM

>> まさやんさん
Google に Key 取得ページはあっても、削除ページなどはおそらく無いと思います。
つまり発行しっぱなしです。

また、API Key は「Generate」（取得）です。「Register」（登録）ではありません。

ドメインが変わった時に、新たにそのドメインの Key を取得すればいいだけだと思います。
仮に、お使いのドメインを放棄し、いつか誰かがそのドメインを取得して Google の Maps や Search や Feed などの API Key（共通）を取得したとしたら、まったく同じコードが発行されるだけのことでしょう。

Google Maps テンプレート（1）基本

コメント(2)

Google Maps API

Category

Recent Posts