【Google Maps】マーカー付きのリンクを貼る方法について

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

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

テスト1:東京駅

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

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

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

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

テスト2:東京駅

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

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

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

テスト3:画像クリックで Google Maps が開く
© OpenStreetMap contributions, Tiles Ⓒ HOT
<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>

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です