Google Maps APIの機能＜Google Maps API の基本＜Google Maps＜Javascript＜木暮

ここで扱う機能一覧です。適当に［ボタン］をクリックして右の地図の変化を確認してください。

標準ソースコード

ここでは、を標準例といい、そのソースコードを標準ソースコードといいます。

スクリプト
<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("/", "g");
    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];
    }
    地図中心緯度 = 地図中心緯度 / 場所数;           // Ｈ
    地図中心経度 = 地図中心経度 / 場所数;

    // ========= 地図の表示 ==========
    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: 吹出内容
        } );
        // ★★★　関数呼出位置（各場所型）　★★★
    };
    // ★★★　関数呼出位置（全体型）　★★★
}

ＨＴＭＬ
<p>                            <!-- Ｒ┐ -->
<button onClick='地図表示("sample/script.js")'>地図表示</button>
</p>
<div id="地図表示場所" style="width:600px; height:400px"></div>   <!-- Ｓ -->

標準ソースコードの説明は、「Google Maps API の基礎」を参照してください。以下では、これに追加した部分を説明します。

座標住所取得

 
追加function
function 座標住所取得() {                                // Ａ
    // ======== クリックした地点の情報取得 ======
    google.maps.event.addListener(                       // Ｂ
        地図,
        "click",
        function(イベント) {                             // Ｃ
            // ====== 緯度・経度の取得 ======
            var 取得緯度 = イベント.latLng.lat();        // Ｄ
            var 取得経度 = イベント.latLng.lng();
            var 取得座標 = new google.maps.LatLng(取得緯度, 取得経度);
            // === 緯度・経度から住所の取得（逆ジオコーディング）======
            var 住所情報 = new google.maps.Geocoder();   // Ｅ
            住所情報.geocode(                            // Ｆ
                { "latLng": 取得座標 },
                function(住所検索結果) {                 // Ｇ
                    var 取得住所 = new String(住所検索結果[0].formatted_address); // Ｈ
                    document.getElementById("座標住所表示場所").innerHTML         // Ｉ
                        = "<p>緯度=" + 取得緯度 + ", 経度=" + 取得経度 + "<br>"
                        + "住所=" + 取得住所 + "</p>";
                }
            );
        }
    );
}

ＨＴＭＬ
<button onClick='座標住所取得()'>座標住所取得</button>               <!-- Ｊ -->
<div id="座標住所表示場所"></div>                                 <!-- Ｋ -->
<div id="地図表示場所" style="width:600px; height:400px"></div>

Ａの関数「座標住所取得()」を作成し、Ｊからそれを実行します。すでに［地図表示］が実行されているので、グローバル変数「地図」が定義されているので、関数「地図表示()」を呼び出す必要はありません。
Ｂのgoogle.maps.event.addListenerは、地図についてさらに機能を追加する関数です。「引数１で引数２のイベントが発生したら引数３を行う」という構成になります。ここでは「地図がクリックされたらＣ：function(イベント)を行う」ことになります。
すなわち、Ｃは「クリックされた地点の緯度・経度・住所を取得せよ」という機能を実現しなければなりません。
Ｄ：「イベント」にはクリックした地点の多様な情報が入っています。ここでは緯度と経度が得られます。座標は（緯度、経度）のペアをもつデータの型です。
ジオコードとは、住所などから緯度・経度を求めること、逆ジオコードとは座標から住所を得ることです。その双方をまとめて、ジオコードということもあります。
Ｅのgoogle.maps.Geocoderは、ジオコードによるデータの型であり、Ｆで座標を指定しているので、得られるものは住所に関する情報になります。
Ｇ：「この座標に関する住所を検索して、その結果は関数の引数（住所検索結果）として与えられるので、その（住所検索結果）を用いてＨ・Ｉを行う」ことになります。
Ｈ：「住所検索結果」は、配列になっており、
　　０　３－４　太田　岩槻区　さいたま市　埼玉県　日本
　　１　太田　岩槻区　さいたま市　埼玉県　日本
　　２　岩槻区　さいたま市　埼玉県　日本
　　　　：
　　ｎ日本
のようになっています。formatted_addressは通常使われる住所形式にするという意味です。
すなわち、これで「取得住所＝日本、埼玉県～太田３－４」になります。
Ｉで緯度・経度、住所を編集して「座標住所表示場所」に表示します。その場所はＫにあります。

