スタートページJavascript Google Maps Google Maps API の基礎

Google Maps API の機能

「Google Maps API の基礎」に関連したいくつかのTipsを掲げます。ここでは、よく使われる機能を対象にし、マーカーのアイコン変更に関しては「Google Maps API V3:マーカーのアイコン変更」で扱います。


機能例

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

(実行)最初および最初の状態に戻すときに行ないます。

(環境設定)クリックした地点の緯度・経度・住所を表示します。この環境は、他のボタンをクリックしても維持されます。→説明

(実行)「岩槻城址公園」のマーカーの追加・削除をします。→説明

(実行)
すべてのマーカーの吹出しの表示・非表示です。→説明

(環境設定)
マーカーをクリックしたとき、吹出しの表示/リンク先の表示をします→説明。他のボタンを押すとこれらの環境は維持されません。

(実行)岩槻駅から岩槻文化公園までの道順
下に経路説明が表示されます→説明


標準ソースコード

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

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

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

HTML
<p>                            <!-- R┐ -->
<button onClick='地図表示("sample/script.js")'>地図表示</button>
</p>
<div id="地図表示場所" style="width:600px; height:400px"></div>   <!-- S -->

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


座標住所取得

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

HTML
<button onClick='座標住所取得()'>座標住所取得</button>               <!-- J -->
<div id="座標住所表示場所"></div>                                 <!-- K -->
<div id="地図表示場所" style="width:600px; height:400px"></div>

参照:「Google Maps Javascript API v3 デベロッパーガイド ジオコーディングサービス」https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja

先頭に戻る

マーカーの追加・削除

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

追加function

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

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

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

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


HTML
<button onClick='マーカー追加()'>マーカー追加</button>
<button onClick='マーカー削除()'>マーカー削除</button>

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

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

  • F:マーカー[0] にはマーカーの場所(position)に関する情報も含まれています。
    それで、「マーカー[0].setMap(地図)」とするだけで、マーカーが表示されます。
  • G:削除するときも同様で、「マーカー[0].setMap(null)」だけでよいのです。
  • 先頭に戻る

    全吹出しの表示・非表示

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

    追加スクリプト
    function 吹出し表示() {
        for (i=0; i<場所.length; i++) {
            吹出し[i].open(地図, マーカー[i]);   // A
        }
    }
    
    function 吹出し非表示() {
        for (i=0; i<場所.length; i++) {
            吹出し[i].close();                  // B
        }
    }
    HTML
    <button onClick='吹出し表示()'>吹出し表示</button>>
    <button onClick='吹出し非表示()'>吹出し非表示</button>
    <button onClick='地図表示("sample/script.js")'>地図表示</button>
    
    先頭に戻る

    クリック吹出し/クリックリンク

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

    「地図表示」内での追加
    // ★★★ 関数呼出位置(各場所型) ★★★ クリック吹出し(マーカー[i], 吹出し[i]); // A クリックリンク(マーカー[i], URL[i]); // B
    追加function
    function クリック吹出し(クリックマーカー, 表示吹出し) { // C var クリック処理 = new google.maps.InfoWindow( // D { content:表示吹出し.content } // E ); google.maps.event.addListener( // F クリックマーカー, // G 'click', // H function(event) { // I クリック処理.open( // J クリックマーカー.getMap(), クリックマーカー ); } ); } function クリックリンク(クリックマーカー, リンク先) { // K google.maps.event.addListener( クリックマーカー, 'click', // L function(event) { window.open(リンク先); // M } ) }
    HTML
    <button onClick='地図表示("sample/script.js")'>地図表示</button> <!-- N --> <div id="地図表示場所" style="width:500px; height:300px"><div>
    先頭に戻る

    経路表示

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

    追加function
    function 経路表示() {
        var 出発地点 = new google.maps.LatLng(緯度[2],経度[2]);    // A:岩槻駅
        var 到着地点 = new google.maps.LatLng(緯度[1],経度[1]);    // B:岩槻文化公園
        var 交通手段 = google.maps.DirectionsTravelMode.WALKING;   // C
        var 経路条件 = {                                           // D
            origin:出発地点,
            destination:到着地点,
            travelMode:交通手段
        };
        var 経路 = new google.maps.DirectionsRenderer();           // E
        var 経路検索 = new google.maps.DirectionsService();
        経路検索.route(経路条件,                                   // F
                       function(result, status) {                  // G
                           if (status == google.maps.DirectionsStatus.OK) {
                               経路.setDirections(result);         // H
                           };
                       }
        );
        経路.setMap(地図);                                         // I
        経路.setPanel(document.getElementById("経路説明場所"));    // J
    }
    
    HTML
    <button onClick='経路表示()'>経路表示</button>
    <div id="地図表示場所" style="width:600px; height:400px"><div>
    <div id="経路説明場所"><div>                             <!-- K -->
    

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

    参照:「Google Maps JavaScript API v3デベロッパー ガイド ルート サービス」 https://developers.google.com/maps/documentation/javascript/directions?hl=ja

    先頭に戻る