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

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

とりあえずマーカーを表示するだけの最もシンプルなパターン

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.一括表示を実行
    sirusiizuオブジェクトのmarkingメソッドを発行する。 sirusiizu.marking(住所リスト);
    ※住所リストは、改行区切りの文字列(textareaのvalue値がそのまま使える)か配列で渡す。

    これだけで下の様な地図ができる。
    サンプル2ではマーカーを任意のものにしたり、情報ウィンドウを表示したり、進行状況を表示したり…)
    説明を閉じる

    住所 


    トップページへ戻る