Google Maps 作り方・サンプル一覧 (API2、距離や緯度・経度の求め方など) : Seis Pesos

以下の各サンプルのほか、ブログを参照して下さい。このページに未掲載のサンプルもあります。

基本的なGoogle マップ＋テンプレート

※ホスティング系ブログでGoogle Maps API を使えない場合、無料の Google Page Creator を利用するのもいいでしょう（参考記事）。

あるいは、Yahoo!ウェブホスティング「ライトコース」、ロリポップ！などあります。

まずグーグルから Maps API key を取得します。例えば www.1111.com でキーを取っておけば、www.1111.com/222/ や www.1111.com/333/ でも使えます。
API v2 は頻繁に Revision が更新されます。head に記述する API Key は「...v=2.x...」または「...v=2.s... 」（s=stable）としておくのが無難でしょう。
次のマップは、もっともシンプルな基本形。【別ウィンドウで開く】

ズームの制御（GLargeMapControl）と、マップタイプのコントロール（GMapTypeControl）、マーカー（GMarker）の付加です。
用意するものは、表示するポイントの、位置（緯度、経度）の情報です。南北方向（Latitude）、東西方向（Longitude）を記述します。
charset=UTF-8 で作成するのが無難です。

原則的には head に Google Maps API Key と javascript を記述します。以下は head 区間の例

<!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</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=キー"></script>
<script type="text/javascript">
//<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
    // ===== 基礎部分 =====
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl()); // ズームコントロール。Small で小型に
      map.addControl(new GMapTypeControl()); // 地図タイプ切り替え。Control(true)で小型に
      map.setCenter(new GLatLng(35.675007, 139.742746), 15); 
      // 上の行が初期設定。中心＝北緯35度67分・・東経139度74分・・ズームレベル15（最大は19）
    // ===== マーカーとフキダシ（変更不要） =====
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }
    // ===== ポイント設置設定、前が緯度（Lat）、後が経度（Lng） =====
      // ===== ポイント１ =====
      var point1 = new GLatLng(35.673020,139.742649); //★位置設定
      var marker1 = createMarker(point1, '首相官邸'); // ★フキダシ中の文字
      map.addOverlay(marker1);
      // ===== ポイント２ =====
      var point2 = new GLatLng(35.676149,139.744784); //★位置設定
      var marker2 = createMarker(point2, '衆議院'); // ★フキダシ中の文字
      map.addOverlay(marker2);
      }
    }
//]]>
</script>
</head>

そして body の例

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 320px; border: 1px solid black;">Loading...</div>
</body>
</html>

・表示したい場所の緯度と経度を調べるには、location を表示するツールを使ってみてください。
・ラインを引く（トレースする）場合には、こちらの XML 出力ツールを使ってみてください。
・簡単にコードを出力する Wizard もあります。

次のサンプルは、サイドバー付き。ズームの制御を GSmallMapControl とし、マップタイプのコントロールを GMapTypeControl(true) として小さくしています。
さらに縮尺スケールを（new GScaleControl()）表示。また、序列アイコンとマウスホイールによるズーム機能も付加しています。
InfoWindow 内にもズーム機能を加えています。【別ウィンドウで開く】

次は、東京のメトロ・都営地下鉄・私鉄・JR路線図の一部（半蔵門線の各駅）。
全14ポイントをXMLファイルに記述して呼び出し、Polyline を引いて各駅を結んでいます。
head 冒頭に xmlns:v="urn:schemas-microsoft-com:vml"、
そして、v\:* { behavior:url(#default#VML); } とスタイル指示をしないと、Internet Explorer では Polyline や Polygon が表示されません。
オリジナルのアイコンも使っています。【別ウィンドウで開く】