スタートページ＞ Javascript Google Maps
表示する地図の中心位置、いくつかの場所にマーカーと吹き出しを付けるだけの単純な例です。これにより、地図作成の基本的なパターンを示します。
詳細は、Googleのチュートリアル
「Maps Javascript - Overview」
「Google Maps Javascript API V3 Reference」
を参照してください。
なお、ここでの「パターン」は、チュートリアルの例とやや異なっていますが、単に私の趣味によるものです。
（クリックしてください）
スクリプト<script src="https://maps.googleapis.com/maps/api/js?key=xxxxx" async defer"></script> // Ａ <script src="sample/script.js"></script> // Ｂ <script> // 「ＪＳファイル」で設定され入力されるグローバル変数 // var 場所 = new Array(); // var 緯度 = new Array(); // var 経度 = new Array(); // var ＵＲＬ = new Array(); // 岩槻城址公園 // 場所[0] = "岩槻城址公園"; // 緯度[0] = 35.95055; 経度[0] = 139.7109; // ＵＲＬ[0] = "joushi-kouen.html"; // 岩槻文化公園 // 場所[1] = "岩槻文化公園"; // 緯度[1] = 35.944516; 経度[1] = 139.722584; // ＵＲＬ[1] = "bunka-kouen.html"; // 岩槻駅 // 場所[2] = "岩槻駅"; // 緯度[2] = 35.949492; 経度[2] = 139.69305; // ＵＲＬ[2] = "iwatuki-eki.html"; // function「地図表示」で定義されるグローバル変数 var 地図; // Ｃ var マーカー = new Array(); var 吹出し = new Array(); function 地図表示(ＪＳファイル名) { // Ｄ var 場所数 = 場所.length; // ====== 相対ＵＲＬの修正 ======= var パス = ""; var 正規表現 = new RegExp("/"); if (ＪＳファイル名.match(正規表現)) { パス = RegExp.leftContext + "/"; // Ｆ } if ( (パス != "") && (ＵＲＬ[0].indexOf(パス) < 0) ) { for (i=0; i<場所数; i++) { ＵＲＬ[i] = パス + ＵＲＬ[i]; // Ｇ } } // ========= 中心緯度・経度の決定 ========== var 地図中心緯度 = 0; var 地図中心経度 = 0; for (i=0; i<場所数; i++) { 地図中心緯度 = 地図中心緯度 + 緯度[i]; 地図中心経度 = 地図中心経度 + 経度[i]; } 地図中心緯度 = 地図中心緯度 / 場所数; // Ｈ 地図中心経度 = 地図中心経度 / 場所数; document.getElementById("緯度表示場所").innerHTML = 地図中心緯度; document.getElementById("経度表示場所").innerHTML = 地図中心経度; // ========= 地図の表示 ========== var 地図表示ズーム = 14; // Ｉ Ｊ┐ var 中心座標 = new google.maps.LatLng(地図中心緯度, 地図中心経度); var 地図情報 = { // Ｋ zoom: 地図表示ズーム, center: 中心座標, mapTypeId: google.maps.MapTypeId.ROADMAP // Ｌ }; // Ｍ┐ 地図 = new google.maps.Map(document.getElementById("地図表示場所"), 地図情報); // ======== マーカー・吹出しの表示 =========== for (i=0; i<場所数; i++) { // マーカーの設定と表示 マーカー[i] = new google.maps.Marker( { // Ｎ position: new google.maps.LatLng(緯度[i], 経度[i]), map: 地図, } ); // 吹出しの設定 // Ｏ┐ var 吹出内容 = "<a href='" + ＵＲＬ[i] + "' target='_blank'>" + 場所[i] + "</a>"; 吹出し[i] = new google.maps.InfoWindow( { // Ｐ content: 吹出内容 } ); // 吹出しの表示 吹出し[i].open(地図, マーカー[i]); // Ｑ // ★★★ 関数呼出位置（各場所型） ★★★ }; // ★★★ 関数呼出位置（全体型） ★★★ }ＨＴＭＬ<p> <!-- Ｒ┐ --> <button onClick='地図表示("sample/script.js")'>地図表示</button> </p> <div id="地図表示場所" style="width:600px; height:400px"></div> <!-- Ｓ -->
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxx" async defer"></script> // Ａ <script src="sample/script.js"></script> // Ｂ <script type="text/javascript"> var 地図; // Ｃ function 地図表示(ＪＳファイル名) { // Ｄ // ====== 入力データ ======= // ========= 相対ＵＲＬの変更 =========== // ========= 地図の表示 ========== // ======== マーカー・吹出しの表示 =========== // ★★★ 関数呼出位置（各場所型） ★★★ // ★★★ 関数呼出位置（全体型） ★★★ } </script> <!-- Ｒ┐ --> <button onClick='地図表示("sample/script.js")'>地図表示</button> <div id="地図表示場所" style="width:600px; height:400px"></div> <!-- Ｓ -->
ここでのファイル構成は次のようになっています。
google-map.html （このページ）
sample （フォルダ）
script.js（入力データを定義したスクリプトライブラリ）
joushi-kouen.html （岩槻城址公園に関するＨＴＭＬファイル）
bunka-kouen.html （岩槻文化公園に関するＨＴＭＬファイル）
iwatuki-eki.html （岩槻駅に関するＨＴＭＬファイル）
以下はスクリプトの説明です。
// ========= 相対ＵＲＬの変更 =========== var パス; var 正規表現 = new RegExp("/"); if (ＪＳファイル名.match(正規表現)) { パス = RegExp.leftContext + "/"; // Ｆ } else パス = ""; for (i=0; i<場所数; i++) { ＵＲＬ[i] = パス + ＵＲＬ[i]; // Ｇ }
（注１）このページとＪＳファイルの位置関係により、元ＵＲＬと新ＵＲＬの関係は次のようになります。
同じフォルダのとき：元ＵＲＬ=script.js、パス="" → 新ＵＲＬ=script.js
複雑な位置のとき：元ＵＲＬ=../abc/script.js、パス="../abc/" → 新ＵＲＬ=../abc/script.js
（注２）この「地図表示」では、吹出しでのリンク先のＨＴＭＬファイル（sample/joushi-kouen.html）を「ＪＳファイル名」（sample/script.js）と同じフォルダ（sammple）にあること、あるいは下位のレベルにあることを前提条件にしています。
もし、元ＵＲＬが「xyz/joushi-kouen.html」であるときは、新ＵＲＬは「sample/xyz/joushi-kouen.html」となるので、正しくリンクします。
しかし、元ＵＲＬが「../joushi-kouen.html」のように親フォルダに関係しているときは、新ＵＲＬは「sample/../joushi-kouen.html」となるので、正しくリンクできないことになりそうです。
この前提条件は自然なフォルダ設定でしょうし、sample/joushi-kouen.htmlからは、どこのＨＴＭＬへも自由にリンクができるので、実務上は厳しい制約ではないでしょう。
あえてグローバル変数の値を変えたのは、この「地図表示」の処理後に、個々の場所のＵＲＬを参照する処理を、別の関数として組み込むのに便利だと思ったからです。
// ========= 中心緯度・経度の決定 ==========
var 地図中心緯度 = 0;
var 地図中心経度 = 0;
for (i=0; i<場所数; i++) {
地図中心緯度 = 地図中心緯度 + 緯度[i];
地図中心経度 = 地図中心経度 + 経度[i];
}
地図中心緯度 = 地図中心緯度 / 場所数; // Ｈ
地図中心経度 = 地図中心経度 / 場所数;
document.getElementById("緯度表示場所").innerHTML = 地図中心緯度;
document.getElementById("経度表示場所").innerHTML = 地図中心経度;
// ========= 地図の表示 ========== var 地図表示ズーム = 14; // Ｉ Ｊ┐ var 中心座標 = new google.maps.LatLng(地図中心緯度, 地図中心経度); var 地図情報 = { // Ｋ zoom: 地図表示ズーム, center: 中心座標, mapTypeId: google.maps.MapTypeId.ROADMAP // Ｌ }; // Ｍ┐ 地図 = new google.maps.Map(document.getElementById("地図表示場所"), 地図情報);
ここで下地となる地図が表示されます。通常のGoogle Mapと同じように、拡大や移動の操作、地形や衛星写真への切り替え、主要建物（自分のＷｅｂページでは不要なのですが）の写真表示などができます。
// ======== マーカー・吹出しの表示 ===========
for (i=0; i<場所数; i++) {
// マーカーの設定と表示
var マーカー = new google.maps.Marker( { // Ｎ
position: new google.maps.LatLng(緯度[i], 経度[i]),
map: 地図,
} );
// 吹出しの設定 // Ｏ┐
var 吹出内容 = "<a href='" + ＵＲＬ[i] + "' target='_blank'>" + 場所[i] + "</a>";
var 吹出し = new google.maps.InfoWindow( { // Ｐ
content: 吹出内容
} );
// 吹出しの表示
吹出し.open(地図, マーカー[i]); // Ｑ
}