Zenn
👌

Google Map APIで立てたピンの位置のズレを直す

2024/12/09に公開
TypeScript
Google Map
tech

Google Map APIで特定の位置にピンを立てたとき、下記のようにピンの位置がズレることがあります。

Google Mapのピンの位置(正解)

自分で立てたピンの位置(何故かズレる)
私は先方に「海の上にピンが立ってる!」とご指摘いただき、気付きました。
今回はこちらの解決方法を書いていきます。

ズレが発生する原因

ほとんどこちらの記事の通りです。
https://macoblog.com/googlemap-pin-zureru
どうやら測地系が違うとのこと。要するに位置を測る基準地が2者間で違う。

  • Google Map → 日本版
  • Google Map API → 世界版

となっているらしい。

おそらくあなたはGoogle MapのURIからpositionの値を取ってきたのでしょう。

position: new google.maps.LatLng({
    lat: 35.6352015,
    lng: 139.8782193
})

このようにGoogle MapのURIから座標を取得すると、日本版測地系を世界版測地系で描画していることになるため、ズレが発生します。

解決方法

解決方法は世界版の測地系を取得し、描画すればいいだけです。ライブラリで変換する方法もあるみたいですが最初から正しい値を入力すればいい。

こちらのGeocodingから検索することで、世界版の測地系を取得できます。
https://www.geocoding.jp
Google Map同様、住所だけでなく「ディズニーランド」といった地名でも検索することができる。

検索結果：

先ほどの描画部分を取得した値に書き換えます

position: new google.maps.LatLng({
-    lat: 35.6352015,
-    lng: 139.8782193
+    lat: 35.632896,
+    lng: 139.880394
})


修正前

修正後

Google Mapの表示
正しい位置にピンを立てことができた。

まとめ

  • Google Map APIは日本版の測地系で描画される
  • Google MapのRUIから取得したpositionは日本版の測地系のため、ずれが生じる
  • Geocodingというサイトを使えば世界版の測地系のpositionの値を取得することができる
  • 測地系が一致していれば正しい位置にピンを立てることができる

参考:https://macoblog.com/googlemap-pin-zureru/

Discussion