Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでGoogleマップを追加する方法(正しい方法)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

ローカルビジネスにとって、インタラクティブな地図上に所在地を表示することは単なる利便性ではなく、デジタル戦略の重要な要素です。

Googleマップをサイトに追加することで、訪問者が所在地を見つけやすくなり、ユーザーエクスペリエンスが大幅に向上します。さらに、サイトの検索エンジンでの認知度を高め、より多くの訪問者や潜在的なカスタマイザーを引き付けることができます。

GoogleマップをWordPressサイトにシームレスに統合し、ユーザーエクスペリエンスとSEOの両方を向上させる最善の方法を研究しました。

この投稿では、WordPressでGoogleマップのパワーを引き出す方法をご紹介します。

Add Google Maps in WordPress

なぜWordPressにGoogleマップを追加するのか?

Googleマップは、すべてのプラットフォームで最も人気のあるナビゲーションアプリであることをご存知ですか?

オフィスや実店舗の住所をお持ちの場合、WordPressサイトにGoogleマップを追加することで、ユーザーは実店舗やレストラン、小売店の場所をすぐに見つけることができます。これにより、より多くのカスタマイザーを集め、より多くのビジネスを生み出すことができます。

それだけでなく、Google Mapsを埋め込むことで、WordPressのSEOを向上させることもできます。Googleによると、すべての検索の46%はローカル検索です。WordPressにGoogleマップを追加することで、ローカルSEOを強化し、ローカル検索での知名度を向上させることができます。

WordPressにGoogle Mapsを埋め込むには、2つの方法があります。

2つ目の方法の利点は、ローカルSEOのベストプラクティスにすべて従っていることである。また、ローカル検索結果に名前、ロゴ、住所、電話、営業時間などのビジネス情報が表示されるようになる。

それでは、WordPressにGoogleマップを追加する方法を見てみよう。以下は、お好きなセクションに移動するためのクイックリンクです:

プラグインなしでWordPressにGoogleマップを追加する方法

WordPressの投稿やページにGoogle Mapsをクイックに埋め込みたい場合は、初期設定のiFrameを使用します。

Googleマップのサイトにアクセスし、検索エリアに住所を入力するだけだ。

Find location in Google Maps and Click Share to Embed

次に、共有アイコンをクリックする必要があります。すると、位置情報リンクを送信するか、地図を埋め込むかのオプションがポップアップで表示されます。

地図を埋め込む」オプションを選択する必要があります。

Copy Google Maps HTML Embed Code

その後、Google MapsのHTMLコードをコピーし、地図を埋め込みたいページを開くだけです。

ブロックエディターで、カスタムHTMLブロックを追加する必要があります。

Select Custom HTML block in WordPress

Googleマップからコピーした埋め込みコードを貼り付けるだけです。

その後、ページを更新または公開し、変更をプレビューする必要があります。

Google Maps iFrame Embed Code in Block Editor

この方法は、Google Mapsを素早く埋め込むには有効だが、SEO効果を最大化することはできない。

小規模ビジネス、レストラン、オンラインショップで、個別または複数の実店舗をお持ちの場合は、次のソリューションを使用してローカルSEOランキングを最大化することをお勧めします。

ローカルSEOプラグインでWordPressにGoogleマップを追加する方法

Googleマップを追加し、ローカルSEOのためにサイトを最適化する最良の方法は、All In One SEO(AIOSEO)を使用することです。

コードを編集したり開発者を雇ったりすることなくSEOランキングを上げることができるため、WordPressのための最高のSEOプラグインです。300万人以上の専門家がAIOSEOを使用して検索エンジンのランキングを向上させています。

AIOSEO

このチュートリアルでは、AIOSEO Proバージョンを使用します。AIOSEOProバージョンには、ローカルSEO機能やその他の強力な最適化オプションが含まれているからです。AIOSEOには無料版もあり、検索エンジン向けにサイトの最適化を始めることができます。

まず、WordPressにAIOSEOプラグインをインストールし、有効化する必要があります。詳しくはWordPressプラグインのインストール方法のチュートリアルをご覧ください。

