バズ部

  • icon株式会社ルーシー
  • 東京都港区新橋5-10-5 PMO新橋II 8階
  • 記事を探す
    • まず見て頂きたいページ
      • バズ部式マーケティングの進め方
      • コンテンツマーケティング101
      • SEO初心者向けマニュアル
      • バズ部メンバーの知見集
      • WordPress初心者向けガイド
    • 記事
      • 全ての記事を見る
      • SEO
        • SEOの基礎
        • SEO内部対策
        • コンテンツSEO
        • サーチコンソール
        • 高度なSEO
      • コンテンツマーケティング
        • 1.コンテンツマーケティングとは?
        • 2.コンテンツマーケティングをやるべきなのか
        • 3.あなたのブランドストーリーは何か?
        • 4.コンテンツマーケティング設計が全てだ
        • 5.必ず必要な社内体制と体制づくり
        • 6.まずは、小さな一歩を大切にしよう
        • 7.コンテンツ制作のコツを知ろう
        • 8.多くの人が陥る失敗を知っておこう
        • 9.顧客が「まだ気づいていないこと」に気づけるか
        • 10.素早く着実にコンバージョンにつなげよう
        • 11.正しく効果測定して成果を引き上げよう
        • 12.精度を上げてもっともっと成果を飛躍させよう
      • オウンドメディア
      • WordPress
        • wordpressウィジェット
        • wordpressテーマ
        • wordpressプラグイン
        • wordpressの基本操作
        • wordpressの導入と準備
        • wordpressの設定方法
        • ブログマーケティング
      • ソーシャルメディア
        • Facebook
      • ランディングページ
        • キャッチコピー
        • コピーライティング
      • メルマガ
      • EC
      • インタビュー
      • アーカイブ
    • 監修者/ライター一覧
      • 松澤 大輔
      • 木村 竜児
      • 野口 陽司
  • サービス一覧
    • サービスページ
      • コンテンツマーケティング立ち上げ&運用支援
      • SEO記事制作代行
      • キーワード設計代行
      • WEBサイト制作
      • 研修サービス
      • bazubu-shiki
      • ライティングツール「Pencii」
    • 資料請求
      • コンテンツマーケティング立ち上げ&運用支援サービス資料
      • SEO記事制作代行サービス資料
      • キーワード設計代行サービス資料
      • バズ部紹介資料
  • 支援実績
  • お役立ち資料
    • お役立ち資料一覧
      • 広告費を1/10にして売上を倍増させる全手法
      • バズ部が運営する月間20万PV超サイト11の生データ集
      • 良質なコンテンツを作成するための20のコツ
      • 最高のオウンドメディア支援会社を選ぶために行うべき7つの質問
      • バズ部紹介資料
      • バズ部公式メールマガジン
  • セミナー
  • 運営者情報

ご相談・お問い合わせ

© Copyright 2022 バズ部. All rights reserved.

ユーザーに届ける価値を徹底的に追求する
マーケティングを提供します

© Copyright 2022 バズ部. All rights reserved.

icon icon

icon
  • icon
  • icon
  • icon

05/22木8:00〜9:00

【5/22開催】バズ部の記事制作代行 商品説明会

  • オンライン
    1. バズ部 /
    2. WordPress /
    3. wordpressの設定方法 /
    4. WordPress にGoogleマップを埋め込む方法
  • 最終更新日 2021.10.13

WordPress にGoogleマップを埋め込む方法

スマートフォンでGoogleマップを利用して、現地に赴くユーザーが多い。そのニーズに答えて店舗や会社の所在地に Google マップがあるとユーザーにとってはうれしい心遣いだ。

ここでは WordPress を使って簡単に Google マップを埋め込む方法を紹介する。

注
webサイトにGoogleマップを埋め込まずに、Googleマップの画像を貼り付けているだけのサイトを見ることがある。地図そのもののスクリーンショットをサイトに貼り付ける行為はGoogleマップの利用規約に違反する可能性がある。もしそのような懸念があるときは法務部門や、法律の専門家に相談してから適切に利用しよう。

また、私たちバズ部は12年で400社以上のメディア支援を行い、

  • 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア
  • 8ヶ月で月間140万PVを実現したアプリメディア

など大きな成果を挙げ続けている。

各サイトの成功要因をインタビューしているので、
あなたのサイトに役立てて欲しい
⇒25サイトの成功事例インタビューはこちら

ebook
ebook

目次

  • 1.Google マップを埋め込む方法
    • 1-1.Google マップのコードを取得する
    • 1-2.Google マップのコードを埋め込む
  • 2.クラシックエディターに埋め込む場合
    • 2-2.Googleマップの表示を確認する
  • 3.固定ページの会社概要に埋め込む方法
  • 4.Googleマップを効果的に活用できるプラグインWP Google Maps
  • 5.まとめ

1.Google マップを埋め込む方法

Google マップの埋め込みは、下記の手順でできる。

  • Google マップのコードを取得する
  • Google マップを埋め込む

操作は簡単なので安心してほしい。

1-1.Google マップのコードを取得する

最初に Google マップにアクセスしよう。

グーグルマップ

図の赤枠部分に店舗名、オフィス名、またはビル名を入力して、検索ボタンをクリックすると検索結果が表示される。ここでは仮に虎ノ門ヒルズ森タワーでやり方を紹介する。

検索内容の入力

右にある「共有」をクリックしよう。

メニューが表示されるので「地図を埋め込む」をクリックする。

地図を埋め込む

すると地図の埋め込み用のコードを取得する画面が表示される。

地図を埋めこむをコピー

左上部にある▼のプルダウンをクリックすると、埋め込む地図のサイズを4パターンから選ぶことができる。

サイズを選択

