サンプル2 - 「googleマップで複数住所を一括表示」の作り方

googleマップで複数住所を一括表示」の機能をライブラリ化したので、それを使用したページの作り方。

マーカーを任意のものにしたり、情報ウィンドウを表示したり、進行状況を表示してみる。

※1~3はサンプル1と同じ
1.ライブラリのscriptタグを記述
  • Google Maps API (http://maps.google.com/maps/api/js?sensor=false)
  • jQueryライブラリ (http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js)
     ※古いバージョンでも動く。1.4.2では確認した。
  • 一括表示のライブラリ 2014/06/06更新 (ダウンロードし自分のサイトに置いてそのアドレスを記す。)
     ※1 当サイトのを直接使用すると、ある日突然動かなくなるかも…。
     ※2 windowオブジェクトのプロパティに一括表示をするsirusiizuオブジェクトが追加される。
  • 2.地図を表示するdivタグを用意
    地図を表示するのに十分な大きさにしてidを付ける。
    3.ドキュメントロード時に地図を初期化
    sirusiizuオブジェクトのinitializeメソッドを発行する。 sirusiizu.initialize("divタグのid");
    4.プログレスバーのdivタグを用意
    このページでは地図の上に用意し、進捗0%の状態にしてある。
    5.一括表示を実行
    sirusiizuオブジェクトのmarkingメソッドを発行する。
    コールバック関数の"onGeocoded"でマーカーと情報ウィンドウを設定し、プログレスバーを進める。
    また"onGeocodeCompleted"でプログレスバーを初期化する。
    sirusiizu.marking(
        住所リスト, 
        {
            onGeocoded: function(i, addr) {  //1件ジオコードした後の処理
                プログレスバーを進める。
                addr.iconURL = マーカーのURL;
                addr.title = マーカーのツールチップに表示するテキスト;
                addr.infoHTML = 情報ウィンドウに表示するHTML;
            },
            onGeocodeCompleted: function(address){  //全件ジオコードした後の処理
                プログレスバーを初期化;
            }
        }
    );
    ※住所リストは、改行区切りの文字列(textareaのvalue値がそのまま使える)か配列で渡す。
    説明を閉じる

    住所 


    トップページへ戻る