参照：「Maps Javascript API - Geocoding Service」（https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja）

先頭に戻る

マーカーの追加・削除

ここでは、マーカー[0]（岩槻城址公園）を対象に追加・削除をします。

追加function

// ケース１：マーカー[i]が定義されていない場合
hunction マーカー追加() {
    追加マーカー = new google.maps.Marker(                      // Ａ
        {
          position: new google.maps.LatLng(35.95055, 139.7109), // Ｂ
          icon: "sample/icon.png"                               // Ｃ
        }
    );
    追加マーカー.setMap(地図);                                  // Ｄ
}

function マーカー削除() {
    削除マーカー =  = new google.maps.Marker(
        {
          position: new google.maps.LatLng(35.95055, 139.7109)
        }
    );
    削除マーカー.setMap(null);                                   // Ｅ
}

// ケース２：マーカー[i]が定義されている場合
function マーカー追加() {
    マーカー[0].setMap(地図);            // Ｆ
}

function マーカー削除() {
    マーカー[0].setMap(null);            // Ｇ
}


ＨＴＭＬ
<button onClick='マーカー追加()'>マーカー追加</button>
<button onClick='マーカー削除()'>マーカー削除</button>

ケース１：新規の地点にマーカーを作成するのであれば、マーカーを設置する座標（position）を指定する必要があります。

Ａ：追加するマーカーの定義です。
{ …… } のなかに、いろいろな属性と値を、次の形式で記述します。
　　{
　　　属性１: 値１,
　　　属性２: 値２
　　}
Ｂ：positionは、追加するマーカーの座標であり必須です。
Ｃ：iconは、マーカーのアイコンです。ここでは"sample/icon.png"にある画像を用いています。これは省略でき、省略したときは標準的なものになります。
アイコンのカスタマイズについては、「Google Maps API マーカーのアイコン変更」で扱います。
Ｄ：「追加マーカー.setMap(地図)」は、「既に定義されている「地図」に「追加マーカー」を表示せよ」という意味です。
Ｅ：逆に、マーカーを削除するには、「setMap(null)」とします。

ケース２：ここでは、「地図表示」がすでに行われており、マーカー[0] が定義されています。それでケース２を用いています。

Ｆ：マーカー[0] にはマーカーの場所（position）に関する情報も含まれています。
それで、「マーカー[0].setMap(地図)」とするだけで、マーカーが表示されます。

Ｇ：削除するときも同様で、「マーカー[0].setMap(null)」だけでよいのです。

先頭に戻る

全吹出しの表示・非表示

全マーカーの吹出しを一斉に表示・非表示にします。

追加スクリプト
function 吹出し表示() {
    for (i=0; i<場所.length; i++) {
        吹出し[i].open(地図, マーカー[i]);   // Ａ
    }
}

function 吹出し非表示() {
    for (i=0; i<場所.length; i++) {
        吹出し[i].close();                  // Ｂ
    }
}
ＨＴＭＬ
<button onClick='吹出し表示()'>吹出し表示</button>>
<button onClick='吹出し非表示()'>吹出し非表示</button>
<button onClick='地図表示("sample/script.js")'>地図表示</button>

ここで使う変数は「地図表示」により、グローバル変数として値が入っているいるので、「標準ソースコード」に上の関数を追加しただけです。
Ａ：「吹出し[i].open(地図, マーカー[i])」とは「地図の指定位置（マーカー[i]）に指定オブジェクト（吹出し[i]）を表示する」という意味です。
Ｂでも「吹出し[i].close(地図, マーカー[i])」としてもよいでしょうが、単に「吹出し[i]を閉じる」だけで意味が通じますので( )内は省略できます。
なお、この吹出しの内容は他ファイルへのリンクにしています（参照：「標準ソースリスト」のＯ）。

