WordPressでGoogleマップ(地図)を表示する方法・スマホ対応済み

ワードプレス グーグルマップ 使い方

WordPressサイトで、お店の紹介やイベントの開催場所などの地図を表示したい、埋め込みたい場面ってありませんか?
そんな方のために、Googleマップを使った誰でも簡単に地図を表示させる方法を解説します。

ぽけ
マサムネ
Googleマップの機能を使うと、とっても簡単にワードプレスに地図を入れ込むことができます。
スポンサーリンク

WordPressサイト内に、Googleマップを表示

Googleマップは、記事の中はもちろんのこと、固定ページ、フッターエリア、ウィジェット内など様々な場所に表示することができます。

今回は例として「記事内にGoogleマップを表示」する方法をメインに解説します。

Googleマップを表示

まずは、Googleマップにアクセスします。

アクセスしたら、検索窓から表示したい場所(住所もOK)を検索します。
今回は例として「東京駅」にしています。

Googleマップから検索

 

検索したら、下図のように地図が表示されるかと思いますので、「共有」ボタンをクリックしてください。

共有をクリック

 

次に「地図を埋め込む」をクリックします。

地図を埋め込む

 

地図のサイズを選択し、HTMLをコピーをクリックする流れです。

  1. サイズを選択(カスタマイズも可)
  2. HTMLをコピーをクリック

 

Googleマップの地図サイズを変更

 

サイズの選択で、カスタムサイズを選ぶと、任意のサイズに変更できます。

カスタムサイズ

 

記事内にHTMLを貼り付ける

HTMLをコピーしたら、WordPressにログインしマップを表示させたい投稿画面を開きましょう。
次に「カスタムHTML」のブロックをクリックし、HTMLを貼り付けます。

カスタムHTMLのブロックを追加

HTMLを貼り付ける

 

※旧エディタをお使いの場合は、「テキスト」に切り替えて、HTMLを貼り付けます。

テキストエディタに切り替える

 

これで完了です。

プレビュー等から、ページを確認してみてください。
表示させたいマップが確認できたら成功です。

東京駅周辺の地図

 

スマートフォンでも見やすい?

WordPressテーマによっては、スマートフォンから表示を確認した場合にGoogleマップが飛び出していたりと、表示崩れを起こしている場合があります。
これを回避するには、以下のHTMLとCSSを追記する必要があります。

HTMLの追記

下図のような形で、iframeの外側をdiv要素で囲んで追記します。

div要素で囲む

 

CSSの追記

次に、左サイドメニューから「外観→カスタマイズ」をクリック。

外観→カスタマイズ

 

「追加CSS」をクリック。

追加CSSをクリック

 

CSSを追加できるエリアがあるので、以下のCSSを記述し「公開」ボタンを押します。

.google-map iframe {
max-width: 100%;
}

 

CSSを追記

 

これで、パソコンから見てもスマホ見ても、横幅が可変されて表示が崩れる恐れはありません。

ぽけ
マサムネ
※主なモダンブラウザ、ios、Androidでは確認済みですが、WordPressサイトの作りによっては上手く適用されない場合があります。

 

その他エリアの表示イメージ

これまで、記事内にGoogleマップを表示する流れをご紹介してきましたが、フッターエリアやサイドエリアなどにも表示することは可能です。

フッターエリアの表示例

フッターエリア

 

設定方法については、いくつか方法があるかと思いますが、以下のような形でウィジェット機能を使うと簡単におこなえます。
同じようにHTMLを貼り付けるだけです。

ウィジェット機能を活用

 

設置するエリアによって、地図のサイズの横幅や縦幅を適宜調節する必要があります。

マップのサイズを変更した例

 

また、Googleマップが上手く表示されない時は、「カスタムHTML」ウィジェットを使用することで改善できる場合があります。

 

サイドエリアの表示例

サイドエリアにGoogleマップを表示

 

サイドエリアもフッターエリア同様に、ウィジェット機能を使うと簡単に表示できます。

サイドバーのウィジェットエリアにGoogleマップのコードを記述

 

ぽけ
マサムネ
使用できるウィジェットや設置できるエリアについては、WordPressテーマ等によっても異なります。

ウィジェット機能の使い方を詳しく知りたい方は「WordPressウィジェットとは?使い方と編集方法について」をご参照ください。

 

まとめ

今回は「WordPressでGoogleマップを表示する方法とは?」をテーマにお話させていただきました。

お店などの地図をイラストや画像等で作ろうとすると、時間もコストもかかりますが、Googleマップを使用することで、簡単に素早くサイトやブログに地図を表示することができます。

専門的なWEB知識などが必要ないところも、初心者の方には嬉しいところですよね。
ぜひ活用してみてください。

人気のWordPressテンプレート
WordPressのテーマ(テンプレート)って、沢山あるけど無料と有料どっちが良いの?
そんな疑問にお答えすべく、おすすめのWordPressテーマをプロの目線でまとめてみました。
良かったら「フォロー」してね。
有益な情報を定期的につぶやき中。
お米と味噌汁がすきです…
マサムネ

フリーランスとして独立しブログ運営に勤しんでいる元WEBデザイナー。
記事を書くのって大変だけど色々な気付きがあって楽しい!
虚弱で家族に迷惑をかけてきたので、どんな親孝行ができるかプラン思考中。
日々穏やかでストレスを溜めない生活を心がけています。
フリーランス10年/ブログ10年/コンテンツSEOからの月収6桁達成
詳しいプロフィールはこちら

マサムネをフォローする
使い方
スポンサーリンク
ぽけぶ
タイトルとURLをコピーしました