位置情報アプリ (3) – ジオコーディングにより地図の中心を移動する

Google Mapsのジオコーディングサービスを利用して、地図の中心を移動する。使い方としては、(住所ではなく)駅名や建物名を入力していったん地図を移動し、その後でロケタッチなどのスポットを探索するイメージ。
実行例:xlocclip02.html

  • テキストボックスと検索ボタンを用意する
  • HTML5では「プレースホルダ」が簡単に設定できるようになった。

    <!-- HTML -->
    <input type="text" size="30" placeholder="search address, keyword">
    

    xlocclip02_placeholder

  • 検索実行処理を記述する
  • 検索結果を表示する
  • 現状、複数の結果が得られた場合でも、先頭のみを表示対象としている。表示にはjQuery EasyUIのDatagridを利用する。

検索結果例:それぞれ結果の「行数」が違うので、表示結果も異なる点に留意。
(1)初期画面
xlocclip02_a01
(2)「相生駅(岐阜県)」を検索
xlocclip02_a02
(3)「東京タワー」を検索
xlocclip02_a03
(4)「東京都墨田区押上1丁目1-2」を検索
xlocclip02_a04

カテゴリー: Development, Location Service タグ: , パーマリンク