先頭に戻る

クリック吹出し／クリックリンク

ボタンをクリックしただけでは、マーカーをクリックしたときの動作を設定するだけで、地図の表示には変化はありません。ボタンをクリックした後、マーカーをクリックすると、吹出しを表示（クリック吹出し）したり、リンク先にジャンプ（クリックリンク）したりします。

「地図表示」内での追加
        // ★★★　関数呼出位置（各場所型）　★★★
        クリック吹出し(マーカー[i], 吹出し[i]);        // Ａ
        クリックリンク(マーカー[i], ＵＲＬ[i]);        // Ｂ

追加function

function クリック吹出し(クリックマーカー, 表示吹出し) {       // Ｃ
    var クリック処理 = new google.maps.InfoWindow(            // Ｄ
        { content:表示吹出し.content }                        // Ｅ
    );
    google.maps.event.addListener(                            // Ｆ
        クリックマーカー,                                     // Ｇ
         'click',                                             // Ｈ
         function(event) {                                    // Ｉ
             クリック処理.open(                               // Ｊ
                 クリックマーカー.getMap(),
                 クリックマーカー
             );
        }
    );
}

function クリックリンク(クリックマーカー, リンク先)　{         // Ｋ
    google.maps.event.addListener(
        クリックマーカー,
        'click',                                               // Ｌ
        function(event) {
            window.open(リンク先);                             // Ｍ
        }
    )
}

ＨＴＭＬ
<button onClick='地図表示("sample/script.js")'>地図表示</button>  <!-- Ｎ -->
<div id="地図表示場所" style="width:500px; height:300px"><div>

「クリック吹出し」のときは黒字の部分、「クリックリンク」のときは青字の部分を追加します。双方を同時に設定すると、クリック時にどちらを選択するかがわからないので、例えばＬを "dblclick" にして、ダブルクリックしたらリンク先にジャンプするというように変更します。
Ａ・Ｂ：「地図表示」と切り離して独立した関数にしようとしたのですが、うまくいかず、「地図表示」から関数を呼び出すようにしました。そのためＮのように「地図表示」を起動させています。
各マーカーについて、クリック時などの操作を設定するのですから、 (for i=0; i<場所数; i++) {……} のループ内の最後に挿入する必要があります。
（注意）例えばＡの個所にＣの内容を
　　　　var クリック処理 = new google.maps.InfoWindow({
　　　　　　content:吹出し[i].content
　　　　});
　　　　google.maps.event.addListener(マーカー[i], 'click', function(event) {
　　　　　　クリック処理.open(
　　　　　　　　マーカー[i].getMap(),
　　　　　　　　マーカー[i]
　　　　　　);
　　　　});
として組み込んだのではエラーになります。ここのように関数にする必要があります（私にはうまく説明できません）。
Ｃ：引数「クリックマーカー」はマーカー[i]、「表示吹出し」は吹出し[i]です。
Ｄ：InfoWindowとは「吹出し」のことです。「google.maps.InfoWindow」は、吹出しの属性をもつデータの型です。Ｅで、吹出しの内容を設定しています。「吹出し[i].content」とは、吹出し[i]の文字列のことです。標準ソースコードの０「吹出内容」になります。
Ｆ：google.maps.event.addListenerとは、「何らかのイベントが発生したときの処理を追加する」という関数です。ここでは、「マーカー[i]がクリックされたら、Ｉの処理をせよ」という意味になります。
Ｉ・Ｊ：イベント（クリック）したときの処理です。ここでは、「マーカー[i]の位置に、「クリック処理」の内容で、マーカー[i]の地図を更新せよ」となります。
もってまわった設定ですが、これで「マーカー[i]がクリックされたら、マーカー[i]に吹出し[i]の内容を表示せよ」ということになります。
Ｋも同様です。マーカー[i]とＵＲＬ[i]を受け取ります。
Ｍ：window.open(ＵＲＬ); は「ＵＲＬのファイルを開け」という意味です。ここでは、マーカー[i]に対応したＵＲＬ[i]が表示されます。

