Googleマップをサイトに埋め込むとき、
「指定した座標が中央にこない」「マーカー（赤いピン）がズレる」
という問題がよく起こります。
実はこれ、Googleマップの仕様によるもので、
普通に取得した埋め込みコード（iframe）では
中心点とピンの位置が必ずしも一致しない ためです。
この記事では、
座標を中心に固定し、マーカーも完全に一致させる安定した埋め込み方法
をまとめます。
STUDIOでもそのまま使えます。
なぜズレるのか？
Googleマップは以下の2つを別々に扱っています。
- 地図の「中心点」
- ピン（マーカー）の「座標」
通常の maps?q=lat,lng や
通常の「埋め込みコード」では
Google側が“最適化”として位置を自動補正するため、
中心がズレたり、マーカーが左に寄ったり します。
解決策：中心点とマーカーを同じ座標で「強制一致」させる埋め込み形式を使う
最も安定するのがpb パラメータを使ったプレイス固定形式。
この形式は、
- 中心点
- マーカーの位置
をどちらも 指定した座標のまま固定 できます。
さらに STUDIO 埋め込みにも完全対応。
実例：東京駅（35.680921, 139.765283）を中央に固定して埋め込むコード
下記をそのまま iframe として貼り付けると、
中央＝東京駅、マーカー＝東京駅 に正確に一致します。
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4145.0800000000004!2d139.765283!3d35.680921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f15!3m3!1m2!1s0x0%3A0x0!2zMzXCsDQwJzUxLjMiTiAxMzljNDUnNTMuMCJF!5e0!3m2!1sja!2sjp!4v000000000000"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
コードのポイント
2d139.765283→ 経度3d35.680921→ 緯度0x0:0x0→ Googleに「この座標そのものを地点として扱え」と指示- マーカーと中心点が同じ座標になる
- Googleの自動補正が入らない
- STUDIOでもエラーなしで動作
ズームの調整も簡単
上記の 4f15 がズーム値です。
- 16 〜 17：より近く
- 14：少し広め
- 12：かなり広い範囲
などに変更できます。
まとめ
Googleマップを埋め込むときに中心がズレるのは、
Googleが自動補正をかける仕様が原因です。
しかし、
pb 形式で地点を固定し、中心点とマーカーを同じ座標に揃える
ことでズレを完全に防ぐことができます。
STUDIOなどのサイトビルダーでも問題なく使え、
マーカーの位置もきれいに中央に表示できます。
