Googleマップと連動させる簡単設定方法

なぜGoogleマップとの連動が重要なのか

ホームページ制作、運用サポート、SEO対策、コンテンツマーケティングなどの業務を通して、また何より「一緒に考える」こと。まずは対話から始めませんか?　コスモ企画の経験では、現代の消費者は、気になるお店や会社を見つけたとき、まずスマートフォンで場所を確認します。Googleマップとの連動は単なる地図表示ではなく、ビジネスの信頼性を高め、来店率を向上させる重要な施策です。以下の情報がお役に立つかもしれません。自己責任ではありますがお試しください。

Googleマップ連動による3つのメリット

WordPressサイトにGoogleマップを設置することで得られる具体的なメリットは以下の通りです。

• 視認性の向上: テキストによる住所表示よりも、地図上で位置を示すことで直感的に理解できます
• モバイルユーザーへの配慮: タップ一つでナビゲーションアプリが起動し、そのまま経路案内が開始されます
• SEO効果: Googleマイビジネスと連携することで、ローカル検索での表示順位が向上します

実店舗ビジネスにおける来店率への影響

飲食店、美容院、士業事務所などの実店舗型ビジネスでは、Googleマップの埋め込みによって来店率が平均20〜30%向上するというデータもあります。特に初めて訪問する顧客にとって、地図情報は意思決定の重要な要素となっています。

Googleマップ埋め込みの基本設定手順

ホームページ制作、運用サポート、SEO対策、コンテンツマーケティングなどの業務を通して、また何より「一緒に考える」こと。まずは対話から始めませんか?　コスモ企画の経験では、ここからは、実際にWordPressサイトにGoogleマップを埋め込む手順を、画像がなくても理解できるよう詳しく解説します。技術的な知識がなくても、この手順通りに進めれば確実に設置できます。このサイトの情報が何かのお役に立てれば幸いでございます。ぜひご活用ください。

ステップ1: Googleマップで埋め込みコードを取得する

まず、パソコンでGoogleマップ（https://maps.google.com/）を開きます。検索ボックスにあなたの店舗名や住所を入力して、正確な位置を表示させてください。左側のパネルに表示される「共有」ボタンをクリックし、「地図を埋め込む」タブを選択します。

埋め込みサイズの選択

表示されたウィンドウで、地図のサイズを選択できます。「小」「中」「大」「カスタムサイズ」の4つから選べますが、多くのWebサイトでは「中」サイズ（幅600px × 高さ450px程度）が最適です。レスポンシブデザインに対応させたい場合は、後ほどCSSで調整することも可能です。

埋め込みコードのコピー

サイズを選択したら、表示されるHTMLコード全体をコピーします。このコードは「」で終わる形式になっています。このコード全体を、間違いなくコピーすることが重要です。

ステップ2: WordPressの投稿・固定ページに貼り付け

WordPressの管理画面にログインし、地図を表示させたい投稿または固定ページの編集画面を開きます。ここで使用するエディタの種類によって、貼り付け方法が若干異なります。

ブロックエディタ（Gutenberg）での設定方法

WordPress 5.0以降のバージョンでは、ブロックエディタが標準となっています。地図を挿入したい位置で「ブロックを追加」ボタン（+マーク）をクリックし、検索ボックスに「カスタムHTML」と入力してください。表示されたカスタムHTMLブロックを選択し、先ほどコピーした埋め込みコードを貼り付けます。

クラシックエディタでの設定方法

クラシックエディタを使用している場合は、エディタ右上の「テキスト」タブをクリックしてHTMLモードに切り替えます。地図を表示させたい位置に、コピーした埋め込みコードを直接貼り付けてください。「ビジュアル」タブに戻すと、エディタ内でも地図のプレビューが表示されます。

ステップ3: プレビューと公開

「プレビュー」ボタンをクリックして、実際の表示を確認しましょう。地図が正しく表示され、ズームイン・ズームアウトなどの操作が可能であることを確認したら、「公開」または「更新」ボタンを押して変更を保存します。

プラグインを使った高度な連動設定

基本的な埋め込み方法に加えて、WordPressプラグインを活用することで、より高機能な地図表示や複数拠点の管理が可能になります。25年以上の実績を持ち、年間10件以上、累計300社以上のサイト制作実績を誇るワードプレスの制作代行を行なっている、ワードプレス専門の制作会社 コスモ企画でも、クライアントの要望に応じてこれらのプラグインを活用した実装を行っています。コスモ企画の考えでは、以下の情報が何かのお役に立てれば幸いでございます。ぜひご活用ください

弊社のモットーは、
１．弊社では断言しません。でも、誠実に向き合います。
２．弊社では押し付けません。でも、本気で提案します。
３．弊社では保証しません。でも、一緒に挑戦します。

