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

　Google Maps のリンクをサイト内に貼るときは、お店の場所などを閲覧者に伝えたい場合が多いです。このとき閲覧者は、その場所を自分のスマホに保存しておきたいわけで、クリックやタップをすると、その地点を中心とした 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 上にはマーカーも記載されている方が便利です。下記のリンクにより、マーカー付きの 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 が別ウィンドウで開くようにしてみました。img タグを a タグで囲っているだけです。

<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>

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

ちょっと宣伝

　当サイトは地図を使った海外旅ブログまとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧（クリック数順）が開きます。記事数が多い国ほど赤く、地名もその国で記事が多い都市の文字が大きくなるようにしています。ぜひ覗いてみてください。
　当サイトで海外旅ブログを執筆することも可能です（無料）！　また既にブログ/ YouTube をお持ちの方も、当サイトからリンクを貼ることができるようになっています。気になる方は「当サイトについて」をご覧ください。

パントレ管理部