先頭に戻る

経路表示

ボタンにより岩槻城址公園（場所[2]）から岩槻文化公園（場所[1]）までのルートを表示します。

追加function
function 経路表示() {
    var 出発地点 = new google.maps.LatLng(緯度[2],経度[2]);    // Ａ：岩槻駅
    var 到着地点 = new google.maps.LatLng(緯度[1],経度[1]);    // Ｂ：岩槻文化公園
    var 交通手段 = google.maps.DirectionsTravelMode.WALKING;   // Ｃ
    var 経路条件 = {                                           // Ｄ
        origin:出発地点,
        destination:到着地点,
        travelMode:交通手段
    };
    var 経路 = new google.maps.DirectionsRenderer();           // Ｅ
    var 経路検索 = new google.maps.DirectionsService();
    経路検索.route(経路条件,                                   // Ｆ
                   function(result, status) {                  // Ｇ
                       if (status == google.maps.DirectionsStatus.OK) {
                           経路.setDirections(result);         // Ｈ
                       };
                   }
    );
    経路.setMap(地図);                                         // Ｉ
    経路.setPanel(document.getElementById("経路説明場所"));    // Ｊ
}

ＨＴＭＬ
<button onClick='経路表示()'>経路表示</button>
<div id="地図表示場所" style="width:600px; height:400px"><div>
<div id="経路説明場所"><div>                             <!-- Ｋ -->

実際に経路を検索するのはＦです。与えられた条件の下で経路を探し、経路があったら、それを「経路」として取り出しています。
それまでのＡ～Ｄは。条件の設定、I・Jは経路の表示です。
Ｄで条件を設定します。「どこからどこへ何で」が必須項目になります。
　　origin：　　　出発地点←Ａで座標を設定
　　destination：到着地点←Ｂで座標を設定
　　travelMode：　交通手段←ＣでWALKING（徒歩）を選択
Ａ・Ｂ・Ｃの右辺を直接Ｄに記述することもできます。
Ｃの交通手段には、次の指定ができます。
　　DRIVING（デフォルト）: 道路網を利用した標準の運転ルート
　　BICYCLING: 自転車専用道路と優先道路を使用した自転車ルート
　　TRANSIT: 公共交通機関を使用したルート
　　WALKING: 歩行者専用道路と歩道を使用した徒歩ルート
さらには、乗換案内（時刻指定もできる）などのオプション機能もあります。しかし、Googleがこれらの情報を十分にデータベース化していないので、あいまいな結果になることもあります。
Ｆのrouteは、経路を検索する関数で、引数１が検索条件、引数２が検索結果です。引数２は、関数Ｇでresult（結果）とstatus（状態）が戻されます。
Ｈ：「状態がＯＫならば、その結果を経路とする」という意味です。正確には「Ｅで定義していた「経路」の道筋をresultとする」ですが、同じことになりましょう。ifが必要なのは、「海外の２地点を徒歩で」などの条件の場合に必要になります。
Ｉ：地図に経路を上書きします。
Ｊ：「経路」には道順などの情報が含まれています。それをＫで指定したＨＴＭＬの場所「経路説明場所」に表示します。

この経路検索には、複数の候補を検索するとか、地図に表示された経路をドラックして変更するなど、多様な機能をもっています。詳細は下記サイトにあります。

参照：「Maps Javascript API - Directions Service」（ https://developers.google.com/maps/documentation/javascript/directions?hl=ja）

先頭に戻る

Google Maps API の機能

機能例

標準ソースコード

座標住所取得

マーカーの追加・削除

全吹出しの表示・非表示

クリック吹出し／クリックリンク

経路表示