はじめに
React × Supabase を使って自習スポット検索アプリを開発しているとき、
「地図上でスポットを表示し、クリックしたら Googleマップで開けるようにしたい」
という場面がありました。
つまり、
1.まずアプリ上で地図を表示し、Supabaseから取得したスポットをピンとして描画。
2.そのピンをクリックしたときに、Googleマップで正確な位置を開く。
ここでは、その実現方法についてまとめます。
基本のURL構造
Googleマップでは、以下のように書くことで
任意の緯度・経度を指定して開くことができます。
https://www.google.com/maps?q=<lat>,<lng>
たとえば、
緯度: 49.2827
経度: -123.1207
を表示したい場合
このリンクをブラウザで開くと、
その地点をピン付きで表示してくれます。
JavaScriptで動的に作る
Reactなどで変数を使いたいときは、
テンプレートリテラルを使ってURLを組み立てます。
const lat = 49.2827;
const lng = -123.1207;
const googleMapUrl = `https://www.google.com/maps?q=${lat},${lng}`;
console.log(googleMapUrl);
// → https://www.google.com/maps?q=49.2827,-123.1207
テンプレートリテラルを使うことで、
文字列の中に変数 ${} を埋め込めます。
Reactで使う例
たとえば、Supabase からスポット情報を取得して、地図上にピンを表示しているとします。
<a
href={`https://www.google.com/maps?q=${spot.latitude},${spot.longitude}`}
target="_blank"
rel="noopener noreferrer"
>
Google Mapsで開く
</a>
このように書くと、地図上のピンをクリックしたときに、そのスポットの位置を Googleマップで開くことができます。