レスポンシブ対応、Googleマップの中心にピンを表示するテクニック -the new code

Googleマップをレスポンシブ対応にするのは、簡単です。embedのコードから高さと幅を削除して、ラッパーを用意するだけです。しかし、クリティカルな問題が一つあります。サイズを水平方向に変更した際に、地図の端が切断されてしまいます。

Googleマップの中心にピンを表示し、且つレスポンシブ対応にするテクニックを紹介します。

サイトのキャプチャ

Create An Auto-Centered Responsive Google Map

以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

デモ

デモでは、デスクトップでも、タブレットでも、スマホでも、そしてコンテンツのサイズを変更しても、Googleマップの中心にピンが表示されています。

サイトのキャプチャ

デモページ

実装

Step 1: 空の容器を用意する

Googleマップを埋め込むには、Googleマップのオプションで表示されるiframeを使うのではなく、空のdiv要素を用意します。

容器はレスポンシブ対応にするため、サイズはpxではなく、%で指定します。

地図をより高くするためには、「padding-top」の値を増やします。

Step 2: Googleマップを埋め込む

用意したdiv要素の容器に、GoogleマップAPIを使って埋め込みます。
まずは、外部スクリプトをbodyの一番下に記述します。

外部スクリプトの下に、スクリプトを記述します。

実装のポイント

1. 「google.maps.LatLng」の値は、表示する地図の緯度と経度です。
デモで表示しているタイムズ・スクエアだと、以下のURLになります。最初の数値が緯度で、2番目の数値が経度です。

Googleマップのオプションで埋め込もうとすると、次のようにコードが表示されます。

この埋め込み用のコードで、経度はURLのすぐ後に、緯度は2番目に記述されています。

2. ズームは、地図のデフォルトの外観のためにズームレベルです。「z」によって明示され、両方のURLで見ることができます。

3. 「contentString」はそれがクリックされる時に現れるターゲットのためのラベルです。

top of page

©2016 coliss