旅と気ままなフォーラム

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

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

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

msg# 1

depth:: 0

前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2024/5/13 14:48 | 最終変更

タツ

投稿数: 2447

今さらですが、どうしても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モジュールにはこの記述の編集対象ファイルが４カ所あります。
・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を利用して計測しましたが読み込みが速くなっています。

投票数:3 平均点:3.33

投稿ツリー

GnaviモジュールのMap読み込みスピードアップ (タツ, 2024/5/13 14:48)
- Gnaviモジュール不具合の対処 (タツ, 2024/6/3 15:29)

今日 :	171
昨日 :	285
総計 :	1754349

ソロツーリングと気ままな旅