地図を表示させる（Googleマップなどの埋め込み）方法

WordPressで作成したWebサイトに、地図を表示させる方法を紹介します。「Googleマップ」や「Yahoo!地図」などのオンライン地図を埋め込むと、さまざまな便利機能が使えます。

WordPressサイトに地図を掲載しよう

企業や店舗のWebサイトにおいて、その訪問者に会社やお店へ来訪してもらいたい場合は、アクセスマップの掲載が不可欠です。

また、個人ブログであれば、旅行ブログなら観光地の地図を、グルメ記事なら飲食店の地図を掲載することで、読者に喜ばれるでしょう。

以前は、地図をイラストで作成して掲載するWebサイトが多くありました。現在は、「Googleマップ」や「Yahoo!地図」などのオンライン地図を埋め込むケースが増えています。

地図を「埋め込む」とは

外部サービスの機能を、Webページ上で利用可能にする操作のことを「埋め込む」と言います。

「Googleマップ」や「Yahoo!地図」へのリンクを貼るのではなく、ページ内に地図を埋め込むことで、サイト訪問者は外部サービスに移動することなく地図を確認することができます。

地図を埋め込むメリット

地図を埋め込むことによって、次のメリットがあります。

オンライン地図を利用するメリット

Webサイトに掲載する地図を、イラストではなくGoogleマップなどのオンライン地図を利用することによって、次のメリットがあります。

中でも、「ストリートビュー」など機能が豊富なGoogleマップは人気で、幅広いWebサイトで利用されています。

WordPressで地図を埋め込むための基本手順

WordPressでは、初心者さんでもオンライン地図を簡単に埋め込むことができます。基本手順は、以下のとおりです。

1. 地図を掲載したい場所を検索（オンライン地図画面）
2. 地図のサイズや拡大率などを調整（オンライン地図画面）
3. 埋め込み用コードをコピー（オンライン地図画面）
4. Webサイト上の任意の位置にコードを貼り付け（WordPress管理画面）

ここからは、「Googleマップ」と「Yahoo!地図」の埋め込み手順について説明します。

Googleマップを埋め込む方法

場所を検索

地図の拡大率を調整

地図のサイズを選択

サイズは、以下の4つから選択できます。

埋め込み用コードをコピー

サイズやズームを変更することによって埋め込み用コードも変更されるため、「HTMLをコピー」は最後に行なってください。

サイト上の任意の位置にコードを貼り付け

コピーした埋め込みコードの貼り付け先は、サイト上のどこに地図を表示させるかによって異なります。

投稿・固定ページのメインコンテンツ内に地図を表示させる場合
＞ ブロックエディタの「カスタム HTML」ブロックに貼り付け

Webサイトのサイドバーやフッターなどに地図を表示させる場合
＞ ウィジェットの「カスタム HTML」ウィジェットに貼り付け

「カスタム HTML」ブロックに貼り付け

公開後、地図が正しく表示されない場合は、よくある質問をお読みください。

「カスタム HTML」ウィジェットに貼り付け

保存後、地図が正しく表示されない場合は、よくある質問をお読みください。

Yahoo!地図を埋め込む方法

場所を検索

地図のサイズや拡大率などを調整

「共有」をクリックした後の画面でもズーム調整できますが、今回の検証では、埋め込みした地図には指定した拡大率が反映されませんでした。

埋め込み用コードをコピー

サイト上の任意の位置にコードを貼り付け

コードの貼り付け方法は、Googleマップを埋め込む方法のWebサイト上の任意の位置にコードを貼り付けで説明した手順と同じです。

よくある質問

• 実際の場所とは異なる地図が表示されてしまう
• 思い通りの配置やサイズで表示されない

実際の場所とは異なる地図が表示されてしまう

実際の場所とは異なる地図が表示されてしまう場合や、もっと細かくピンポイントで位置調整をしたいという場合は、以下の方法をお試しください。

Googleマップの位置調整方法

ここから先の手順は、Googleマップを埋め込む方法の地図のサイズを選択以降の手順と同じです。

Yahoo!地図の位置調整方法

ここから先の手順は、Yahoo!地図を埋め込む方法の地図のサイズや拡大率などを調整以降の手順と同じです。

思い通りの配置やサイズで表示されない

使用しているテーマによっては、埋め込んだ地図が思い通りに配置されなかったり、指定したサイズで表示されない場合があります。