ますますつながりが深まる世界では、物理的な場所を持つということは、ウェブサイトに住所を掲載するだけではありません。オンラインでの存在と現実世界の間にシームレスな架け橋を作ることを意味します。地元でビジネスを営んでいる場合やイベントを主催している場合、あるいは単に人々が簡単に見つけられるようにしたい場合など、ウェブサイトに Google マップを埋め込むことは不可欠なステップです。
Gutenberg ブロック エディターでは、WordPress に Google マップを追加するのは困難でした。ただし、このガイドでは、WordPress の Gutenberg ブロック エディターを使用して Google マップを追加する最も簡単な方法を紹介します。
Gutenberg ブロック エディターを使用して WordPress Google マップを追加する方法?
Integrating Google Maps into your WordPress site can significantly enhance user experience by providing location-based information and easy navigation.
Tools Used: GutenKit Pro plugin and a block editor theme.
✅ Step 1 – Generate a Google Map API key for your website: Create a new project in Google Cloud Console → Enable API services for Google Maps → Generate an API key.
✅ Step 2 – Add Google Maps to your WordPress site: Add Google Maps API key to WordPress and enable WordPress Google Maps blocks from GutenKit.
✅ Step-3 – Use WordPress maps block to embed Google Map into your website: Drag and drop the Google Maps block in the Gutenberg block editor.
✅ Step-4: Customize the WordPress Google Maps appearance in the Gutenberg block editor: Choose the map type and address type, then customize the appearance.
By embading Google Maps you can Improve accessibility and make it easier for visitors to find locations.
ウェブサイトに Google マップを追加する理由は何ですか?
As of early 2026, over 2 billion users are actively using Google Maps.[ソース] So, integrating Google Maps into your WordPress site can significantly enhance user experience.
Maps on the website provide interactive and real-time location information. Whether you’re running a business website, a travel blog, or an event page, having an embedded map can offer immense value to your visitors.
Google マップを統合することが賢明な理由は次のとおりです。
- 位置情報に基づいた情報と簡単なナビゲーションを提供することで、ユーザー エクスペリエンスを向上させます。
- アクセシビリティを向上させ、訪問者が物理的な場所を見つけやすくします。
- 顧客の間で信用と信頼を築きます。
- ウェブサイトにビジネスの場所を埋め込むことで、ローカル SEO を強化します。
Gutenberg ブロック エディターを使用して WordPress に Google マップを追加する方法
Gutenberg ブロック エディターの場合、WordPress に Google マップを追加するのは困難で、複雑なコーディングが必要でした。しかし、GutenKit を使用すると、WordPress ブロック エディターに Google マップを埋め込む最も簡単な方法が得られます。
GutenKit empowers the WordPress block editor with 65+ advanced blocks, 20+ useful modules, and 900+ professional templates. Within a visual builder interface, it facilitates mega menu, query loop builder, dynamic content, responsive breakpoints, particles, parallaxes, etc to functional WordPress websites.
GutenKit ブロック エディターを使用して WordPress サイトに Google マップを追加するのは簡単です。必要なのは、Web サイトの Google マップ API キーを取得し、WordPress マップ ブロックを使用して Gutenberg ブロック エディターで Google マップを表示することだけです。それでは、詳細を見ていきましょう。
必要なプラグイン:
- GutenKit 無料: プラグインのダウンロード
- GutenKitプロ: プラグインを入手する
注記： Google マップ ブロックは GutenKit のプレミアム機能です。そのため、GutenKit プラグインの無料バージョンと Pro バージョンの両方が必要です。
ステップ1: ウェブサイト用のGoogle Map APIキーを生成する
Google マップを Web サイトに埋め込むには、Google マップ API を生成する必要があります。
➡️ 1.1 新しいプロジェクトを作成する
- に行きます キーと認証情報ページ Google Cloud Console の Google Maps Platform の。
- クリックしてください プロジェクトを作成 新しいプロジェクトを開きます。
- 新しいプロジェクトの場合は、 プロジェクト名 およびファイル 位置 親組織またはフォルダの。
- 次に、 作成する ボタン。
➡️ 1.2 Google マップの API サービスを有効にする
プロジェクトを作成したら、 APIとサービス > APIとサービスを有効にする次の画面で「+ APIとサービスを有効にする” をクリックして API ライブラリ ページに移動します。
APIライブラリページで、 マップJavaScript API、または検索バーを使用して検索します。見つかったら、それをクリックして API を有効にします。
➡️ 1.3 APIキーを生成する
その後、ダッシュボードに戻り、 APIとサービス > 資格資格情報セクションでは、
- クリックしてください + 資格情報を作成
- 選択する APIキー
ポップアップにAPIキーが表示されます。保存して APIキーをコピーする 後で。
ステップ2: WordPressサイトにGoogleマップを追加する
この手順では、Google マップ API キーを Web サイトに埋め込み、Google マップ ブロックを有効にする必要があります。
➡️ 2.1 GutenKitのWordPress Googleマップブロックを有効にする
ウェブサイト用のGoogle Map APIキーを取得したら、WordPressダッシュボードにログインして、 GutenKit > 設定 > API統合、 Google Maps APIキーを入力します。 変更内容を保存 ボタン。
➡️ 2.2 GutenKitのWordPress Googleマップブロックを有効にする
API キーを入力すると、WordPress に Google マップ ブロックを追加できるようになります。Gutenberg ブロック エディターで Google マップを表示するには、以下の手順に従ってください。
Gutenberg 向け Google マップを有効にするには:
- 案内する GutenKit > ブロック
- 探す グーグルマップ ブロック。
- トグルボタンをオンにします。
これで完了です。Gutenberg エディターで WordPress Google マップ ブロックを使用できるようになりました。
ステップ3: WordPressマップブロックを使用してGoogleマップをウェブサイトに埋め込む
Google マップ ブロックを Web ページに追加して、簡単に外観をカスタマイズできるようになりました。サイトのインタラクティブ性を高め、正確な位置情報を簡単に提供できます。
ウェブサイトの任意のページをエディターモードで開きます。その後、
- ブロックのサイドバーで、Google マップを検索します。
- ブロックを選択して Web に追加します。
ステップ4: GutenbergブロックエディターでWordPress Googleマップの外観をカスタマイズする
WordPress Google マップ ブロックを追加したら、Web ページでの表示方法をカスタマイズして決定できます。
コンテンツ タブには、次のオプションがあります。
設定：
- マップタイプ: 基本、複数のマーカー、ポリライン、ポリゴン、オーバーレイ、ルート付き、パノラマ。
- 住所タイプ: 住所はテキストアドレスで入力することも、地図座標 (緯度と経度) を使用することもできます。
マーカー：
- タイトル： ウェブサイトのマップ ビューに表示されるタイトルを入力します。
- カスタムマーカーアイコンを追加: カスタム マーカーの高さとマーカーの幅を持つカスタム マーカー アイコンを表示できます。
- コントロール: ズーム レベルを設定し、ストリート ビュー コントロール、マップ タイプ コントロール、スクロール ホイール ズーム、ズーム コントロール、および全画面コントロールを有効にします。
テーマ：
デフォルトを使用することができます Google テーマ、Snazzy Theme を使用して、Web サイトに地図を表示します。
下 スタイル タブでは、Gutenberg ブロック エディターで Google マップのマップ コンテナーの幅、高さ、配置をカスタマイズできます。
よくある質問
➡️ WordPress Gutenberg に Google マップを埋め込むにはどうすればいいですか?
GutenKit ページ ビルダー プラグインを使用して、Gutenberg に Google マップを埋め込むことができます。Google マップ用の個別のプラグインを使用するのとは異なり、このオールインワン ブロック エディター プラグインを使用すると、サイトの読み込み速度を高いレベルに保つことができます。
➡️ Do I need a Google Maps API Key to use the Gutenberg block?
Yes, for the Google Maps block to function correctly on your WordPress site, you must generate a Google Maps API Key. This key connects your website to Google’s mapping services. You can obtain this by creating a project in the Google Cloud Console, enabling the “Maps JavaScript API,” and generating the credentials to paste into your GutenKit settings.
➡️ WordPress にマップ ブロックを追加するにはどうすればよいですか?
設定でGoogleマップAPIキーを入力する必要があります。次に、WordPressサイトのGutenKitダッシュボードからマップブロックを有効にします。その後、エディターで任意のページを開き、 「+エディターで「」をクリックし、Google マップ ブロックを検索して、Web ページに追加します。
➡️ What types of map views are available in the Gutenberg editor?
The GutenKit plugin offers several advanced map types beyond the standard view, including:
– Multiple Markers: To show various locations on a single map.
– Overlay/Polygons: To highlight specific areas or boundaries.
– Panorama (Street View): To provide a virtual 360-degree representation of the surroundings.
– ルートあり: To display directions for walking, driving, or transit.
➡️ Is the Google Maps block available in the free version of GutenKit?
The Google Maps block is a premium feature of GutenKit. To use it, you will need to have both the Free version and the Pro version of the GutenKit plugin installed and activated on your WordPress site.
まとめ
Gutenberg ブロック エディターを使用すると、特に GutenKit プラグインを使用すると、WordPress ウェブサイトに Google マップを組み込むのがこれまでになく簡単になります。インタラクティブ マップを埋め込むプロセスを簡素化することで、GutenKit はユーザー エクスペリエンスを向上させるだけでなく、サイトのローカル SEO と信頼性も高めます。
ビジネスを管理したり、イベントを企画したり、あるいは単に場所へのアクセス性を高めたりしたい場合でも、この統合により、デジタルと物理的な存在のギャップを埋めることができます。ほんの数ステップの簡単な操作で、Google マップをシームレスにカスタマイズして表示できるようになり、WordPress サイトに多大な価値が加わります。
コメントを残す