スタートページJavascript Google Maps

Google Maps API の基礎

Google Maps API とは、Googleの地図を自分のWebページに表示して、それを利用してJavascriptでアプリケーションを作成するためのAPIです。


実例(標準例)


説明

詳細は、Googleサイトの「Google Maps Javascript API V3 スタートガイド」および 「Google Maps Javascript API V3 Reference」を参照してください。
ここでは、シンプルな例で説明します。

全体のソースリスト

スクリプト
<script type="text/javascript" // A src="http://maps.google.com/maps/api/js?sensor=false&language=ja"> </script> <script type="text/javascript" src="sample/script.js"> // B </script> <script type="text/javascript"> // 「JSファイル」で設定され入力されるグローバル変数 //   var 場所 = new Array(); //   var 緯度 = new Array(); //   var 経度 = new Array(); //   var URL = new Array(); //   岩槻城址公園 //    場所[0] = "岩槻城址公園"; //    緯度[0] = 35.95055; 経度[0] = 139.7109; //    URL[0] = "joushi-kouen.html"; //   岩槻文化公園 //    場所[1] = "岩槻文化公園"; //    緯度[1] = 35.944516; 経度[1] = 139.722584; //    URL[1] = "bunka-kouen.html"; //   岩槻駅 //    場所[2] = "岩槻駅"; //    緯度[2] = 35.949492; 経度[2] = 139.69305; //    URL[2] = "iwatuki-eki.html"; // function「地図表示」で定義されるグローバル変数 var 地図; // C var マーカー = new Array(); var 吹出し = new Array(); function 地図表示(JSファイル名) { // D var 場所数 = 場所.length; // ====== 相対URLの修正 ======= var パス = ""; var 正規表現 = new RegExp("/"); if (JSファイル名.match(正規表現)) { パス = RegExp.leftContext + "/"; // F } if ( (パス != "") && (URL[0].indexOf(パス) < 0) ) { for (i=0; i<場所数; i++) { URL[i] = パス + URL[i]; // G } } // ========= 中心緯度・経度の決定 ========== var 地図中心緯度 = 0; var 地図中心経度 = 0; for (i=0; i<場所数; i++) { 地図中心緯度 = 地図中心緯度 + 緯度[i]; 地図中心経度 = 地図中心経度 + 経度[i]; } 地図中心緯度 = 地図中心緯度 / 場所数; // H 地図中心経度 = 地図中心経度 / 場所数; document.getElementById("緯度表示場所").innerHTML = 地図中心緯度; document.getElementById("経度表示場所").innerHTML = 地図中心経度; // ========= 地図の表示 ========== var 地図表示ズーム = 14; // I J┐ var 中心座標 = new google.maps.LatLng(地図中心緯度, 地図中心経度); var 地図情報 = { // K zoom: 地図表示ズーム, center: 中心座標, mapTypeId: google.maps.MapTypeId.ROADMAP // L }; // M┐ 地図 = new google.maps.Map(document.getElementById("地図表示場所"), 地図情報); // ======== マーカー・吹出しの表示 =========== for (i=0; i<場所数; i++) { // マーカーの設定と表示 マーカー[i] = new google.maps.Marker( { // N position: new google.maps.LatLng(緯度[i], 経度[i]), map: 地図, } ); // 吹出しの設定 // O┐ var 吹出内容 = "<a href='" + URL[i] + "' target='_blank'>" + 場所[i] + "</a>"; 吹出し[i] = new google.maps.InfoWindow( { // P content: 吹出内容 } ); // 吹出しの表示 吹出し[i].open(地図, マーカー[i]); // Q // ★★★ 関数呼出位置(各場所型) ★★★ }; // ★★★ 関数呼出位置(全体型) ★★★ }
HTML
<p> <!-- R┐ --> <button onClick='地図表示("sample/script.js")'>地図表示</button> </p> <div id="地図表示場所" style="width:600px; height:400px"></div> <!-- S -->

全体の流れとJSライブラリ

<script type="text/javascript"                      // A
    src="http://maps.google.com/maps/api/js?sensor=false&language=ja">
</script>

<script type="text/javascript"
    src="sample/script.js">                         // B
</script>

<script type="text/javascript">
var 地図;                                           // C
function 地図表示(JSファイル名) {                 // D
    // ====== 入力データ =======
    // ========= 相対URLの変更 ===========
    // ========= 地図の表示 ==========
    // ======== マーカー・吹出しの表示 ===========
        // ★★★ 関数呼出位置(各場所型) ★★★
    // ★★★ 関数呼出位置(全体型) ★★★
}
</script>
                               <!-- R┐ -->
