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

シェアする

こんにちは!若手エンジニアのスパ子です(‘-‘*)

今回は住所情報をもとに地図を表示するデモを2種類ご紹介します。

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

2. Yahoo! Open Local Platformを利用する方法
「Yahoo! Open Local Platform」を利用し、DBに格納した住所から「緯度」と「経度」を求め、マップを表示する方法をご紹介します。

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

▼目次
1.Googleマップの共有用の埋め込みHTMLを利用する方法
(1) DBの設定
(2) Googleマップよりiframeコードを取得
(3) データ登録
(4) 一覧表の作成
(5) HTMLの設定
(6) 動作確認
2.Yahoo! Open Local Platformを利用する方法
(1) DBの設定
(2) Yahoo! Open Local PlatformのAPIキー(Client ID)を取得
(3) 一覧表の作成
(4) HTMLの設定
(5) 動作確認

1. Googleマップの共有用の埋め込みHTMLを利用する方法

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

(1) DBの設定

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

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

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

(DBフィールド設定)

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

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

(3)データ登録

上記(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の「パラメータ」フィールドに格納します。

(4)一覧表の作成

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

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

(5)HTMLの設定

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

<iframe src="https://www.google.com/maps/embed?%val:usr:parameter%" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>

(6)動作確認

設置したページを表示させ、マップが表示されていたらOKです(*^^*)/

2. Yahoo! Open Local Platformを利用する方法

「Yahoo! Open Local Platform」を利用し、DBに格納した住所から「緯度」と「経度」を求め、マップを表示する方法をご紹介します。

(1)DBの設定

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

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

・フィールド名:都道府県
   フィールドタイプ:都道府県
   差し替えキーワード:pref
・フィールド名:市区町村
   フィールドタイプ:テキストフィールド(64 bytes)
   差し替えキーワード:city
・フィールド名:番地
   フィールドタイプ:数字・記号・アルファベット(32 bytes)
   差し替えキーワード:address

(DBフィールド設定)

(2)Yahoo! Open Local PlatformのAPIキー(Client ID)を取得

Yahoo! Open Local Platformを使用し、アプリケーションを作成し、APIキー(Client ID)を保存します。
※アプリケーション作成、APIキー(Client ID)を取得する場合、Yahoo!のアカウントが必要です。

Yahoo!JAPANデベロッパーネットワークにアクセスします。
②機能>Web APIをクリックします。
③「YOLP(地図)」をクリックします。
④「新しいアプリケーションを開発」をクリックします。
⑤画面右上の黄色ボタン「アプリケーションを開発」をクリックします。
⑥「アプリケーションを登録」リンクをクリックします。
⑦アプリケーションの種類「サーバーサイド(Yahoo! ID連携 v2)」を選択し、必要情報を記載の上、「確認」をクリックします。
⑧入力内容を確認し「登録」をクリックします。
⑨「Client ID」をメモします。

(3)一覧表の作成

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

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

(4)HTMLの設定

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

<script src="https://map.yahooapis.jp/js/V1/jsapi?appid=(※上記(2)で取得したClient ID)" type="text/javascript" charset="UTF-8" ></script>
<script type="text/javascript">
window.onload = function(){
    var geocoder = new Y.GeoCoder();
    var word = "%val:usr:pref% %val:usr:city% %val:usr:address%";  //住所の差し替えキーワード
    var request = { query : word };

    geocoder.execute( request , function( ydf_data ) {
      if ( ydf_data.features.length > 0 ) {
       latLng = ydf_data.features[0].latlng;
        l2 = latLng.lng();
        l1 = latLng.lat();
      }
     var ymap = new Y.Map("map");
     ymap.drawMap(new Y.LatLng(l1,l2), 17, Y.LayerSetId.NORMAL);
     ymap.addControl(new Y.ZoomControl());
     ymap.addControl(new Y.HomeControl());
     ymap.addControl(new Y.LayerSetControl());
});
}
</script>
<html>
<div id="map" style="height:360px; width: 860px;"></div>
</html>

Yahoo!ジオコーダAPIでDBに登録された住所の緯度と経度を取得し、取得した「緯度」と「経度」からマップを生成しています。

(5)動作確認

設置したページを表示させ、マップが表示されていたらOKです(*^^*)/

以上で設定は完了です。

最後まで読んでいただき、ありがとうございました(*^^*)!

シェアする

フォローする