開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2021年11月26日 (金)

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

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

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

DBの設定

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

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

フィールド名 パラメーター
フィールドタイプ テキストエリア(512 bytes)
差し替えキーワード parameter
(DBフィールド設定)

Googleマップよりiframeコードを取得

①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に格納」の部分を上記(1)で作成したDBの「パラメータ」フィールドに格納します。

一覧表の作成

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

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

HTMLの設定

上記(4)で作成した一覧表の単票に以下を貼り付けます。
<iframe src="https://www.google.com/maps/embed?※ここの値をDBに格納" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

動作確認

設置したページを表示させ、マップが表示されるか確認してください。
以上で設定は完了です。

解決しない場合はこちら コンテンツに関しての
要望はこちら