有効化すると、プラグインはセットアップウィザードを起動します。Let’s Get Started」ボタンをクリックしてプラグインを設定することができます。ヘルプが必要な場合は、WordPressでAll In One SEOを適切に設定する方法についてのガイドを参照してください。

AIOSEO setup wizard

次に、WordPressダッシュボードからAll In One SEO ” Local SEOに移動します。

そして、「ローカルSEOを有効化する」ボタンをクリックして、ローカル設定を開始します。

Activate local SEO

WordPressのLocal SEOアドオンを有効化すると、AIOSEOで個別または複数のロケーションを追加し、Googleマップに表示することができます。あなたのサイトに両方を追加する方法をご紹介します。

個別ロケーションの追加

ロケーション、ビジネス情報、営業時間などを追加するには、まずAll In One SEO ” Local SEOにアクセスし、「ロケーション」タブを開く必要があります。

物理的な拠点が個別である場合は、「複数拠点」オプションを「いいえ」に設定してください。

Location tab under local SEO

その後、「地図」セクションまでスクロールダウンし、正確な位置をピン留めする。

クエリーを入力」フィールドに住所を入力するだけで、Googleマップがあなたの場所を表示します。

Pin your store location

所在地を入力したら、忘れずに「変更を保存」ボタンをクリックしてください。

複数拠点の追加

実店舗が複数ある場合は、Local SEOの「Location」タブで「Multiple Locations」設定を有効化する必要があります。

Enable multiple locations

その後、WordPress管理画面に新しいLocationsメニューが表示されます。

Locations “に移動し、”Add New “ボタンをクリックします。

Add a new location

WordPressエディターに入ったら、「地図」セクションまでスクロールダウンします。

Enter a query’(クエリーを入力)フィールドに住所を入力します。

Add multiple map locations

地図上に位置を入力し、位置情報を追加したら、「公開する」ボタンをクリックしてください。

このステップを繰り返して、あなたのビジネスに必要な数のロケーションを追加することができます。

ロケーションの追加が完了したら、All In One SEO ” Local SEOメニューの「マップ」タブに戻ることができます。

ここでGoogle Maps APIキーを入力する必要があります。

Enter Google maps API key

それでは、Google MapsのAPIキーを作成する方法を見てみよう。

Google Maps APIキーの作成

まずはGoogle Maps Platformのサイトにアクセスし、「Get Started」ボタンをクリックします。

Google maps platform

Googleアカウントでログインした後、課金アカウントを設定する必要があります。

Google Maps Platformには従量課金制があり、すべてのユーザーに対して最初の300ドルの月額使用料を無料で提供している。ほとんどのサイトでは、このチュートリアルで作成するようなシンプルな地図の埋め込みを簡単にカバーできるだろう。

あなたが手動で有料アカウントにアップグレードしない限り、料金は請求されませんのでご安心ください。

まずは、「課金アカウントの作成」ボタンをクリックしてください。

Create a billing account

次に、あなたの国を選択し、ドロップダウンメニューからあなたの組織を最もよく表すものを選択することができます。

これらの情報を選択したら、利用規約のチェックボックスをクリックし、「続行」ボタンをクリックします。

Enter personal details for billing account

次の画面では、確認のために電話番号を入力する必要があります。

そうしたら、「コードを送信」ボタンをクリックしてください。

Enter mobile number

コードを確認したら、次にすることは、あなたのビジネス名、支払い方法の詳細、請求先住所を入力することです。

これらの情報を入力したら、「無料トライアルを開始する」ボタンをクリックしてください。

Enter business name and payment details

次に、あなたの組織とGoogle Maps Platformの使用方法について4つの質問をします。

Google Mapsは、プラットフォームを利用する主な目的、業種、ユースケースの選択、企業規模を尋ねます。

これらの質問に答えたら、「送信」ボタンをクリックしてください。

Answer few questions for google maps

Google Maps APIキーのポップアップが表示されます。

このキーをコピーしてテキストファイルに保存しておくと、将来使用するときに便利です。

Copy the API key

Google Maps APIキーの作成が完了したら、WordPressダッシュボードに戻り、AIOSEO Local SEO設定に入力する必要がある。