用意されたサイズは次の3種類だ。

  • 小:400 × 300 ピクセル
  • 中:600 × 450 ピクセル
  • 大:800 × 600 ピクセル

自分でサイズを決めるなら「カスタムサイズ」を選ぶと良い。

カスタムサイズをクリックすると、次の画面が表示されるので、図の通り設定しよう。

ピクセル単位で数値を入力

※ ピクセル数を計測する方法
あなたのコンテンツの縦・横サイズを基準にしてピクセル数値を入力したいなら、各ブラウザの拡張機能を使うと簡単に計測することができる。Google Chrome であれば「Page Ruler」、Firefox であれば「MeasureIt」がオススメだ。

1-2.Google マップのコードを埋め込む

ここでは、ブロックエディター(グーテンベルグ)でのコードの埋め込み方法を解説する。

WordPress の管理画面にログインし、編集画面にアクセスしよう。編集画面の左上から「カスタムHTML」のブロックを選択する。

本文に表示された「HTMLを入力」のブロックに、先ほどコピーしたコードをペーストする。

「プレビュー」を選択してプレビューを表示させよう。

成功したオウンドメディアの要因を学ぶ

  • Article Image 1Article Image 1

    累計106億円の売上を叩き出した不動産会社のコンテンツマーケティング事例

    1

  • Article Image 2Article Image 2

    わずか8ヶ月で月間140万PVを実現したアプリ企業メディア成功事例

    2

  • Article Image 3Article Image 3

    問い合わせが月4,400件以上!自社メディアで驚異的なCV数を生み出した弁護士事務所

    3


2.クラシックエディターに埋め込む場合

従来のクラシックエディターに埋め込む場合は、以下の通りに行う。

WordPress の管理画面にログインして、マップを表示させたい投稿ページか固定ページの管理画面にアクセスしよう。ここでは投稿ページを使って紹介する。

新規投稿を選択

テキストをクリックする。

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

地図を埋め込む箇所をクリックし、コピーしたGoogle MapのHTML埋め込みコードを本文内にペーストする。

2-2.Googleマップの表示を確認する

地図が埋め込めたか確認をしよう。編集画面右上にあるビジュアルをクリックする。埋め込みんだGoogleMapが表示されている。

実際の表示は管理画面からは確認できないため、プレビューで確かめよう。

表示がされていたらGoogleマップの埋め込みが完了だ。


3.固定ページの会社概要に埋め込む方法

それでは実際に、Wordpressの固定ページで作成した会社概要にGoogleマップを貼り付けてみよう。

まずはWordpressの管理メニューから「固定ページ」→「会社概要」の編集画面へ。

Googleマップを埋め込みたいブロックで「カスタムHTML」を選択する。

「1-1.Google マップのコードを取得する」で解説した通り、Googleアップから埋め込みたい住所のコードをコピーし、固定ページのカスタムHTMLブロックに貼り付ける。

「プレビュー」を押すことで実際の表示と同じようにプレビューされる。

ちなみに、投稿画面右上の「プレビュー」から「新しいタブでプレビュー」で実際の固定ページがどのように表示されるかも確認できる。

今回は、以下のように表示できた。


4.Googleマップを効果的に活用できるプラグインWP Google Maps

ここで、Googleマップをより効果的に活用できるプラグインWP Google Mapsを紹介しよう。

Googleマップをそのまま記事コンテンツや固定ページに埋め込む場合はここまでの解説通り、プラグインを導入せずに行える。WP Google Mapsを利用することで、表示されるマップをカスタマイズしたり拡張することができる。

例えば地図上に任意でアイコンを表示させたり、地図の幅や色などデザインの調整や、座標出なく住所での検索が可能になるなど、様々な機能がある。

注意点としては、有料版と無料版があること。無料版だと複数の地図を作ることができない。もう一つは、操作が英語で慣れるまで若干複雑である点だ。

慣れれば使いやすいプラグインなので、無料版を試しに使ってみることをおすすめする。


5.まとめ

WordPressにGoogleマップを埋め込む方法をおさらいしてみよう。ブロックエディターを利用すれば簡単に表示できることがお分かりいただけたはずだ。

①埋め込みたい場所をGoogleマップで指定する
②Googleマップの「共有」から埋め込みコードをコピーする
③埋め込みコードを任意の箇所にペーストする
④プレビューでGoogleマップが埋め込めているか確認をする

Googleマップで場所が分かるとユーザーが経路検索をするのに大変便利だ。この際に是非活用しよう。

カテゴリー wordpressの設定方法

記事をシェアする

  • B!

無料eBook:バズ部式マーケティング
広告費を1/10にして売上を倍増させる全手法

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード

未読

参考にしていただきたい事例

liskulのtopページ

リスティング広告

1年でプッシュ型営業からプル型へ!毎月約200件の問い合わせを獲得するデジタルマーケティングブログ

  • SOLDOUT
  • ソウルドアウト株式会社様

学校 コンテンツマーケティング

学校・教育

1年半で億単位の貢献を果たすまでに成長した学校法人のコンテンツマーケティング事例

  • 神田外語学院
  • 神田外語学院 様
アバター
  • 著者 : バズ部編集部

ユーザーに届ける価値を徹底的に追及するのがバズ部式マーケティング。
バズ部では、ユーザー主義を貫きながら、なおかつ数字にこだわり結果を出してきた手法やノウハウを惜しみなく提供していきます。

  • 会社概要
  • 採用情報
  • セミナー
  • サービス紹介
  • 記事一覧

icon

株式会社ルーシー東京都港区新橋5-10-5 PMO新橋II 8階

ABOUT US

  • 運営者情報
  • セミナー
  • 採用情報
  • お問い合わせ
  • プライバシーポリシー
  • 特定商取引法に基づく表記
  • 紹介メディア

© Copyright 2025 バズ部. All rights reserved.