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

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

　 Google Map では、このような Google Map リンクを標準的に設けているようで、例えば下記のリンクにより、所望の経緯度を中心とする Google Map が別ウインドウで開きます。Google Map のスクリーンショットをサイト内に貼り付けることは、利用規約の違反にあたるのでここでは割愛します（参考）。

テスト１：東京駅

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

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

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

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

テスト２：東京駅

/*基本ルール*/
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 Map が別ウィンドウで開くようにしてみました。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>

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

ちょっと宣伝

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

パントレ開発部