icon
icon

WordPressでGoogleマップの地図を表示させる方法【初心者向け】

WordPressでグーグルマップの【地図】を表示させる方法を初心者向けに解説した記事です。地図の埋め込みコードを使って挿入する方法と、プラグインを使った方法の2つを紹介しています。記事を参考にして、地図を表示させてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

店舗や企業のページを作る際に地図を表示することも多いと思います。

そんな特に便利なのはGoogle Mapの表示です。

そこで今回は、WordPressで作成したサイトにGoogle Mapの地図を表示させる方法をお届けします。

目次

大石ゆかり

田島メンター!!WordPressの記事にGoogle Mapを入れたいんですけど、どうやったらいいんですか〜?

田島悠介

記事に地図を入れる方法は「直接地図を挿入する方法」と「プラグインを利用する方法」の2つの方法があるよ。両方とも教えるね!

大石ゆかり

はい、お願いします♪

 

直接地図を挿入する方法

Google Mapから直接コードを取得して、表示したいところに挿入する方法です。

 

地図出力用のコードを取得

まず、Google Mapで、挿入したい地図を表示します。
(今回はスカイツリーを選んでみました)

左上のメニューの「地図を共有または埋め込む」ボタンがあるので、クリックします。

 

すると、ポップアップが立ち上がるので、「地図を埋め込む」をクリックします。

 

左のプルダウンから、「カスタムサイズ」を選択すると、好みのサイズに変更できます。

 

サイズ調整が終わったらコードをコピーします。

 

WordPressに反映

WordPressの「投稿>新規追加」で開いたらタイトルを入力します。

ボタンで「カスタムHTML」ボタンを検索してクリックします。

 

コピーしたコードを貼り付けます。

 

公開すると、このように表示されました。

 

プラグインを利用する方法

レストランの紹介をするブログの場合など、地図をたくさん埋め込む必要がある場合は、プラグインを使うと効率的に挿入できます。

WordPress 5.0以降、ブロックエディタが追加されました。

ブロックエディタには、さまざまなブロックが用意されています。

標準でサポートされていない(バージョン5.8.1現在)Google Mapのブロックのプラグインは、エディタで追加できます。

ボタンで「すべて表示」をクリックすると、左側にブロック一覧が表示されます。

上部の検索窓で「google map」を検索すると、インストール可能なブロックのプラグインが一覧されます。

 

今回は、「Map」というブロックのプラグインをインストールします。

クリックすると、インストールしてそのまま挿入場所に地図が表示されます。

場所がニューヨークになっているので、次は住所を修正します。

⋮(3点リーダー)をクリックして「追加設定を表示」をクリックします。

 

右側に追加設定が表示されます。

 

ここでAddressに、たとえば「東京都墨田区押上1−1−2」と入力して、Zoomのスライドバーを右に拡大すると、地図が拡大表示されます。

住所と大きさを指定するだけで簡単に地図を挿入できるので、わざわざGoogle Mapを開く必要もありません。

更新すると、下記のように表示されます。

 

これだけで完了です。

 

以上のように、プラグインを使っても使わなくてもGoogle Mapは簡単に挿入できます。

まずは自分に合った方法を試してみてください。

 

大石ゆかり

地図を埋め込むことができました〜♪

田島悠介

お店の紹介とかイベントの開催場所とか、記事中に地図を埋め込みたい場面ってたくさんあるから、覚えておくと良いね♪

大石ゆかり

はい♪

 

[PR] Webサイト制作で副業する方法とは

WordPressを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

WordPressでのサイト制作を学習していて、このように思ったことはありませんか?

テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。

まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。