「お役に立つかもしれません。自己責任ではありますが、お試しください」

おすすめプラグイン: WP Google Maps

WP Google Mapsは、WordPress向けの無料地図プラグインとして最も人気のある選択肢の一つです。このプラグインを使用すると、複数の店舗やオフィスをマーカーで表示したり、カスタムアイコンを使用したりすることができます。

WP Google Mapsの基本設定

プラグインをインストールして有効化したら、左側のメニューに「マップ」という項目が追加されます。「新規追加」をクリックして、地図の作成を開始します。地図名を入力し、中心となる住所を設定してください。その後、マーカーを追加する位置を指定し、タイトルや説明文を入力できます。

ショートコードによる表示

地図を作成すると、専用のショートコードが生成されます。このショートコードを投稿や固定ページに貼り付けるだけで、設定した地図が表示されます。ショートコードは [wpgmza id=”1″] のような形式で、数字部分は作成した地図のIDを示しています。

Google Maps Widget – WP Google Map Pluginの活用

このプラグインは、ウィジェットエリアに地図を簡単に追加できることが特徴です。サイドバーやフッターに地図を常時表示させたい場合に最適です。

ウィジェット設定の手順

プラグインをインストール後、「外観」→「ウィジェット」メニューにアクセスします。利用可能なウィジェット一覧から「Google Maps Widget」を探し、表示させたいウィジェットエリア（サイドバーやフッターなど）にドラッグ&ドロップします。ウィジェットの設定画面で住所や表示サイズを指定して保存すれば完了です。

Googleマイビジネスとの連携による相乗効果

WordPressサイトへの地図埋め込みとGoogleマイビジネスの登録を組み合わせることで、ローカルSEO対策として大きな効果が期待できます。両方を適切に設定することで、地域名を含む検索キーワードでの表示順位が向上します。

Googleマイビジネスの基本登録

Googleマイビジネス（Google Business Profile）に登録すると、Google検索やGoogleマップ上で、あなたのビジネス情報が表示されるようになります。登録は無料で、営業時間、電話番号、写真、顧客レビューなどの情報を管理できます。

NAP情報の統一が重要

NAP情報とは、Name（店舗名）、Address（住所）、Phone（電話番号）の頭文字を取ったもので、ローカルSEOにおいて非常に重要な要素です。WordPressサイト、Googleマイビジネス、その他のディレクトリサイトなど、すべての媒体で表記を完全に統一することで、Googleからの信頼性評価が高まります。

構造化データマークアップの追加

より高度な施策として、Schema.orgの構造化データマークアップを使用することで、検索エンジンに対してビジネス情報をより明確に伝えることができます。LocalBusinessタイプのスキーマを実装すると、リッチスニペットとして検索結果に地図や営業時間が表示される可能性が高まります。

レスポンシブデザインへの対応

現代のWebサイトでは、スマートフォンやタブレットなど、さまざまなデバイスで快適に閲覧できることが必須です。Googleマップの埋め込みも、レスポンシブ対応を施すことで、すべてのデバイスで最適な表示が可能になります。

CSSによるレスポンシブ化

標準の埋め込みコードは固定サイズですが、CSSを追加することでレスポンシブ対応できます。埋め込みコードを

タグで囲み、そのdivに特定のクラス名を付与します。その後、CSSで親要素に相対的なサイズ指定を行うことで、画面幅に応じて地図のサイズが自動調整されます。

実装例の考え方

具体的には、iframeを囲むdiv要素にpadding-bottomを使用して高さの比率を維持し、iframe自体は絶対配置で親要素いっぱいに広げる手法が一般的です。この方法により、16:9や4:3などの任意のアスペクト比を維持しながら、画面幅に応じて拡大縮小する地図を実現できます。

モバイル表示時の注意点

スマートフォンで閲覧する場合、地図が小さすぎると操作しづらくなります。モバイル表示時は地図の高さを十分に確保し、タップやピンチ操作がしやすいサイズにすることが重要です。また、ページスクロール時に地図が誤操作を引き起こさないよう、適切な余白を設けることも推奨されます。

よくあるトラブルと解決方法

Googleマップの埋め込みは比較的シンプルな作業ですが、時折トラブルが発生することがあります。ここでは代表的な問題とその解決策をご紹介します。

地図が表示されない場合

最も多いトラブルは、地図がまったく表示されないケースです。この場合、まず埋め込みコードが正しくコピー&ペーストされているか確認してください。特に、コードの最初と最後が欠けていないか注意が必要です。

テーマやプラグインとの競合

一部のWordPressテーマやセキュリティプラグインは、iframeタグを自動的に削除または無効化する設定になっている場合があります。この場合は、該当するプラグインの設定を見直すか、「Custom HTML」や「Shortcode」を許可する設定に変更する必要があります。