<button onClick='地図表示("sample/script.js")'>地図表示</button>
<div id="地図表示場所" style="width:600px; height:400px"></div>   <!-- S -->

ここでのファイル構成は次のようになっています。
    google-map.html (このページ)
    sample (フォルダ)
      script.js(入力データを定義したスクリプトライブラリ)
      joushi-kouen.html (岩槻城址公園に関するHTMLファイル)
      bunka-kouen.html  (岩槻文化公園に関するHTMLファイル)

      iwatuki-eki.html  (岩槻駅に関するHTMLファイル)

以下はスクリプトの説明です。

相対URLの変更

// ========= 相対URLの変更 ===========
var パス;
var 正規表現 = new RegExp("/");
if (JSファイル名.match(正規表現)) {
    パス = RegExp.leftContext + "/";            // F
    }
else パス = "";
for (i=0; i<場所数; i++) {
    URL[i] = パス + URL[i];               // G
}

(注1)このページとJSファイルの位置関係により、元URLと新URLの関係は次のようになります。
同じフォルダのとき:元URL=script.js、パス="" → 新URL=script.js
複雑な位置のとき:元URL=../abc/script.js、パス="../abc/" → 新URL=../abc/script.js

(注2)この「地図表示」では、吹出しでのリンク先のHTMLファイル(sample/joushi-kouen.html)を「JSファイル名」(sample/script.js)と同じフォルダ(sammple)にあること、あるいは下位のレベルにあることを前提条件にしています。
もし、元URLが「xyz/joushi-kouen.html」であるときは、新URLは「sample/xyz/joushi-kouen.html」となるので、正しくリンクします。
しかし、元URLが「../joushi-kouen.html」のように親フォルダに関係しているときは、新URLは「sample/../joushi-kouen.html」となるので、正しくリンクできないことになりそうです。
この前提条件は自然なフォルダ設定でしょうし、sample/joushi-kouen.htmlからは、どこのHTMLへも自由にリンクができるので、実務上は厳しい制約ではないでしょう。
あえてグローバル変数の値を変えたのは、この「地図表示」の処理後に、個々の場所のURLを参照する処理を、別の関数として組み込むのに便利だと思ったからです。

中心緯度・経度の決定

// ========= 中心緯度・経度の決定 ==========
var 地図中心緯度 = 0;
var 地図中心経度 = 0;
for (i=0; i<場所数; i++) {
    地図中心緯度 = 地図中心緯度 + 緯度[i];
    地図中心経度 = 地図中心経度 + 経度[i];
}
地図中心緯度 = 地図中心緯度 / 場所数;           // H
地図中心経度 = 地図中心経度 / 場所数;

document.getElementById("緯度表示場所").innerHTML = 地図中心緯度;
document.getElementById("経度表示場所").innerHTML = 地図中心経度;

地図の表示

// ========= 地図の表示 ==========
var 地図表示ズーム = 14;                        // I J┐
var 中心座標 = new google.maps.LatLng(地図中心緯度, 地図中心経度);
var 地図情報 = {                                // K
   zoom: 地図表示ズーム,
   center: 中心座標,
   mapTypeId: google.maps.MapTypeId.ROADMAP     // L
};                                              // M┐
地図 = new google.maps.Map(document.getElementById("地図表示場所"), 地図情報);

ここで下地となる地図が表示されます。通常のGoogle Mapと同じように、拡大や移動の操作、地形や衛星写真への切り替え、主要建物(自分のWebページでは不要なのですが)の写真表示などができます。

マーカー・吹出しの表示

// ======== マーカー・吹出しの表示 ===========
for (i=0; i<場所数; i++) {
    // マーカーの設定と表示
    var マーカー = new google.maps.Marker( {    // N
        position: new google.maps.LatLng(緯度[i], 経度[i]),
        map: 地図,
    } );
    // 吹出しの設定                            // O┐
    var 吹出内容 = "<a href='" + URL[i] + "' target='_blank'>" + 場所[i] + "</a>";
    var 吹出し = new google.maps.InfoWindow( {  // P
        content: 吹出内容
    } );
    // 吹出しの表示
    吹出し.open(地図, マーカー[i]);                // Q
}