Gnaviモジュールの地図表示の復帰

  • ここでは新たな話題の追加投稿はできません。
  • ここではゲスト投稿が禁止されています

投稿ツリー




前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2018/10/1 22:13 | 最終変更
タツ  管理人   投稿数: 2018
Gnaviモジュールの利点であるGoogle Mapが表示されなくなってしまいました。原因はと探ってみた所、Google Mapの利用で以前は無料でAPIキーが不要になっていましたが課金制のためのAPIキーが復活したことが大きな原因のようです。特にAPIキーを含めていないGoogle Map Scriptを利用しているGnaviモジュールはその影響をもろに受けてしまいました。旅の旅行記には欠かせない地図、弱小サイトにとっては特に痛手ですねぇ。

詳細については
https://cloud.google.com/maps-platform/pricing/?hl=ja

ここには、
引用:
1 か月 200 ドル分まで無料
ほとんどのお客様は、1 か月の使用量が無料範囲(200 ドル)を超えることはありません。使用量が予想外に増えないよう、1 日あたりの割り当て、課金上限、利用制限を設定することもできます。

と掲載されています。課金に関しては、今までAPIキーを利用していなかったのでどれぐらい利用されているのか分かりませんが、今後の使用量データを見ながら決定していきたいと思います。願わくば、今まで通り無料になることを願っています。

Gnaviモジュールの地図表示の復帰方法

1.Googleのアカウントを取得し、APIキーを取得する

2.GnaviモジュールにAPIキーを反映するために以下の4つのファイルを変更する必要があります。

各ファイルの変更する要点は、
・APIキーとなるkey=".$gnavi_googlemapapi_key."を前に&を追加して付加しています。
・sensor=falseをcallback=initMapに変更しています。
※GoogleMapのバージョンを表すv=".$gnavi_gmapapi_ver."(v=3)も不要のようですが影響もないのでそのままにしました。
となります。

xoops_trust_path/modules/gnavi/main/item.php
113行目
$xoops_module_header .="<script src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&sensor=false' type='text/javascript' charset='utf-8'></script>

$xoops_module_header .="<script src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&key=".$gnavi_googlemapapi_key."&callback=initMap' type='text/javascript'></script>


xoops_trust_path/modules/gnavi/main/map.php
214行目
$xoops_module_header = $xoopsTpl->get_template_vars( "xoops_module_header" ) ."\n" ."<script src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&sensor=false' type='text/javascript' charset='utf-8'></script>

$xoops_module_header = $xoopsTpl->get_template_vars( "xoops_module_header" ) ."\n" ."<script src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&key=".$gnavi_googlemapapi_key."&callback=initMap' type='text/javascript'></script>

xoops_trust_path/modules/gnavi/main/submit.php
917行目
$xoops_module_header .="<script src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&sensor=false' type='text/javascript' charset='utf-8'></script>

$xoops_module_header .="<script src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&key=".$gnavi_googlemapapi_key."&callback=initMap' type='text/javascript'></script>

xoops_trust_path/modules/gnavi/admin/category.php
380行目
<script src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&sensor=false' type='text/javascript' charset='utf-8'></script>

<script src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&key=".$gnavi_googlemapapi_key."&callback=initMap' type='text/javascript'></script>

以上です。

3.Gnaviの管理画面から一般設定でAPIキーを設定します。

4.ブラウザChromeにアドオンGoogle Maps Platform API Checkerをインストールし、正常にAPIキーが使われているかどうかを確認します。正常に反映されていればsuccess画面が表示されます。この時、以前のAPIキーを利用したものの正常に表示されませんでした。


5.新たにAPIキーを取得して(クレジット番号が必要)有効化します。正常に終了すると次のような画面が表示されます。


このあと、編集画面からアプリケーションの制限とAPIの制限をかけます。
・アプリケーションの制限
HTTP リファラー (ウェブサイト)を選択し、ホームページのアドレスを設定しました。
https://www.onwil.com/∗
∗はワイルドカードで以下のアドレスを全て含むという意味です。

・APIの制限
Maps JavaScript APIを選択しました。

