見出し画像

noteにGoogleマップ埋め込みする時にピンを真ん中にする方法

自分向け備忘録

noteで記事を書く時に、GoogleMapで目的地を表示して共有ボタンを押すと、ピンが右にずれたりスマホでうまく表示できなかったり最悪の場合まってく位置そのものがズレてしまう問題

たとえば先日いった「裏庭」の地図をGoogleマップで検索し、その共有ボタンを押して貼った地図がこちら。

Googleマップで裏庭 三島と検索し、左ペインの「共有」を押す
共有ウィンドウから「リンクをコピー」を押す
https://goo.gl/maps/krZ6zFwAj15UsGF49

↑のコードをNoteに貼って埋め込んだのが↓

見事に右にずれる。そしてこれをスマホで表示すると

上記記事のスマホ表示版

すでにピンすら見えない、、、、、。
もちろんズラすと見えるんだけど、これじゃ場所を表示する目的を果たせていない。

これを是正する方法を見つけた。手順は以下(超面倒くさい。。)

手順1)GoogleMapをスマホのブラウザで表示

手順2)同じやりかたで目的地を検索

手順3)PC版と同じ方法で共有→URLコピー

https://www.google.co.jp/maps/place/%E3%80%92411-0857+%E9%9D%99%E5%B2%A1%E7%9C%8C%E4%B8%89%E5%B3%B6%E5%B8%82%E8%8A%9D%E6%9C%AC%E7%94%BA%EF%BC%91%EF%BC%91%E2%88%92%EF%BC%95+%E8%A3%8F%E5%BA%AD/@35.1210788,138.9139273,19z/data=!4m14!1m7!3m6!1s0x60199a8212e539dd:0xd7533d6a8aba2fc5!2z44CSNDExLTA4NTcg6Z2Z5bKh55yM5LiJ5bO25biC6Iqd5pys55S677yR77yS4oiS77yR77yX!8m2!3d35.1209317!4d138.9141142!16s%2Fg%2F11fx3wykx7!3m5!1s0x60199a826b5948ab:0x6274fd887d555b57!8m2!3d35.1210788!4d138.9139273!16s%2Fg%2F1td0sykq?hl=ja

↑この方法で取得できた共有リンクを貼りつけて埋め込んだのが↓

↓スマホでこのnoteの記事表示しても大丈夫

なんでこうなるのか理由はよくわかってません。。
PC版の検索の仕方がおかしいのかな?
いずれにしても、うまく地図表示できていない方はこちらを参考にしてみてください。

いいなと思ったら応援しよう!

この記事が参加している募集