Googleマップ – 東京発、雲に乗って

これまで案件でGoogleマップAPIを使いすぎたせいか、APIを使わずに埋め込む方法を忘れてしまったのでメモ。

<iframe 
  width="600" 
  height="450" 
  style="border:0" 
  loading="lazy" 
  allowfullscreen 
  src="https://maps.google.co.jp/maps?output=embed&q=ここに住所を入れる"
></iframe>

<iframe

width="600"

height="450"

style="border:0"

loading="lazy"

allowfullscreen

src="https://maps.google.co.jp/maps?output=embed&q=ここに住所を入れる"

></iframe>

例：

<iframe 
  width="600" 
  height="450" 
  style="border:0" 
  loading="lazy" 
  allowfullscreen 
  src="https://maps.google.co.jp/maps?output=embed&q=東京都墨田区押上1丁目1-2"
></iframe>

<iframe

width="600"

height="450"

style="border:0"

loading="lazy"

allowfullscreen

src="https://maps.google.co.jp/maps?output=embed&q=東京都墨田区押上1丁目1-2"

></iframe>

Googleマップで表示されている範囲内に存在する店舗を検索するシステムを作っています。
その過程で必要になった処理です。JavaScriptを使用します。

// マップオブジェクトをgoogle_mapとします

var bounds = google_map.getBounds();

var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();

// 左上（北西）の座標
var topLeftLat = northEast.lat();
var topLeftLng = southWest.lng();

// 右下（南東）の座標
var bottomRightLat = southWest.lat();
var bottomRightLng = northEast.lng();

console.log("左上: " + topLeftLat + ", " + topLeftLng);
console.log("右下: " + bottomRightLat + ", " + bottomRightLng);

// マップオブジェクトをgoogle_mapとします

var bounds = google_map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

// 左上（北西）の座標

var topLeftLat = northEast.lat();

var topLeftLng = southWest.lng();

// 右下（南東）の座標

var bottomRightLat = southWest.lat();

var bottomRightLng = northEast.lng();

console.log("左上: " + topLeftLat + ", " + topLeftLng);

console.log("右下: " + bottomRightLat + ", " + bottomRightLng);

タグ: Googleマップ

【Googleマップ】公式の「地図を埋め込む」を使わずに、かつAPIも使わずに、住所情報からサイトに地図を埋めこむ

Googleマップで表示範囲の左上と右下の緯度経度を取得する