地図を表示させるxoopsモジュール「webmap3」のインストールとssl対応

xoopsの地図表示モシュール「webmap3(google map V3)」のご紹介です。ホームページで、会社や組織などの位置を表わす際に利用します。直接、緯度と経度で正確な位置を示します。

スポンサーリンク
投稿本文(h2)

webmap3のインストール

管理者としてログイン

管理者としてログインして、「管理者メニュー」をクリックします。

「導入・アップデート管理」をクリック

モジュールの選択

ストア一覧の表示

ストア一覧が表示されますので、「パッケージストア」又は「モジュールストア」より必要なモジュールを選択します。

webmap3の選択

「モジュールストア」より、webmap3を選択します。

モジュールのインストール

インストール画面の表示

インストール画面が表示されますので、「取得して配置」をクリックします。

インストール確認

「OK」をクリックすると、モジュール確認が表示されますので、「インストール」をクリックします。

インストール終了

「Google Maps V3(webmap3)モジュールのインストールに成功しました」と表示されますと、インストールの完了です。

webmap3のSSL対応

SSL化の判定

゛http://~゛での運用であれば、問題ありませんが、゛https://~゛で運用される場合は、Webmap3モジュールのSSL化を行なわなければなりません。

SSL化を行わないと


「GoogleMaps V3」をクリックしてもループ状態で、反応しません。「安全でないスクリプト」を読み込めば、地図は表示できます。

SSL化を行うと


「GoogleMaps V3」をクリックすると、すぐに地図を表示します。

SSL化

修正の方法

該当のファイルをダウンロードして修正の後、アップロードします。

①PHP,HTMLのダウンロード

②PHP,HTMLの修正

TeraPad等で、゛http://゛の箇所を全て、゛https://゛と変更します。

③PHP,HTMLのアップロード

変更したファイルを元の場所へアップロードします。

修正の箇所

①trust_path側

  • xoops_trust_path/modules/webmap3/class/api/geocording.php
  • xoops_trust_path/modules/webmap3/class/xoops/header.php
  • xoops_trust_path/modules/webmap3/include/constants.php
  • xoops_trust_path/modules/webmap3/class/admin/index.php
  • xoops_trust_path/modules/webmap3/class/lib/footer.php
  • xoops_trust_path/modules/webmap3/class/lib/form.php
  • xoops_trust_path/modules/webmap3/templates/admin-location.html
  • xoops_trust_path/modules/webmap3/templates/inc_get_location.html
  • xoops_trust_path/modules/webmap3/templates/main_geocording.html
  • xoops_trust_path/modules/webmap3/templates/main_get_location.html
  • xoops_trust_path/modules/webmap3/templates/main_kml.html

②html側

  • xoops/modules/webmap3/templates/webmap3_admin_location.html
  • xoops/modules/webmap3/templates/webmap3_inc_geoxml_js.html
  • xoops/modules/webmap3/templates/webmap3_inc_get_location.html
  • xoops/modules/webmap3/templates/webmap3_inc_get_location_js.html
  • xoops/modules/webmap3/templates/webmap3_inc_marker_js.html
  • xoops/modules/webmap3/templates/webmap3_inc_serch_js.html
  • xoops/modules/webmap3/templates/webmap3_main_geocording.html
  • xoops/modules/webmap3/templates/webmap3_main_get_location.html
  • xoops/modules/webmap3/templates/webmap3_main_kml.htmlM

テンプレート管理

①対象ファイルの選択

FTPで、PHPやHTMLを直接変え替えたので、差分が生じています。テンプレート管理で、greenに塗られているファイルを修正します。

②「修正」をクリック

緯度・経度の取得

メニューの表示

「webmap3の設定」では、表示する地図の緯度と経度を設定する欄があります。そこで、予め、表示する地図の緯度と経度を調べておきます。管理者でログインして、「Google Maps V3(webmap)」を選択します。

「ジオコーディング」のクリック


ここでは、宗像市の朝野公民館の緯度・経度を調べてみます。

緯度・経度を控えておきます。

マーカーの設定

マーカー画像の登録

ロゴ画像の作成

地図のマーカーに表示する画像(今回、118x101pxで作成)を作成します。

画像の登録

作成した画像を登録します。
https://自分のサイトのURL/modules/webmap3/images

webmap3の設定

管理メニューの表示

管理者でログインして、管理メニューを表示します。

メニューの選択

メニューから「Google Maps V3(webmap3)」をクリックします。

一般設定

「一般設定」タブをクリックして、一般設定画面を表示させます。

マーカー画像の設定

作成した画像を表示させる様に設定します。

georssの表示設定

Webphoto の写真に設定した住所が、反映するように設定します。
注意:Webphtoの設定で、googleAPIkeyの設定をしなければ、動作しません。

①webphotoのクリック

②RSSのURLの取得

緯度・経度の設定

ジオコーディングで調べた緯度と経度を設定します。尚、マーカーのアイコンに位置(緯度,経度)を設定します。

①緯度・経度の設定

②マーカーのアイコン設定

地図の表示

地図上のマーカーをクリックすると画像が表示されるようになりました。
スポンサーリンク
投稿本文(h2)