Gnaviモジュール地図を高度なマーカーに移行する

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

なし Gnaviモジュール地図を高度なマーカーに移行する

msg# 1
depth:
0
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2025/5/27 11:05
タツ  管理人   投稿数: 2491
Gnaviモジュールの地図はgooglemapのapiを利用しています。よく見てみると次のようなことがアナウンスされていました。
引用：
google.maps.Marker（v3.56）は、2024 年 2 月 21 日にサポートが終了しました。つきましては、新しい google.maps.marker.AdvancedMarkerElement クラスに移行することをおすすめします。高度なマーカーでは、従来の google.maps.Marker クラスと比べて、大幅な改善が加えられています。
https://developers.google.com/maps/documentation/javascript/advanced-markers/migration?hl=ja

ただし、今のところgoogle.maps.Markerの廃止予定はないようです。とはいうものの新しいgoogle.maps.marker.AdvancedMarkerElementクラスに移行しておいた方が良いのではないかとできるだけモジュールのオリジナルコードは変更せずに編集してみました。

Gnaviモジュールでの主な変更要領手順は次の通りです。

1.新しい地図に変更
trust_path/modules/gnavi/include/common_javalang.inc.php
3行目
$gnavi_googlemap_url="https://maps-api-ssl.google.com";
↓
$gnavi_googlemap_url="https://maps.googleapis.com";
と変更しました。
引用：
高度なマーカーに移行する手順として次のように記載されています。
・マーカー ライブラリをインポートするためのコードを追加します。以前のバージョンのマーカー（google.maps.Marker）にはこの要件がないことにご注意ください。
・google.maps.Marker を google.maps.marker.AdvancedMarkerElement に変更します。
・地図の初期化コードに マップ ID を追加します。まだマップ ID がない場合は、テスト用の mapId: 'DEMO_MAP_ID' を追加することもできます。

この事を基準に編集を行います。

2.マーカー ライブラリをインポートするためのコード(&libraries=marker)を追加
以下のscriptはいずれもscript類の一番最後に設置しました。オリジナルではinitmapという関数を呼び出した後別のスクリプトから必要な関数を呼び出しています。この別の呼び出し関数の要素は削除し、ダイレクトにそれぞれの関数を呼び出すことにしました。これが正しいかどうかはよくわかりません。そもそもinitmapという関数はmap.jsの中に存在しません。

■xoops_trust_path/modules/gnavi/admin/category.php
削除→412行目　google.maps.event.addDomListener(window, 'load', function(){ InputGMap(); });

(callback=initmap 　→　callback=InputGMapへ)
変更後→<script async src='$gnavi_googlemap_url/maps/api/js?key=$gnavi_googlemapapi_key&libraries=marker&loading=async&callback=InputGMap'></script>

■xoops_trust_path/modules/gnavi/main/item.php
削除→124行目　google.maps.event.addDomListener(window, 'load', function(){ ShowItemGMap(); });

(callback=initmap 　→　callback=ShowItemGMapへ)
113行目変更後script類の一番最後へ→<script async src='$gnavi_googlemap_url/maps/api/js?key=$gnavi_googlemapapi_key&libraries=marker&loading=async&callback=ShowItemGMap'></script>

■xoops_trust_path/modules/gnavi/main/map.php
削除→227行目　google.maps.event.addDomListener(window, 'load', function(){ ShowGMap(); });

(callback=initmap →　callback=ShowGMapへ)
214行目変更後script類の一番最後へ→<script async src='$gnavi_googlemap_url/maps/api/js?key=$gnavi_googlemapapi_key&libraries=marker&loading=async&callback=ShowGMap'></script>

■xoops_trust_path/modules/gnavi/main/submit.php
削除→923行目　google.maps.event.addDomListener(window, 'load', function(){ InputGMap(); });

(callback=initmap →　callback=InputGMapへ)
917行目変更後script類の一番最後へ→<script async src='$gnavi_googlemap_url/maps/api/js?key=$gnavi_googlemapapi_key&libraries=marker&loading=async&callback=InputGMap'></script>


