GnaviモジュールのMap読み込みスピードアップ

このトピックの投稿一覧へ

なし GnaviモジュールのMap読み込みスピードアップ

msg# 1
depth:
0
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2024/5/13 14:48 | 最終変更
タツ  管理人   投稿数: 2409
今さらですが、どうしてもGnaviモジュールで地図の読み込みが遅いのが気になり速くする方法を検索していると次のようなページが見つかりました。
引用:
Google Maps API のヒント: ページの読み込み時間をスピードアップ 2015年10月29日木曜日 https://developers-jp.googleblog.com/2015/10/google-maps-api.html

次のように記載されています。
<script src="https://maps.googleapis.com/maps/api/js"></script>
...
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng:150.644},
zoom:8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

↓こうなりました。

<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng:150.644},
zoom:8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>


これによると
google.maps.event.addDomListener(window, 'load', initMap);を削除し、
後述で
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
とページを全て読み込んだ後に必要なコマンドを呼び出すと解釈できます。早速編集することとしました。

Gnaviモジュールにはこの記述の編集対象ファイルが4カ所あります。
・xoops_trust_path/modules/gnavi/admin/category.php
・xoops_trust_path/modules/gnavi/main/item.php
・xoops_trust_path/modules/gnavi/main/map.php
・xoops_trust_path/modules/gnavi/main/submit.php

例えばxoops_trust_path/modules/gnavi/main/item.phpについて考えてみると

115行目に対象となる

<script src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&amp;key=".$gnavi_googlemapapi_key."&amp;callback=initMap' type='text/javascript'></script>
このコードの
callback=initMapの部分を
↓
callback=ShowItemGMapに変更

これを最後のスクリプトの位置に移動します。

127行目の
google.maps.event.addDomListener(window, 'load', function(){ ShowItemGMap(); })
このコードを削除します


上記をまとめるとitem.phpについては111行目~130行目を以下のように変更したことになります。
変更前
//xoops_module_header
$xoops_module_header = $xoopsTpl->get_template_vars( "xoops_module_header" ) ."\n" ."<link rel='stylesheet' type='text/css' href='css/gnavi.css'/>";
if($gnavi_usegooglemap && (floatval($photo['lng'])<>0 || floatval($photo['lat'])<>0 )){
$xoopsTpl->assign( 'map' , _MD_GNAV_MAP_SHOW ) ;
$xoops_module_header .="<script src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&amp;key=".$gnavi_googlemapapi_key."&amp;callback=initMap' type='text/javascript'></script>
<script src='js/map.js' type='text/javascript' charset='utf-8'></script>
<script type='text/javascript'>
//<![CDATA[
$gnavi_lang_java
$mykmls
gn_ilt=".$photo['lat'].";
gn_ilg=".$photo['lng'].";
gn_iz=".$photo['zoom'].";
gn_it='".$photo['mtype']."';
".$arricon."
google.maps.event.addDomListener(window, 'load', function(){ ShowItemGMap(); });
//]]>
</script>";
}

↓変更後
//xoops_module_header
$xoops_module_header = $xoopsTpl->get_template_vars( "xoops_module_header" ) ."\n" ."<link rel='stylesheet' type='text/css' href='css/gnavi.css'/>";
if($gnavi_usegooglemap && (floatval($photo['lng'])<>0 || floatval($photo['lat'])<>0 )){
$xoopsTpl->assign( 'map' , _MD_GNAV_MAP_SHOW ) ;
$xoops_module_header .="
<script src='js/map.js'></script>
<script>
//<![CDATA[
$gnavi_lang_java
$mykmls
gn_ilt=".$photo['lat'].";
gn_ilg=".$photo['lng'].";
gn_iz=".$photo['zoom'].";
gn_it='".$photo['mtype']."';
".$arricon.";

//]]>
</script>
<script async src='".$gnavi_googlemap_url."/maps/api/js?v=".$gnavi_gmapapi_ver."&amp;key=".$gnavi_googlemapapi_key."&amp;callback=ShowItemGMap' ></script>";
}

なお、この下の行にあるRSSに関しても同様の場所にasyncを記述追加をしましたがその確認はしていません。


同様に残りの以下3カ所についても同様に変更しています。
・xoops_trust_path/modules/gnavi/admin/category.php
・xoops_trust_path/modules/gnavi/main/map.php
・xoops_trust_path/modules/gnavi/main/submit.php
callback=○○の部分については各ファイルによって違いがあります。

さて、結果ですが、PageSpeed Insightsを利用して計測しましたが読み込みが速くなっています。
投票数:2 平均点:5.00

投稿ツリー


     条件検索へ

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

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

ログイン

オンライン状況

29 人のユーザが現在オンラインです。 - 4 人のユーザが 旅と気ままなフォーラム を参照しています。.

登録ユーザ 0 ゲスト 29

Facebook,RSSリンク表示

検索

アクセスカウンタ

今日 : 167
昨日 : 283
総計 : 1638740