APIを使って埋め込んだグーグルマップのピンがズレる

グーグルマップについて質問します。

APIを使って、グーグルマップを埋め込んでいるのですが、
正しい緯度経度を入力しているのにピンがずれてしまします。
ソースを載せさせていただきますので、おかしい点がありましたら
ご教示いただけませんか。

なお、拡大縮小の+-も、ズームインしていけばピンが合うのですが、
ズームアウトすると位置がずれてしまうため、いまは非表示にしています。
そちらもご存知でしたら、教えていただけますと助かります。
どうぞよろしくお願いいたします。



<script language="JavaScript">// googlemapV3のjavascript（緯度経度入力がある場合）
var GMAPmarker = new Array();
var map = null;
var GMAP_icon_key = new Array(0,0,0,0,0,0,0,0,0,0);
var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶
var InfoWindow = new google.maps.InfoWindow();
// 情報ウインドウの生成とクリックイベント関数の登録処理
function setMarkerListener(marker, contentString) {
// 情報ウィンドウの生成
var InfoWindow = new google.maps.InfoWindow({
content: contentString
});
// マーカーのクリックイベントの関数登録
google.maps.event.addListener(marker, "click", function(){
//先に開いた情報ウィンドウがあれば、closeする
if (currentInfoWindow) {
currentInfoWindow.close();
}
//情報ウィンドウを開く
InfoWindow.open(marker.getMap(), marker);
currentInfoWindow = InfoWindow;
});
}
var tmp = GMAP_OBJ[0][3].split(",");
center = new google.maps.LatLng(tmp[0],tmp[1]);//中心座標
var styles = [
{
stylers: [

]
}
];

var options = { // 初期設定オプション
zoom: 18, // ズーム・レベル
center: center,
disableDefaultUI: true,
scrollwheel: false,
panControl: false,
zoomControl: false, //非表示
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP, // マップタイプ。ROADMAP、SATELLITE、TERRAIN、HYBRID から選択
styles: styles
};
map = new google.maps.Map(document.getElementById("GMAP"), options);
var tmp = new Array();
for (i = 0; i < GMAP_OBJ.length; i ++) {
if (GMAP_OBJ[i] || GMAP_OBJ[i][0]) { GMAP_icon_key[(GMAP_OBJ[i][0])]++; icon_num = GMAP_icon_key[(GMAP_OBJ[i][0])]; }
var tmp = GMAP_OBJ[i][3].split(",");
var point = new google.maps.LatLng(tmp[0],tmp[1]);
var contentString = GMAP_OBJ[i][4];
// マーカー画像を作成
var markerImg = new google.maps.MarkerImage(
'../../buy/img/gmapf1_1.png', // マーカーの画像URL
new google.maps.Size(24, 34), // マーカーのサイズ
new google.maps.Point(0, 0), // 画像の基準位置
new google.maps.Point(24, 34) // Anchorポイント
);
// マーカーを生成　　
var marker = new google.maps.Marker({
map: map,
position: point,
content: contentString,
icon: markerImg
});
// 情報ウインドウの生成とクリックイベント関数の登録処理
setMarkerListener(marker, GMAP_OBJ[i][4]);
GMAPmarker[i] = marker;
}
</script>

No.2 回答者： fujillin 回答日時： 2020/05/16 23:52

No1です。

＞グーグルのデフォルトのピン画像に変えましたら、うまくいきました
多分、No1の推測が当たっているのではないかと想像します。
デフォルトのアイコンなら、当然のことですが、サイズやアンカーは正しく設定されているでしょうから。

No.1 回答者： fujillin 回答日時： 2020/05/16 18:32

こんにちは

google mapが完全登録制になってからはさわっていませんので、バージョンも変わっているとは思いますが・・・

ご提示のコードをざっと見たところ、GMAP_OBJの定義が見当たらないので、どのようなデータ構造になっているのかもわかっていませんが、

＞ズームインしていけばピンが合うのですが、
＞ズームアウトすると位置がずれてしまうため、
から推測すると、ズームインしたときでも（地図上の距離ではなく）一定のピクセル分ずれていたりはしませんか？
もしも、ずれ方がそのようなものであるなら、anchorPointの設定がずれているのではないかと推測されます。

※ MarkerImageというクラスがリファレンスでは見つけられなかったので、MaskerのIcon設定と同様の構造と仮定して回答しています。
https://developers.google.com/maps/documentation …

※ また、ドキュメントもだいぶ変わったようなので、半分は旧い記憶による回答ですので、外している場合はスルーしてください。

この回答へのお礼

回答いただき、ありがとうございました！
よくわからないのですが、グーグルのデフォルトのピン画像に変えましたら、うまくいきました。

お礼日時：2020/05/16 23:15