以上でGnaviモジュールの地図が今の所復帰しています。
投票数:0 平均点:0.00

前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2019/3/15 9:01 | 最終変更
タツ  管理人   投稿数: 2018
Gnaviで地図の検索をしようとしたら「REQUEST_DENIED」とエラーが発生します。場所の検索はGoogle MapsのGeocodingを利用しているものの機能していない様子です。以前は使えていたはず、と調べてみたらGeocording APIが利用できなくなっていたのが原因でした。早速使えるよう以下のように設定しました。これでGnaviは完全に復帰したように思います。

手順としては
Google Cloud Platformへログイン後

APIとサービス→認証情報→編集アイコンをクリック→


API制限のタブをクリック


ここでGeocording APIを追加します。
投票数:0 平均点:0.00

前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2019/6/27 20:56
タツ  管理人   投稿数: 2018
Gnaviモジュールでマーカーをクリックし情報ウィンドウ(infoWindow)を出すとどうしても上下左右にスクロールが表示されとても見にくい。また、多分スマホなんかでは大きすぎるのではとこの情報ウィンドウを編集することにしました。

この編集に関し、前提としてサイトがCSSにて画像が幅によって拡縮できることが条件です。因みに本サイトでは"image"というCSSが使われています。

取り敢えず幅は180pxとして決め打ち
html/modules/gnavi/js/map.jsを編集してみた330行目辺り
gn_desc[lid]="<div style='width:250px;'><a href='"+gn_url+"/index.php?lid="+lid+u+"'>"+name+"</a><br />"+description+"</div>";
これを単にwidth:250px→width:180pxに変更
gn_desc[lid]="<div style='width:180px;'><a href='"+gn_url+"/index.php?lid="+lid+u+"'>"+name+"</a><br />"+description+"</div>";
これだけだと写真はレスポンシブのcssによって適当なサイズに縮められるがどうもうまく上下左右のスクロールが消えない。そこで

xoops_trust_path/modules/gnavi/main/kml.phpを編集。146行目辺り
$h = $y>0 ? "style='height:".$y."px;margin:5px;'" : "" ;
$desc = "<div align='center' $h><a href='$mod_url/index.php?lid=$lid$op_link'><img src='$imgsrc_photo' /></a></div>".$desc;
これをheight→max-height さらに"image"というCSSを追加して
$h = $y>0 ? "style='max-height:".$y."px;margin:5px;'" : "" ;
$desc = "<div align='center' $h><div class='image'><a href='$mod_url/index.php?lid=$lid$op_link'><img src='$imgsrc_photo' /></a></div></div>".$desc;
と変更すればうまく収まりましたが、縦の写真については長さが長いためかやはり上下左右にスクロールが表示されてしまう。従って写真が縦長の場合は幅を94pxと制限するようにこの部分をさらに編集しました。
if ($y>0 && $rs['res_x'] > $rs['res_y']){
            $h = "style='max-height:".$y."px;margin:5px;'" ;

        } elseif ($y>0 && $rs['res_x'] < $rs['res_y']){
            $h = "style='width:94px;margin:5px 43px 5px 43px;'" ;

        } else {
            $h ="";
        }

$desc = "<div align='center' $h><div class='image'><a href='$mod_url/index.php?lid=$lid$op_link'><img src='$imgsrc_photo' /></a></div></div>".$desc;

現時点では各Gnaviモジュール(ソロツーリングと旅の地図、世界の旅と地図、明石観光と全国宿特集)の情報ウィンドウでは写真の縦横に関係なくスクロールが消えています。ただ、写真の縦横の比率があまりにも違う特殊な場合は不具合が発生するかも知れません。
 
投票数:0 平均点:0.00

  条件検索へ


旅と気ままなフォーラムメニュー

旅と気ままなフォーラム新着投稿

欲しい商品が必ず見つかるメジャーなネットショップ

このサイト内の検索

オンライン状況

14 人のユーザが現在オンラインです。 (1 人のユーザが 旅と気ままなフォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 14

もっと...

Facebook,RSSリンク表示


RSSicon 最新記事のRSS