WordPressのサイトにGoogleマップを表示したいですか？
ローカルビジネスを運営している場合、Googleマップをサイトに表示することで、ユーザーが簡単に所在地を見つけることができます。また、サイトの検索エンジンでの認知度を向上させ、より多くのサイト訪問者を集めることができます。
この投稿では、WordPressにGoogleマップを追加する方法を紹介します。
なぜ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マップのサイトにアクセスし、検索エリアに住所を入力するだけだ。
次に、共有アイコンをクリックする必要があります。すると、位置情報リンクを送信するか、地図を埋め込むかのオプションがポップアップで表示されます。
地図を埋め込む」オプションを選択する必要があります。
その後、Google MapsのHTMLコードをコピーし、地図を埋め込みたいページを開くだけです。
ブロックエディターで、カスタムHTMLブロックを追加する必要があります。
Googleマップからコピーした埋め込みコードを貼り付けるだけです。
その後、ページを更新または公開し、変更をプレビューする必要があります。
この方法は、Google Mapsを素早く埋め込むには有効だが、SEO効果を最大化することはできない。
小規模ビジネス、レストラン、オンラインショップで、個別または複数の実店舗をお持ちの場合は、次のソリューションを使用してローカルSEOランキングを最大化することをお勧めします。
ローカルSEOプラグインでWordPressにGoogleマップを追加する方法
Googleマップを追加し、ローカルSEOのためにサイトを最適化する最良の方法は、All In One SEO（AIOSEO）を使用することです。
コードを編集したり開発者を雇ったりすることなくSEOランキングを上げることができるため、WordPressのための最高のSEOプラグインです。300万人以上の専門家がAIOSEOを使用して検索エンジンのランキングを向上させています。
このチュートリアルでは、AIOSEO Proバージョンを使用します。AIOSEOProバージョンには、ローカルSEO機能やその他の強力な最適化オプションが含まれているからです。AIOSEOには無料版もあり、検索エンジン向けにサイトの最適化を始めることができます。
まず、WordPressにAIOSEOプラグインをインストールし、有効化する必要があります。詳しくはWordPressプラグインのインストール方法のチュートリアルをご覧ください。
有効化すると、プラグインはセットアップウィザードを起動します。Let’s Get Started」ボタンをクリックしてプラグインを設定することができます。ヘルプが必要な場合は、WordPressでAll In One SEOを適切に設定する方法についてのガイドを参照してください。
次に、WordPressダッシュボードからAll In One SEO ” Local SEOに移動します。
そして、「ローカルSEOを有効化する」ボタンをクリックして、ローカル設定を開始します。
WordPressのLocal SEOアドオンを有効化すると、AIOSEOで個別または複数のロケーションを追加し、Googleマップに表示することができます。あなたのサイトに両方を追加する方法をご紹介します。
個別ロケーションの追加
ロケーション、ビジネス情報、営業時間などを追加するには、まずAll In One SEO ” Local SEOにアクセスし、「ロケーション」タブを開く必要があります。
物理的な拠点が個別である場合は、「複数拠点」オプションを「いいえ」に設定してください。
その後、「地図」セクションまでスクロールダウンし、正確な位置をピン留めする。
クエリーを入力」フィールドに住所を入力するだけで、Googleマップがあなたの場所を表示します。
所在地を入力したら、忘れずに「変更を保存」ボタンをクリックしてください。
複数拠点の追加
実店舗が複数ある場合は、Local SEOの「Location」タブで「Multiple Locations」設定を有効化する必要があります。
その後、WordPress管理画面に新しいLocationsメニューが表示されます。
Locations “に移動し、”Add New “ボタンをクリックします。
WordPressエディターに入ったら、「地図」セクションまでスクロールダウンします。
Enter a query’（クエリーを入力）フィールドに住所を入力します。
地図上に位置を入力し、位置情報を追加したら、「公開する」ボタンをクリックしてください。
このステップを繰り返して、あなたのビジネスに必要な数のロケーションを追加することができます。
ロケーションの追加が完了したら、All In One SEO ” Local SEOメニューの「マップ」タブに戻ることができます。
ここでGoogle Maps APIキーを入力する必要があります。
それでは、Google MapsのAPIキーを作成する方法を見てみよう。
Google Maps APIキーの作成
まずはGoogle Maps Platformのサイトにアクセスし、「Get Started」ボタンをクリックします。
Googleアカウントでログインした後、課金アカウントを設定する必要があります。
Google Maps Platformには従量課金制があり、すべてのユーザーに対して最初の300ドルの月額使用料を無料で提供している。ほとんどのサイトでは、このチュートリアルで作成するようなシンプルな地図の埋め込みを簡単にカバーできるだろう。
あなたが手動で有料アカウントにアップグレードしない限り、料金は請求されませんのでご安心ください。
まずは、「課金アカウントの作成」ボタンをクリックしてください。
次に、あなたの国を選択し、ドロップダウンメニューからあなたの組織を最もよく表すものを選択することができます。
これらの情報を選択したら、利用規約のチェックボックスをクリックし、「続行」ボタンをクリックします。
次の画面では、確認のために電話番号を入力する必要があります。
そうしたら、「コードを送信」ボタンをクリックしてください。
コードを確認したら、次にすることは、あなたのビジネス名、支払い方法の詳細、請求先住所を入力することです。
これらの情報を入力したら、「無料トライアルを開始する」ボタンをクリックしてください。
次に、あなたの組織とGoogle Maps Platformの使用方法について4つの質問をします。
Google Mapsは、プラットフォームを利用する主な目的、業種、ユースケースの選択、企業規模を尋ねます。
これらの質問に答えたら、「送信」ボタンをクリックしてください。
Google Maps APIキーのポップアップが表示されます。
このキーをコピーしてテキストファイルに保存しておくと、将来使用するときに便利です。
Google Maps APIキーの作成が完了したら、WordPressダッシュボードに戻り、AIOSEO Local SEO設定に入力する必要がある。
WordPressでGoogleマップの設定をする
WordPress ダッシュボードからAll In One SEO ” Local SEOに戻り、「マップ」タブに移動します。
Google Maps API Keyを’API Key’フィールドに入力します。キーを追加するとすぐにAIOSEOに地図のプレビューが表示されます。
次に、マップ設定を編集するために下にスクロールすることができます。
AIOSEOでは、Gutenbergブロック、ショートコード、ウィジェット、PHPコードを使ってGoogleマップを表示することができます。また、様々なマップスタイルを選択したり、カスタマイザーをマップに追加することもできます。
完了したら「変更を保存」ボタンをクリックするのをお忘れなく。
WordPressでGoogleマップを表示する
次に、Google MapsをWordPressの投稿やページに追加します。まず、サイトのページを編集するか、新規ページを追加します。
ブロックエディターに入ったら、上部の「+」ボタンをクリックし、AIOSEO Local – Mapブロックをページの任意の場所に追加します。
その後、Google Mapがページに追加されます。
AIOSEOでは、右側のオプションから地図の設定を編集することもできます。例えば、ラベルやアイコンを表示したり、カスタマイザーを追加したり、マップの幅や高さを編集することができます。
複数の拠点をお持ちの場合は、右側のメニューからオプションを選択して、ハイライトする拠点を選択できます。
ロケーション」ドロップダウンメニューをクリックし、ご希望のロケーションを選択するだけで、サイトに表示することができます。
設定に満足したら、ページを公開してください。
あなたのサイトにアクセスして、Googleマップの動きを見ることができます。
サイドバーやフッターなど、サイトのウィジェットセクションにGoogleマップを追加することもできます。
まず始めに、WordPress管理画面から外観 ” ウィジェットに向かいます。次に、’+’ボタンをクリックし、あなたの場所を表示したい場所に’AIOSEO Local – Map’ウィジェットブロックを追加します。
その後、ウィジェット設定を編集できます。
例えば、タイトルの追加、マップの幅と高さの変更、複数の場所がある場合に表示する場所の選択、ラベルの編集などが可能です。
それだけだ！
これでサイトを更新すると、ウィジェットエリアにGoogleマップが表示されます。
WordPressで地図を使うためのエキスパートガイド
Googleマップをサイトに追加する方法はおわかりいただけたと思いますが、WordPressの地図や位置情報に関連する他のガイドもご覧ください。
- WordPressにBing Mapsを埋め込む方法（ステップバイステップ）
- WordPressでインタラクティブマップを追加する方法
- お問い合わせフォームにGoogleマップを埋め込む方法 (マップピン付き)
- WordPress用ベストGoogleマッププラグイン（ほとんどが無料）
- WordPressでGoogleマップの店舗検索を追加する方法
- WordPressでローカルビジネスに複数のロケーションスキーマを追加する方法
- WordPressで住所フィールドにオートコンプリートを追加する方法
- 最高のWordPressジオロケーションとGeoIPプラグイン
この投稿が、あなたの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.
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!
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!
管理者
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.
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
WPBeginner Support says
For tweaking the CSS, it would depend on the specific embed but you can find the CSS needed to change using Inspect Element. We have a guide on Inspect Element you may find helpful here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
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?
WPBeginner Support says
For what you’re wanting, you would want to take a look at our article below:
https://www.wpbeginner.com/plugins/how-to-add-interactive-travel-maps-in-wordpress/
管理者
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.
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?
Miranda Olding says
Thanks – so clear x
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
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
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!
divi says
Great Work Bro!!!!
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?
Karen says
I am having the exact problem. There is no flower on Google Maps anymore! So how does this work?
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.
Andy Meuleman says
A great lesson, easy to follow and implement.
Much thanks, Andy
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??
Parmod says
Can you be more specific about what exactly do you need
Bigg Tobias Inspired says
So, I loved the map tutorial but what if I want to place it in a certain area of the page… Or side bar? Can anyone help?
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.
WRC says
Thank you. Very helpful post.
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.
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
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?
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
Bongo says
Powerful stuff man. Thanks
Erwin says
Nice straight forward instructions. I posted a nice trick on how to get rid of the info bubble on the other day (http://goodwebsites.co.nz/how-to-remove-info-bubble-for-embedded-google-maps). Might be helpful.
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.
Widdershins says
That is so cool! … thanks
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