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

Loading...

基本的な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)としておくのが無難でしょう。
次のマップは、もっともシンプルな基本形。別ウィンドウで開く

Loading...Loading...

ズームの制御(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) =====
      // ===== ポイント1 =====
      var point1 = new GLatLng(35.673020,139.742649); //★位置設定
      var marker1 = createMarker(point1, '首相官邸'); // ★フキダシ中の文字
      map.addOverlay(marker1);
      // ===== ポイント2 =====
      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 内にもズーム機能を加えています。別ウィンドウで開く

Loading...

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

Loading...

東京メトロ・都営地下鉄・私鉄・JR各路線図のサンプル・データ一式は配布しています。

downloadダウンロード (130KB)

※ただし、「幸せの新築分譲マンション」というサイト(www.7mansion.com/subway/)のように、位置情報のみならずマーカー画像までそっくり丸ごと盗用転載するのはご遠慮下さい。


基本=基礎的な記述
タブ、オリジナルアイコン
KML, GeoRSS=KMLファイルやRSSフィードを表示
Polyline、Overview
Google サービス活用

応用サンプル・マッシュアップなど

詳しくは、各サンプルのソースを参照してください。


:: このブログ「Seis Pesos」は、Movable Type で作成しています ::


東京のメトロ・都営地下鉄・私鉄・JR路線図
ナンバリング:マーカーに序列表示
世界の国:191カ国を各国旗で表示
チェックボックス、ラジオボタン:Marker Categories、ひとつの XML データの中からカテゴリごとに表示
テポドン発射位置
ライヴ地震情報(RSS情報をマップに取り込む)
火山一覧

色々なツール使用例

座標の取得(getCenter() で Latitude(南北方向)、Longitude(東西方向)を調べる)
ズームレベルを上げる(衛星画像には、ごく一部でレベル23(普通は19まで)の高解像度画像がある)
Google Spreadsheets の利用(JSONでエクセル形式データを地図に呼び込む)
KMLエディタ(線とシェイプの描画、KMLファイルの作成補助ツール)
「このページにリンク」
ToolTip(マーカー+サイドバー)
アイコン・サンプル
GMarkerManager
世界時計: EarthTools

サードパーティのツール

Lightbox(サムネイルをクリックすると写真を拡大表示)
Image Cutter(独自のカスタムマップ)
SIMILE Timeline(時間軸を表示)
Einsert
EPoly
TLabel
EWindows

その他

Moon, Mars, Sky
距離計測、面積測定
Toggle Group
Running Polyline
Encoder Utility(Polyline を軽量に描画 ※コードに「\」が入るときは、これを「\\」に置き換えないと正確に表示しないバグあり)
Microsoft Virtual Earth
国土地理院「電子国土」

Google Maps API Version 2 Documentation(公式ページ)

feedburner  Add to Google Reader or Homepage

ドメイン内検索

© about