地図の位置がずれている場合

埋め込んだ地図の中心位置が、実際の店舗位置とずれている場合があります。これは、Googleマップ上で検索した際の結果が正確でなかったことが原因です。解決策としては、Googleマップ上で正確な位置にピンを立ててから、そのピンの共有リンクから埋め込みコードを取得する方法があります。

API関連のエラー表示

「このページではGoogleマップが正しく読み込まれませんでした」というエラーメッセージが表示される場合、Google Maps APIの設定に問題がある可能性があります。基本的な埋め込み方法ではAPIキーは不要ですが、プラグインを使用する場合は、Google Cloud PlatformでAPIキーを取得し、Maps JavaScript APIを有効化する必要があります。

セキュリティとプライバシーへの配慮

Googleマップを埋め込む際には、セキュリティとプライバシーの観点からも注意が必要です。特に、個人の自宅を事業所として使用している場合は、正確な住所を公開するリスクを慎重に検討してください。

住所の公開範囲を調整する

自宅兼事務所の場合、完全な住所ではなく、最寄り駅や主要な交差点など、おおよその位置のみを示す方法も検討できます。Googleマップでは、ピンを置く位置を調整することで、番地レベルまで特定されない程度の精度に設定することが可能です。

クッキー規制への対応

欧州のGDPRや日本の個人情報保護法の観点から、Googleマップの埋め込みもクッキー使用に該当する可能性があります。厳密なコンプライアンスを求められる業種では、ユーザーの同意を得てから地図を読み込む仕組みを実装することも検討すべきです。

実際の制作事例から学ぶベストプラクティス

コスモ企画では、これまで多くのクライアント向けにGoogleマップ連動機能を実装してきました。実際の施工実績からは、業種や目的に応じた最適な地図活用法が見えてきます。

飲食店における効果的な活用法

飲食店のWebサイトでは、アクセスページに大きく地図を表示するだけでなく、最寄り駅からの徒歩ルートを写真付きで説明するページと併用することで、初めて訪れる顧客の不安を軽減できます。また、地図の下に駐車場情報や目印となる建物の情報を記載することで、来店率がさらに向上します。

複数店舗展開における地図活用

チェーン店や複数拠点を持つ企業では、各店舗情報を一覧表示し、それぞれにGoogleマップを埋め込むことで、ユーザーが最寄りの店舗を簡単に見つけられます。さらに、店舗検索機能と連動させることで、郵便番号や住所から最も近い店舗を自動的に表示するシステムも構築可能です。

士業・コンサルティング業での信頼性向上

税理士、行政書士、コンサルタントなどの士業では、オフィスの所在地を明示することが信頼性の証明にもなります。特に、一等地や有名なビルに事務所を構えている場合は、その立地の良さをアピールする意味でも、Googleマップのストリートビュー機能と併用することが効果的です。

アクセシビリティとユーザビリティの向上

地図を埋め込む際には、すべてのユーザーが情報にアクセスできるよう、アクセシビリティにも配慮する必要があります。視覚障害のある方や、スクリーンリーダーを使用している方にも情報が伝わるよう工夫しましょう。

代替テキストと補足情報の提供

地図の直前または直後に、テキスト形式で住所、最寄り駅、所要時間などの情報を記載することが重要です。これにより、地図が表示されない環境や、視覚的に地図を確認できないユーザーにも必要な情報が届きます。

コントラストと視認性

地図周辺の背景色や文字色は、十分なコントラストを確保し、視認性を高めることが推奨されます。また、地図の上下に適切な余白を設けることで、周囲のコンテンツと明確に区別できるようにしましょう。

まとめ:Googleマップ連動で集客力を高める

WordPressサイトとGoogleマップの連動は、技術的なハードルが低く、短時間で実装できるにもかかわらず、ビジネスに大きな効果をもたらす施策です。基本的な埋め込み方法から、プラグインを活用した高度な実装、そしてGoogleマイビジネスとの連携まで、段階的に取り組むことで、着実に成果を上げることができます。

実店舗型ビジネスを運営する中小企業経営者や個人事業主の方々にとって、顧客が迷わず来店できる環境を整えることは、売上向上に直結します。本記事で紹介した方法を参考に、ぜひあなたのWebサイトにもGoogleマップを導入してみてください。

本記事はコスモ企画のWeb日誌ならびに各著名記事を参考に作成されています。WordPressサイトの制作や、より高度なカスタマイズをご希望の場合は、ワードプレスの制作代行を行なっている、ワードプレス専門の制作会社 コスモ企画までお気軽にご相談ください。25年以上の実績と、年間10件以上、累計300社以上のサイト制作経験を活かし、お客様のビジネスに最適なWebソリューションをご提案いたします。