GnaviモジュールのMap読み込みスピードアップ
- このフォーラムに新しいトピックを立てることはできません
- このフォーラムではゲスト投稿が禁止されています
2件表示
(全2件)
すべてのトピック一覧へ
投稿ツリー
-
GnaviモジュールのMap読み込みスピードアップ
(タツ, 2024/5/13 14:48)
-
Gnaviモジュール不具合の対処
(タツ, 2024/6/3 15:29)
タツ
投稿数: 2420
投稿数: 2420
今さらですが、どうしてもGnaviモジュールで地図の読み込みが遅いのが気になり速くする方法を検索していると次のようなページが見つかりました。
引用：
次のように記載されています。
これによると
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行目に対象となる
これを最後のスクリプトの位置に移動します。
127行目の
上記をまとめるとitem.phpについては111行目～130行目を以下のように変更したことになります。
なお、この下の行にある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を利用して計測しましたが読み込みが速くなっています。
引用：
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."&key=".$gnavi_googlemapapi_key."&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."&key=".$gnavi_googlemapapi_key."&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."&key=".$gnavi_googlemapapi_key."&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
2件表示
(全0件)
すべてのトピック一覧へ
