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

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

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

監修してくれたメンター

吉﨑 智正

トゥービーコンティニュード合同会社代表。1995年ぐらいからHTMLを生業としており、ここ7年はWordPressを中心に仕事をしています。直近2年半は神奈川と広島で2拠点生活をおくっています。

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

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

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

目次

1時間でできる無料体験!
大石ゆかり

田島メンター!!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] WordPressで挫折しない学習方法を動画で公開中

WordPressを学習中の方へ

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

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

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

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

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

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

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

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する