【Snow Monkey】一瞬で画面幅一杯にGoogleMapを表示する方法

こんにちわ、@taichi_kimuraです。

弊社では基本的にWordPressとSnowMonkeyを使ったサイト制作をさせていただいております。

色々なことがローコードで開発できますが、今回はGoogle Mapの表示についてです。

この記事は社内マニュアルとしての内容も含まれます。予めご了承ください。

Snow Monkeyのカスタマイズは「my snow monkey」プラグインの利用を前提にしています。

Snow Monkeyで画面幅一杯にGoogleMapを表示する

画面の幅一杯にgoogleMapを埋め込み表示

会社やお店の場所を説明するのに便利なGoolgeMap。

GoogleMapで経路を調べるのも一般的になってきているので、以前の様に画像で地図を作らなくてもGoogleMapで代替えできる場合がほとんどです。

GoogleMapから地図を埋め込もうとすると、大中小のサイズかカスタムサイズとなり、ピクセルで指定することになります。コンテンツデザインをする際にはもう少し自由に地図の配置デザインをしたいです。

ということで、今回は画面幅一杯にGoogle Mapを表示させたい場合の方法です。

styleを追加する

やり方は非常にかんたんで、コードを追加するだけです。

通常の埋め込みコード(大サイズ)

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6478.417768101362!2d139.348322!3d35.721081!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x46d9e1069c19ff3e!2z44OJ44OD44OI44Ov44Oz5ZCI5ZCM5Lya56S-!5e0!3m2!1sja!2sjp!4v1634952345407!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

画面幅一杯の埋め込みコード

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6478.417768101362!2d139.348322!3d35.721081!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x46d9e1069c19ff3e!2z44OJ44OD44OI44Ov44Oz5ZCI5ZCM5Lya56S-!5e0!3m2!1sja!2sjp!4v1634952345407!5m2!1sja!2sjp" width="800" height="600" style="border:0; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); max-width: none; width: 100vw" allowfullscreen="" loading="lazy"></iframe>

style=”border:0;”を下記に変更します。

style="border:0; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); max-width: none; width: 100vw"

記載内容の詳細については割愛しますが、弊社webチームは読み取れる様にしてください。

こちらで画面幅一杯の地図が表示されるはずです。ちなみにSnow Monkeyでなくても幅いっぱいになると思います。

ついでにコンテンツ幅一杯の方法も記載します。

Snow Monkeyでコンテンツ幅一杯にGoogleMapを表示する

Snow Monkeyでコンテンツ幅一杯にGoogleMapを表示する

コンテンツ幅いっぱいのコード

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6478.417768101362!2d139.348322!3d35.721081!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x46d9e1069c19ff3e!2z44OJ44OD44OI44Ov44Oz5ZCI5ZCM5Lya56S-!5e0!3m2!1sja!2sjp!4v1634952345407!5m2!1sja!2sjp" width="800" height="600" style="border:0; width:100%" allowfullscreen="" loading="lazy"></iframe>

こちらもstyleに幅を指定してあげるだけです。style内ではなく、直接指定も可能です。
(width=”800″をwidth=”100%”にする)

Google Mapの埋め込み表示についてまとめ

全幅でもコンテンツ幅でも指定幅でも、地図を表示していることには変わりはありません。地図内の「拡大地図を表示」をクリックすれば大きく見えるので、こだわらなくても良いという考え方もありますが、弊社では制作するウェブサイトに表示されるものの全てに、こだわりと意味をもってコンテンツをデザインしています。

駅名が地図内にあればおおよその場所がわかりやすいとか、入り組んだ場所だから予め拡大地図と広域地図両方載せるとか。

情報には意味があるので、閲覧者のことを考え抜いてコンテンツデザインをしましょう。

今回は「地図の表示」のみに焦点を当てていますが、店舗型ビジネスですとGoogleのマップエンジン対策、MEO(Map Engine Optimization)も非常に大事です。機会があればMEOについても記事を書きたいと思います。

ではまた。

この記事を書いた人

木村 太一

ドットワンの代表です。1979年生まれ。3女の父。ゴルフと筋トレが趣味。立川にあるキヤノン代理店に就職後、1万件以上飛び込み営業したのち独立。たくさんの企業を見てきた経験と自分自身も零細企業の経営者ということを活かし、相手の立場に立ったDX推進、ITコンサルを行っております。

お気軽にお問い合わせください

ホームページ、ネットショップの集客方法から、IT機器や、顧客管理、採用に関することまでご相談ください。
WEBマーケティングのノウハウを生かして、お客様のお悩みを解決します。