WordPressでGoogleマップの設定をする

WordPress ダッシュボードからAll In One SEO ” Local SEOに戻り、「マップ」タブに移動します。

Google Maps API Keyを’API Key’フィールドに入力します。キーを追加するとすぐにAIOSEOに地図のプレビューが表示されます。

Add API key and see map preview

次に、マップ設定を編集するために下にスクロールすることができます。

AIOSEOでは、Gutenbergブロック、ショートコードウィジェット、PHPコードを使ってGoogleマップを表示することができます。また、様々なマップスタイルを選択したり、カスタマイザーをマップに追加することもできます。

Edit map settings

完了したら「変更を保存」ボタンをクリックするのをお忘れなく。

WordPressでGoogleマップを表示する

次に、Google MapsをWordPressの投稿やページに追加します。まず、サイトのページを編集するか、新規ページを追加します。

ブロックエディターに入ったら、上部の「+」ボタンをクリックし、AIOSEO Local – Mapブロックをページの任意の場所に追加します。

Add local maps block

その後、Google Mapがページに追加されます。

AIOSEOでは、右側のオプションから地図の設定を編集することもできます。例えば、ラベルやアイコンを表示したり、カスタマイザーを追加したり、マップの幅や高さを編集することができます。

Edit your map in WordPress

複数の拠点をお持ちの場合は、右側のメニューからオプションを選択して、ハイライトする拠点を選択できます。

ロケーション」ドロップダウンメニューをクリックし、ご希望のロケーションを選択するだけで、サイトに表示することができます。

Choose which location to display

設定に満足したら、ページを公開してください。

あなたのサイトにアクセスして、Googleマップの動きを見ることができます。

Preview your map

サイドバーやフッターなど、サイトのウィジェットセクションにGoogleマップを追加することもできます。

まず始めに、WordPress管理画面から外観 ” ウィジェットに向かいます。次に、’+’ボタンをクリックし、あなたの場所を表示したい場所に’AIOSEO Local – Map’ウィジェットブロックを追加します。

Add maps widget

その後、ウィジェット設定を編集できます。

例えば、タイトルの追加、マップの幅と高さの変更、複数の場所がある場合に表示する場所の選択、ラベルの編集などが可能です。

Edit map widget settings

それだけだ!

これでサイトを更新すると、ウィジェットエリアにGoogleマップが表示されます。

Maps preview in widget area

WordPressで地図を使うためのエキスパートガイド

Googleマップをサイトに追加する方法はおわかりいただけたと思いますが、WordPressの地図や位置情報に関連する他のガイドもご覧ください。

この投稿が、あなたのWordPressサイトにGoogleマップを追加する方法を学ぶのにお役に立てば幸いです。また、中小企業に最適なWordPressプラグインやWordPressにGoogleマップの店舗検索機能を追加する方法についてもご紹介します。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

