ブログについて
GoogleMapの縮尺変更
2021.09.28
制作
技術
こんにちは。制作部の中山です。
昨年書いた「【API不要】Google Mapの色を変える／iframe形式」の記事の中で、「Google maps API形式が実質有料となったこと」や「店舗案内など簡単な使用目的ではiframe形式で地図を埋め込んでいる」といったことに触れていますが、今回もGoogle Mapのiframe形式の小技についてお話していければと思います。
Google Mapのiframe形式は、Google Map上でタグを発行し、htmlへ貼り付けるだけでサイト上にGoogle Mapを表示することができるとても便利なサービスです。 弊社の会社概要ページのアクセス部分もこの方法で地図の埋め込みを行っておりますが、地図に修正があった場合でもGoogle側で更新された内容が埋め込んだ地図へリアルタイムで反映されますし、埋め込んだマップからGoogle Mapsへアクセスし経路を検索することも可能です。またGoogle Mapのサービスを利用しているユーザー数が多い為、外部サイトでも使い慣れたGoogle Mapでアクセス情報を確認できるといったこと自体が、エンドユーザーに安心感を与えるメリットになっていると思います。
多くのサイトで利用されているのを見かけるGoogle Mapのiframe形式ですが、よく残念だなと感じることがあります。それは縮尺です。 前述したとおり発行したタグをhtmlへ貼り付けてGoogle Mapを表示させるわけですが、いざ貼り付けてみるとデフォルトの縮尺で表示されてしまい、意図した縮尺で表示されていないといったことが多々あるのです。
例えば駅チカの店舗に行きたい場合、大多数の人は電車で駅まで行き、そこから徒歩で店舗へ向かうでしょう。しかしアクセスページに表示されているマップが広域マップだったりするとどうでしょうか？わざわざ拡大表示して確認してといった具合で、ひと手間かかってしまいます。せっかくマップを埋め込んでいるのであれば、適切な縮尺でマップを表示しておくのがベストだと思います。
埋め込みの際に縮尺を変更する方法
前置きが長くなりましたが、それでは実際にiframe形式でGoogle Mapを埋め込む際、拡大率や縮小率の縮尺を調整する方法をご紹介していければと思います。 方法は至って簡単で、iframe内の数値を自分で書き換えていくだけです。
今回は例として、東京タワーを目的地として地図を表示してみましょう。本題から外れるため今回はタグ発行の流れは割愛しますが、下記がGoogle Mapから発行した埋め込み用のタグになります。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683723!2
d139.7432442155496!3d35.65858048019951!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x
60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1630593
272661!5m2!1sja!2sjp" width="680" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
実際にそのまま貼り付けてみるとこのような形になります。
それでは、このタグを実際にタグを編集し縮尺を変更してみましょう。編集するのはタグのsrc内「!4f13.1」部分です。少し探すのが大変ですが…これはデフォルトの数値なので慣れてしまえばすぐに見つけることができると思います。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683723!2
d139.7432442155496!3d35.65858048019951!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0
x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v16305
93272661!5m2!1sja!2sjp" width="680" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
この「!4f13.1」の後半部分「13.1」が縮尺を設定している数値になるので、「13（.1はそのまま）」に1～180までの間の数値を設定して縮尺変更をしましょう。なお数字が小さいほど詳細、大きいほど広域となります。
参考に実際に数値を調整してどのように表示されるかサンプルを掲載しておきます。
値を179に設定した場合
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468372
3!2d139.7432442155496!3d35.65858048019951!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f179.1!3m3!1
m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sj
p!4v1630593272661!5m2!1
sja!2sjp" width="680" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
値を100に設定した場合
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683723!2d139.7432442155496!3d35.6585804801995
1!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f100.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x48
1a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1630593272661!5m2!1
sja!2sjp" width="680" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
値を30に設定した場合
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683723!2d139.7432442155496!3d35.6585804801995
1!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f30.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x48
1a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1630593272661!5m2!1
sja!2sjp" width="680" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
値を1に設定した場合
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683723!2d139.7432442155496!3d35.6585804801995
1!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f1.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x48
1a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1630593272661!5m2!1
sja!2sjp" width="680" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
まとめ
いかがでしたでしょうか？
ほんのひと手間で、立地にあった縮尺でGoogle Mapを埋め込むことが可能です。
ぜひみなさんもお試しください。
それでは今回はこのあたりで。
最後まで読んでいただきありがとうございました。