3.地図の初期化コードに マップ ID を追加
マップ IDの取得方法はここを参考に
https://developers.google.com/maps/documentation/maps-static/map-ids/get-map-id?hl=ja
あるいは
テスト用の mapId: 'DEMO_MAP_ID' を追加します。

■html/module/gnaviモジュールを利用しているファイル名/js/map.js
64行目にmapId: 'DEMO_MAP_ID'を追加
var myOptions = {
zoom: gn_iz,
center: myLatlng,
scaleControl :true,
mapTypeId:google.maps.MapTypeId[gn_mt]
};
↓
var myOptions = {
zoom: gn_iz,
center: myLatlng,
scaleControl :true,
mapTypeId:google.maps.MapTypeId[gn_mt]
mapId: 'DEMO_MAP_ID'　//mapIdの追加
};



4.マーカークラスの変更
google.maps.Marker を google.maps.marker.AdvancedMarkerElement に変更します。

html/module/gnaviモジュールを利用しているファイル名/js/map.js内
google.maps.Marker
↓変更
google.maps.marker.AdvancedMarkerElement
と全て変更します。


5.Gnaviモジュールで利用されている画像アイコンをマーカーに使う
マーカーを設置するにあたってGnaviではマーカーをイメージを利用しているためそのままでは利用することができません。新しいクラスで画像ファイルをマーカーを利用するためには画像ファイルをimg要素として設定し、マーカーをcontentで指定することになります具体的には

html/module/gnaviモジュールを利用しているファイル名/js/map.js内の例
129行目
var iconimage = {
size: new google.maps.Size(parseInt(p[1]), parseInt(p[2])),
anchor: new google.maps.Point(parseInt(p[6]), parseInt(p[7])),
url: p[0]
};
↓変更
var iconimage = document.createElement('img');//img要素として設定
iconimage.src = p[0];


さらに
150行目
gn_mymk = new google.maps.Marker({
position:myLatlng,
// draggable : true,
icon: iconimage,
// shadow : iconshadow,
map: gn_map,
title: p.title
});

n_mymk = new google.maps.marker.AdvancedMarkerElement({
position:myLatlng,
// draggable : true,
content: iconimage,//contentを使用する
// shadow : iconshadow,
map: gn_map,
title: p.title
});

ただし配列を利用し複数のマーカーを利用する場合、ダイレクトにcontentにimg要素の配列を設定すると画像マーカーが１つしか使えないという不具合が発生したので直前に代替えマーカーを利用するとうまく表示されました。

html/module/gnaviモジュールを利用しているファイル名/js/map.js内の例
421行目
gn_mk[lid] = new google.maps.Marker({
position: ll,
content: iconimage[icd],
map: gn_map
});

↓

iconimagecpy = document.createElement('img');//代替えマーカーを利用
iconimagecpy.src = iconimage[icd].src;
gn_mk[lid] = new google.maps.marker.AdvancedMarkerElement({
position: ll,
content: iconimagecpy,
map: gn_map

});


6.マーカーのgetPosition()は使用できない

html/module/gnaviモジュールを利用しているファイル名/js/map.js
458行目
gn_infowindow.setContent(gn_desc[lid]);
gn_infowindow.open(gn_map,gn_mk[lid]);

gn_map.panTo(gn_mk[lid].getPosition());
↓getPosition()は使用不可のため
gn_map.panTo(gn_mk[lid].position); //gn_mk[lid].positionに変更


Gnaviモジュールのmap.jsではアイコンの影を設定していますが、これは使えなくなっています。また今回の編集にてマップのバージョン設定も無効になっています。
投票数:0 平均点:0.00

投稿ツリー


     条件検索へ

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

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

ログイン

オンライン状況

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

登録ユーザ 0 ゲスト 26

Facebookリンク表示

検索

アクセスカウンタ

今日 : 437
昨日 : 2164
総計 : 1937120