作成したマップをWebページに埋め込むこともできますが、その際に表示位置や倍率を指定する方法があります。
本記事では、Googleマイマップを埋め込む際に、表示位置と倍率を正確に指定する方法について解説します。具体的には、マップのURLに付与するパラメータの説明や、Googleマイマップエンベッドコードの作成方法について紹介します。
これらの方法を習得すれば、埋め込みマップの見栄えをよくし、より使いやすくすることができます。
埋込時に倍率を指定しないと…？
Googleマイマップにおいてはサイト埋込のコードを作成することができますが、その際に何もしないと下図のようにすべてのピンが表示範囲に入るように、自動的に位置と倍率が調整されます。では、例えば、上図で④～⑦の富士山付近のみを表示したい場合にはどうすれば良いでしょうか？
その方法を次のセクションで紹介します。
埋込時の位置と倍率を指定する方法
まずはサイト埋込用のURLを取得します。Googleマイマップのプレビュー画面で「共有」を選択し、「自分のサイトに埋め込む」を選択します。
すると下図のようなサイト埋込用のHTMLコードが取得できます。
<iframe src="https://www.google.com/maps/d/embed?mid=1u6P_s6QlDiwXVi2Ox_aD18bOh_rkAvk&hl=ja&ehbc=2E312F" width="640" height="480"></iframe>前述の通り、このHTMLコードをそのまま表示すると位置と倍率が自動で調整されてしまいます。
これにHTMLコードに位置と倍率を指定するには以下のURLクエリを埋込コードのsrcのURLに追加します。
&ll=35.3800205815023%2C138.7523480894043&z=10つまり、HTMLコードは以下になります。
<iframe src="https://www.google.com/maps/d/embed?mid=1u6P_s6QlDiwXVi2Ox_aD18bOh_rkAvk&hl=ja&ehbc=2E312F&ll=35.3800205815023%2C138.7523480894043&z=10" width="640" height="480"></iframe>このHTMLコードを表示したのが下図です。
富士山付近のみが表示できるような位置と倍率になっていますね。
URLクエリの意味
なんとなく想像のつく方もいるかもしれませんが、さきほどのURLクエリの意味を解説します。&ll=xxxxx の部分
このURLクエリで表示したい地図中心の緯度と経度を指定しています。緯度と経度はカンマ(%2C)で区切りを入れます。
&z=xxxxx の部分
このURLクエリで倍率を指定できます。数値が大きくなると倍率が大きくなり(= 表示範囲が狭くなり)、数値が小さくなると倍率が小さくなり(= 表示範囲が広くなり)ます。
楽な方法
ここまででURLクエリの指定方法と意味はわかったかと思いますが、毎回、緯度と経度および倍率を手動で指定するのは面倒ですよね？そこで楽にこのURLクエリを取得する方法を紹介します。
まずはプレビュー画面で表示したい位置と倍率を調整します。
すると、URLは下記のようになります。
https://www.google.com/maps/d/u/3/edit?hl=ja&mid=1u6P_s6QlDiwXVi2Ox_aD18bOh_rkAvk&ll=35.36395898068974%2C138.72581573400112&z=11もうお分かりかもしれませんが、URLにさきほどの緯度/緯度および倍率のURLクエリがありますね。
あとはこれをコピペして使用すればOKです。
(参考) 続き番号を途中から始める方法
また、今回の位置と倍率を指定する方法を使用すると、Googleマイマップの続き番号において、番号を途中から始めることが可能です。詳しくは以下の記事にまとめていますので、よろしければそちらもご覧ください。
まとめ
この記事ではGoogleマイマップにおいて、サイト埋込時の位置と倍率を指定する方法を紹介しました。この記事の方法を使用して、Googleマイマップの位置を自分好みに調整しましょう！