37件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    thanks for this well-explained guide! I have an issue that I need help with though. One of my websites has a dark mode color design because tha;ts how the theme was designed and coded. I also use Google Maps quite often, and I know there is a dark mode version available.

    is there a way to add the dark mode version of Google Maps to my website instead of the regular version? I just want the map to match my website’s dark theme design.

    • WPBeginner Support says

      At the moment we do not have a recommended easy method for changing the map to their dark mode variant in embeds. If that changes we will be sure to share!

      管理者

  3. Moinuddin Waheed says

    This is really a time and resource saving post for me as I was looking a minimal way of adding a Google map address in one of my clients website and was not sure how to do.
    Both the methods without plugin and with AIOSEO are good and serves my need.
    But I would go with AIOSEO to implement this feature as it will also help in local seo.
    Thanks for this helpful guide for embedding Google map.

  4. melanie bund says

    Hi, do you know how to hide the 13px white space at the bottom of the embedded google map?
    Thank you in advance
    Melanie

  5. Donata says

    I have a google maps on my web, but the pin which is added to the map is not clickable. The pin only shows the adress but it do not direct if you click on it. Is it possible to do clickable icon?

  6. Sharon says

    Don’t you have to get an API from Google before you can use a map plugin and insert it into the plugin? That’s been my experience lately.

    • Mark says

      Hi I’m trying to insert a google map onto my website ( WordPress ) it keeps disappearing am I correct in thinking that google now want $200 a month for this or whatever the cost or can I still insert a map for free

      • WPBeginner Support says

        Google now charges for large uses of their maps API which is what the plugin runs on, the $200 you likely saw was the free monthly credit Google gives to those using their API so smaller sites are not charged.

        管理者

        • Kamil says

          Yes, that true but there is alternative for Google maps API. OSMapper is the plugin that uses Open Street Maps API that does not requires any API keys and there is no limit for usage. You can install it from WordPress.org.

        • WPBeginner Support says

          While we have not tested it yet, we will be sure to take a look at it.

  7. Blessy says

    I tried the first step: copy the HTML in the after going to the embed button and paste it into the text version of the post. I went to the visual one and saw the embedded google map. I saved it at the site takes out the map. The changed texts remain, though, but the map keeps vanishing. it keeps repeating each try. Why does it happen?

  8. Sara C says

    Great tutorial – short and to the point. I had tried two other plugins that my client didn’t like. Thank you for the manual embedding information. Worked perfectly and quickly.

    Many, many thanks for this tutorial.
    Sara

  9. Denny Png says

    Dear Sir/Madam,

    I would like to change the Google Map address & not sure where to locate this embedded link to update the WP backend. I couldn’t find it the contact menu to locate it.

    Seek yr kind advise on it!

    Thankyou!

    Rdgs,
    Denny Png

  10. Kathy says

    Thank you! This is what I was looking for! Perfect for my travel post on my blog! The video is great and very helpful!

  11. Andy Kramer says

    I would love to do this but when I go into google maps and type the address there is absolutely no gear so I can’t even get a link to copy for WordPress. Any ideas or suggestions?

  12. Mari says

    Hi!
    I can’t find the code.. There’s no “flower icon” nor other links on the bottom right of the map. Is it because the place I’m trying to add doesn’t have a street address, it’s just coordinates?
    Thanks in advance.

  13. Karthik says

    Is there any way to get this Map as a background to a page with full length say width 100% n height 100% something like that??

  14. Carla Spacher says

    Thanks so much! Why would anyone bother with a plugin that may ultimately slow down their site when you have provided such easy instructions to grab the code from Google Maps?

    By the way, if anyone is having trouble finding the code. Once you see the map, go to the bottom right-hand corner and click on the flower icon and click on “Share and embed map”. Then click on “Embed map” and enter into your WP page/or post.

  15. Rory says

    Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
    Thanks for your help.

  16. aamir says

    hello sir,

    i want to use plugin which provide exact location. can you suggest me? i use map press, leaflet market, wp google map etc. plugin but still no luck. all this plugin show some far location from my exact location. i want exact location where my shop is located. please help me. or is there any way to develop custom map & put in wordpress site? please provide step by step procedure.

    Thanks & Regards,
    aamir

  17. Trang Tran says

    Thanks for taking the time to write this article. It’s very helpful. Is it possible to add a Google Map that is linked with Google Places?

  18. Guilherme says

    Very nice. But when we use coordinates, the lightbox map don´t work right. It just shows some place in USA. How can I fix this?

    Thanks

  19. Christopher Rose says

    Thanks for all the informative WP articles you’re posting.

    Is it possible to add a Google Map to a site that

    1. automatically adds the location of all site visitors or commenters to a map
    and
    2. allow all customers to be added, probably manually, although an automatic option would be good too. I have a small ecommerce site that has customers all over the world and thought it would be fun to show where we have sent stuff to.

    • zakaria says

      Thank you very much!

      I have already founded (MapPress Easy Google Maps) and it is nice plugin.
      And of course, your attention is very nice support. THANKS!!!
      One more thing, please.
      I would like to use these maps in tabs but only tab’s (shortcode) plugin I have found so far which shows maps is (Jshortcode). (I mean it shows in second or third tab. The others aren’t showing in second or third tabs.) It is nice plugin too but has very colorful tabs.
      May be you would be so kind to advice some other plugins to solve this problem.

      Thanks advance
      Best regards
      Zakaria

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。