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の日本語がおかしいので、直しました。【無料子テーマ】

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

コメントする

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