無料でDiviにグーグルマップを全幅で挿入

Diviで無料でグーグルマップを使う方法(全幅可能)

こんにちはナオミです。

『Diviのマップモジュールでグーグルマップが表示されない!』
『自分のサイトにグーグルマップを挿入するのって有料なの?!』
『全幅で表示したい!』

自分も最初にマップモジュールを使った時こんな経験をしました。

でも実はグーグルマップを挿入するのにマップモジュールはいりません。
そして寸法も好きに変換できるんです。

こんにちは、ナオミです。
Diviを日本で広めたいと思い、Diviを研究しています。

この記事では無料でグーグルマップをDiviに埋め込む方法を紹介しています。

グーグルマップからコードを取得する

グーグルマップから挿入コード取得

コードモジュールに挿入するコードをグーグルマップから取得します。
このように、表示させたい場所の地図を開き、共有をクリックします。

『地図を埋め込む』を選択しHTMLをコピー

グーグルマップからHTMLをコピー

タブが二つありますので、『地図を埋め込む』を選択します。
そうしたら、HTMLが表示されますので、『HTMLをコピー』をクリックします。

使うのはマップモジュールじゃなく、コードモジュール

コードモジュールを挿入

まずはコードモジュールを挿入します。

先ほどコピーしたHTMLをコードモジュールに挿入

グーグルマップのHTMLをコードモジュールに挿入

先ほどグーグルマップでコピーしたHTMLをコードモジュールに挿入すると、マップが表示されます。

マップをカラム(列)の幅に合わせる方法

グーグルマップは全幅じゃない

先ほどのコードモジュールを大きい幅のカラム(列)に挿入してみると、グーグルマップは特定の幅に固定されてることがわかります。
カラムの幅で表示したい時もありますよね。
実は簡単に全幅にできるんです。

widthを100%にする

グーグルマップを全幅表示させる方法

ここを600じゃなくて、100%にします。

グーグルマップ幅100で挿入
グーグルマップ100で表示

これでカラム内の100%の横幅でグーグルマップが表示されました。

行を全幅にすれば、画面の幅でマップが表示される

グーグルマップはカラムの幅いっぱいに表示されますので、カラムを含んでいる行を全幅にすればマップも画面全体で表示されます。

Diviのカラムを全幅にする2

行の設定のデザインタブに行きます。
Diviの日本語がおかしくなってるせいで、『最大幅』が二つありますが、どちらも『100%』にします。

Diviの日本語を直した子テーマ

Diviの日本語が修正されてる2

因みに、Diviの日本語訳を訂正した子テーマもありますので、是非使ってみて下さい。
>>Diviの日本語がおかしいので、直しました。【無料子テーマ】

これで全幅でグーグルマップが表示されました!
是非試してみて下さいね。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通