住所情報をもとに地図を表示する

Googleマップ上で取得することができる「共有用の埋め込みHTML（iframeコード）」の可変部分をDBに格納し、マップを表示する方法をご紹介します。

DEMOはこちら
一覧表のリンクをクリックするとGoogleマップ・Yahoo!マップが表示されます。

Googleマップを表示させるために必要なパラメータを格納する「マップDB」を作成します。

※当記事内でご紹介するプログラムコードでは下記の差し替えキーワードを利用します。別名で設定される場合は、都度、読み替えを行ってください。

（DBフィールド設定）

①Googleマップにアクセスし、マップを表示したい場所を検索し、「共有」をクリックします。
②「地図を埋め込む」をクリックします。
③HTMLをコピーします。

上記（2）でコピーしたHTMLは以下です。

<iframe src="https://www.google.com/maps/embed?※ここの値をDBに格納" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

「※ここの値をDBに格納」の部分を上記（１）で作成したDBの「パラメータ」フィールドに格納します。

今回は一覧表の単票にマップを表示します。一覧表の作成方法は以下サポートサイトを参照ください。

SPIRALサポートサイト一覧表・単票

上記（４）で作成した一覧表の単票に以下を貼り付けます。

<iframe src="https://www.google.com/maps/embed?※ここの値をDBに格納" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

設置したページを表示させ、マップが表示されるか確認してください。

以上で設定は完了です。

開発情報・ナレッジ