HTMLフォーム入力した住所からGoogleMapを作成 [SPL-0002]

管理している取引先情報ファイルに、Webブラウザの入力ページから追加登録し、取引先の住所をGoogleMap上にマークし、取引先の紹介情報を表示します。

SPL-0002_01.PNG

もっと手軽に地図情報を共有

Googleマップのサイトを利用すると、地図での位置やその周辺の確認がとても便利になりました。検索だけではなく、個別に専用のマークや詳細な 情報をつけて公開・共有するには、そのようなサービスを提供しているサイトへ登録してから使う必要があったり(しかも、多くは娯楽向け)、自分で Google Maps APIを使うためのテクニックを習得する必要があったり、まだまだ地図情報を活用できる環境は整っていません。
個人ではある集まりのメンバー、企業では取引先の会社などの情報を管理している場合、名前、住所、電話番号などの項目があり、Excelファイルやデータ ベースで管理されていることが多くあります。その一覧をもとに個別に住所を確認したり、参照するために印刷したりしていませんか?
もっと手軽に、今管理している住所データから地図情報を共有できると便利です。

パイプラインでやってみよう

パイプラインでは、Webブラウザから入力された情報を追加登録し、GoogleMapでメンバーや企業の地図分布を、すぐに、作成できます。プログラミングをする必要なくHTMLフォームの入力情報をCSV形式に変換してファイル出力したり、Google Maps APIのテクニックを習得しなくてもGoogle Map上で参照できるHTMLページを作成したりすることができます。
パイプライン機能にはHTMLフォームからの入力を取得する他にも、メールに添付されたExcelファイルを読み込む、データベースの更新を監視する、などのレコードデータを対象とした入力機能が多数あり、また、Excelファイルやデータベースへの出力機能も備えられています。

センサー

SPL-0002_02.png
「レコード情報」項目では、読込むCSVフィールドを定義します。フィールドを定義するには、右の「+追加」をクリックして、フィールド名を入力、データ型を選択します。CSVの定義読込み方法を使うと、もっと簡単にフィールド名の定義ができます。フィールド名を以下のようにCSV形式で記述した内容のファイルを用意します。

会社名,URL,住所,部署,Tel,販売拠点,説明見出し,説明
「レコード情報」項目の右にある「CSV」ボタンをクリックしてこのファイルを読み込むと、フィールド名が自動定義されます。データ型は必要に応じて変更します。

ジョイント

SPL-0002_03.png
ジョイントでは、複数のアクションを設定することができます。画面上部のアクション名タブで設定画面の表示や順序を切り替えます。初期設定ではタブの左から順に実行されます。

「1レコードずつVelocityテンプレートを使ってファイルを保存」アクションで、GoogleMapのマーカーから最大化した情報ウィンドウに表示するためのHTMLファイルを、ジョイントで読み込んだパートナー情報ファイル(CSV)の1レコードごとに作成することができます。上図のサンプルでは、「ファイル名」項目のHTML ファイル名は、フィルターで定義したレコード変数から「レコード番号.html」と設定しています。

「GoogleMap作成」アクションの設定画面を表示して、右上にある操作ボタンの一番左にある「詳細」ボタンをクリックしてみましょう。(ボタンの上にマウスを移動すると表示されるツールチップでボタン名が確認できます。)「最大化した情報ウィンドウに表示するHTMLファイルへのパス」項目で、前の「1レコードずつVelocityテンプレートを使ってファイルを保存」アクションで作成したHTMLファイル(レコード番号.html)を指定するとGoogleMap上の詳細情報として表示できます。
「GoogleMap作成」アクションで作成するGoogleMapを含むHTMLファイルは、パイプライン機能で用意されたテンプレートを使うのでユーザーが用意する必要なく、すぐ作成できるようになっています。
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
    キーワード:
  • パイプライン
  • サンプル
他にご質問がございましたら、リクエストを送信してください

このセクションの記事

他のキーワードで検索する