Now Loading...

Light TALK Plus+ vol.34「WordPressでGoogleマップを表示させる方法」

「Light TALK Plus+」とは…

アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマは「WordPressでGoogleマップを表示させる方法」です!

GoogleマップはGoogleが提供する地図アプリでホームページなどでは対象の施設や会社の所在地を表示するときに使われています。
今回はサイト制作で用いられるWordpressでのGoogleマップについて紹介していきます。

Googleマップを埋め込む

今回は例として東京タワー(東京都港区芝公園4-2-8)を例にGoogleマップを埋め込んでいきます。

1)Googleマップにアクセス

Googleマップにアクセスすると、左上に「Googleマップを検索する」と記載された検索窓が表示されるので東京タワーの住所である「東京都港区芝公園4-2-8」を入力します。

Googleマップの画像01

2)Googleマップから埋め込みコードを取得する

東京タワーの住所が表示されたら左側に5つのアイコンがあるのでその中の「共有」を選択します。
左上に「共有」と表示されたモーダルが現れるので「地図を埋め込む」を選択します。
HTMLタグであるiframeのコードが表示されるので右の「HTMLをコピー」を選択してコードをコピーします。

Googleマップの画像02

Googleマップの画像03

3)Wordpressにコードを埋め込む

WordPressへの埋め込みは投稿編集画面または固定ページ編集画面から行います。
投稿画面に「ブロックを選択するには「/」を入力」と表示されたテキストの右に+ボタンが設置されているので選択します。
ブロックの種類を選択することができるので「カスタムHTML」を選択します。
さきほど、「ブロックを選択するには「/」を入力」と表示されたテキストが「HTMLを入力」と変更され、HTMLコードを入力できるようになるのでコピーしてきたコードを貼り付けます。

Wordpress画像04

Wordpress画像05

4)完成

貼り付けた後、更新します。実際のページを見てみるとGoogleマップが表示されていれば完成です。
注意点:コードの中には「width=”600″ height=”450″」とあらかじめ、サイズが入力されています。そのため、任意のサイズにしたい場合はコード内のサイズを変更またはコード内のサイズを削除してスタイルシートで変更させる必要があります。

Wordpress画像06

実際に埋め込んだGoogleマップ

Googleマップが表示されない

GoogleマップをWordpressに埋め込んでも実際のページでは表示されない場合があります。
その場合、考えられる原因としてユーザー権限が主な原因として考えられます。

ユーザー権限は5種類あり、「管理者」「編集者」「投稿者」「寄稿者」「購読者」あり、権限によってGoogleマップが表示されない場合があります。例えば、「投稿者」権限でGoogleマップを埋め込むと表示されないが「管理者」では表示さえることができます。
また、他の解決方法として「functions.php」で限関係なく、Googleマップを表示させるコードを追記する方法もあります。

それ以外の原因

「管理者」権限でGoogleマップを埋め込んでも表示されない場合があります。
その場合はプラグインが干渉してしまい、表示されないことが考えれます。

以下にGoogleマップに干渉していたプラグインについて紹介します。

EWWW Image Optimizer

EWWW Image Optimizerは画像劣化を防ぎ、アップロードのさいに自動で画像サイズを圧縮してくれるプラグインです。その中で画像やiframeを遅延読み込みすることでサイトの表示速度を上げる機能があるのですがそれが原因でGoogleマップが表示されていないことが分かりました。

解説方法

Googleマップはiframeを使用して表示しているため、EWWW Image Optimizerの設定でiframeの遅延読み込みを無効にすることで解決できます。以下は無効にするための手順になります。

  • WordPressの管理画面にログインします。
  • 画面左に表示されている項目「設定」の中の「EWWW Image Optimizer」を選択します。
  • 「EWWW Image Optimizer」の詳細設定が現れるので項目「遅延読み込み」まで移動します。
  • 項目「遅延読み込み」には「除外」という設定項目とテキストエリアがあり、テキストエリア内に「iframe」と入力します。
  • 画面一番下に「変更を保存」とあるので保存して作業は完了です。

WordPressへのGoogleマップの埋め込みはメジャーな手法なのでネットでやり方を探せば、いくらでもあります。ただ、ネットの方法だけでは対処できないこともあるので、その場合はプラグインを疑ってみると今回のような解決の糸口を見つけることができるかもしれません。

Light Webからのお知らせ

ライトウェブはプライバシーマークを取得しました!
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します!

ご依頼・ご相談はこちら

Lightning Lightalk
最新記事

Lightning Lightalk
記事一覧はこちら