【Google Maps】マーカー付きリンクの貼り方

　マップをサイトに埋め込むときは、お店の場所などを閲覧者に伝えたい場合が多いです。このとき閲覧者は、その場所を自分のスマホに保存しておきたいわけで、クリックやタップをすると、その地点を中心とした Google Maps が開くことが望ましいです。

　 Google Maps では、このような Google Maps リンクを標準的に設けているようで、例えば下記のリンクにより、所望の経緯度を中心とする Google Maps が別ウインドウで開きます。

テスト１：東京駅

/*基本ルール*/
https://www.google.co.jp/maps/@"緯度","経度","ズームレベル"z

/*テスト１：東京駅*/
https://www.google.co.jp/maps/@35.6814,139.7665,15z

　特に Android の場合、Google Maps アプリが自動的に開きますが、このように Web から直接 アプリに遷移するリンクはディープリンクと呼ばれているようです。

　閲覧者は見た場所を自分のスマホに保存しておきたいわけで、新たに開くマップ上にはマーカーも記載されている方が便利です。下記のリンクにより、マーカー付きの Google Maps が別ウィンドウで開きます。

テスト２：東京駅

/*基本ルール*/
https://www.google.co.jp/maps/place/"緯度", "経度"/@"緯度","経度","ズームレベル"z/data

/*テスト２：東京駅*/
https://www.google.co.jp/maps/place/35.6814,139.7665/@35.6814,139.7665,15z/data

　このリンクを貼ることで、画像をクリックするとマーカー付きの Google Maps が別ウィンドウで開くようにしてみました。

<a href="https://www.google.co.jp/maps/place/35.6814,139.7665/@35.6814,139.7665,15z/data" target="_blank" rel="noopener noreferrer">
<img src="画像URL" width="500" height="337"/></a>

　こういったリンクを上手く使えれば、場所を伝えるために埋め込みマップを連打する必要も無くなるので、サイトをコンパクトにしていけるのかなと思います。