CocoonのGoogleマップ埋め込みガイド｜地図をきれいに貼り付ける手順をやさしく解説

CocoonでGoogleマップを埋め込みたいけれど、どこに何を貼ればいいのか分からず手が止まっていませんか？

この記事では、Googleマップのコード取得からCocoonへの貼り付け、見やすく整えるコツまで、初心者の方にも分かるように順番に解説します。

CocoonでGoogleマップを埋め込む前に｜まず全体の流れをつかもう

ただ、初めて作業する方は次のようなところで迷いやすいです。

• Googleマップのどこからコードを取るのか分からない
• Cocoonでどのブロックを使えばいいのか分からない
• 貼ったのに表示が崩れる
• スマホで見ると地図が見づらい
• 通常の地図で足りるのか判断できない

私も最初は、画像のように貼り付けるのかと思って遠回りしました。

ですが一度やり方を覚えると、店舗案内、アクセスページ、イベント会場の紹介、会社概要ページなど、いろいろな場面で使える便利な方法だと実感しました。

まず押さえたいポイントは「カスタムHTML」に貼ること

CocoonでGoogleマップを埋め込むときは、基本的に「カスタムHTML」ブロックを使います。Googleマップから取得した埋め込みコードを、そのままこのブロックに貼るのが基本です。

最初に全体像を表で見ておくと、作業のイメージがつかみやすくなります。

作業の段階	何をするか	つまずきやすい点
Googleマップ側	表示したい場所を検索する	似た名前の場所を選んでしまう
Googleマップ側	共有から埋め込みコードを取得する	共有リンクと埋め込みコードを混同しやすい
WordPress側	投稿または固定ページを開く	どちらに入れるか迷いやすい
Cocoon側	カスタムHTMLブロックを追加する	ブロック名を見つけにくいことがある
WordPress側	コードを貼り付けて確認する	プレビュー前に不安になりやすい
仕上げ	サイズや見た目を整える	スマホ表示を忘れやすい

この中でも特に大事なのは、「共有リンク」ではなく「埋め込みコード」を使うことです。

URLをそのまま貼る方法とは違い、埋め込みコードを使うと記事の中に地図をそのまま表示できます。

画像ではなく埋め込みにするメリット

地図をスクリーンショットで載せる方法もありますが、埋め込みにははっきりした良さがあります。

特に、お店や会社のサイトでは、読者が知りたいのは「ここにどう行けばいいか」です。住所だけよりも、地図があるほうが安心してもらいやすいです。

Cocoonで地図を貼るのに向いているページ

Googleマップの埋め込みは、どこにでも入れればよいわけではありません。

読者の役に立つ場所に入れることで、ページの満足度が上がります。

• 店舗情報ページ
• 会社概要ページ
• アクセスページ
• イベント案内ページ
• 観光スポット紹介の記事
• 教室やサロンの案内ページ
• 地域ブログの記事内

たとえばパン屋さんのブログなら、「店舗情報」に地図を入れるだけでなく、「はじめて来店される方へ」といった記事に入れておくのも親切です。

読者が迷いそうな場面を想像して、必要な場所に置くのがポイントです。

Googleマップの埋め込みコードを取得する流れ

Googleマップで場所を検索して正しい地点を開く

まずはGoogleマップを開き、表示したい場所を検索します。

店名、施設名、住所などで検索できます。

ここで大切なのは、似た名前の候補が出たときに、必ず正しい場所を選ぶことです。

同じ名前の店舗や、近い住所の別施設を選んでしまうと、あとで気づきにくいです。

確認しておきたいポイントは次の通りです。

• 店名が合っているか
• 住所が合っているか
• ピンの位置が正しいか
• 複数店舗がある場合は目的の店舗か
• 建物名などの情報が必要なら一致しているか

特に複数店舗があるお店や、支店が多い会社は要注意です。

地図が違うだけで、読者の信頼を大きく落としてしまいます。

「共有」から「地図を埋め込む」を選ぶ

場所が開けたら、Googleマップの「共有」を押します。

すると、リンク共有と埋め込みに関する選択肢が表示されます。

ここで選ぶのは、通常のリンクではなく「地図を埋め込む」の方です。

この違いで迷う方はとても多いです。

項目	リンク共有	地図を埋め込む
使い道	URLを送る	Webページ内に地図を表示する
見た目	テキストリンクになりやすい	地図そのものが表示される
WordPressとの相性	用途次第	地図掲載に向いている
初心者の分かりやすさ	シンプル	地図を見せたいならこちら
おすすめの場面	SNSやメッセージ	ブログ記事や固定ページ

「貼り付ける」という言葉だけで考えると、URLを貼ればよさそうに感じるかもしれません。

ですが、記事の中に地図をそのまま見せたいなら、使うのは埋め込みコードです。

埋め込み用のHTMLをコピーする

「地図を埋め込む」を選ぶと、HTMLが表示されます。そのコードをコピーしておきます。

コードの中には地図を表示するための情報が入っていますが、最初から意味を細かく理解しなくても大丈夫です。基本的には、そのまま使えば問題ありません。

ここでよくあるミスは次の通りです。

• コードの一部だけをコピーしてしまう
• 共有URLだけをコピーしてしまう
• 余計な文字を消してしまう
• 貼る前に自分でいじって崩してしまう

最初は、まずそのまま貼ることをおすすめします。サイズ調整などは、表示を確認してからでも遅くありません。

CocoonにGoogleマップを貼り付ける手順

投稿か固定ページを開いて貼り付ける場所を決める

まずは、地図を入れたい投稿または固定ページを開きます。

どちらを使っても問題ありませんが、使い分けると管理しやすくなります。

• お店や会社の案内なら固定ページ
• イベント紹介なら投稿でも固定ページでも可
• 観光スポット紹介なら投稿
• プロフィールやアクセス情報なら固定ページ

場所を決めるときは、読者の流れを意識するのがコツです。

たとえば、住所のすぐ下に地図を置くと、読者が迷わず確認できます。

カスタムHTMLブロックを追加する

次に、ブロック追加から「カスタムHTML」を選びます。

そこへ先ほどコピーした埋め込みコードを貼り付けます。

もし「カスタムHTML」が見つからない場合は、検索欄に次のような言葉を入れて探してみてください。

• カスタムHTML
• カスタム HTML
• カスタム

このあたりは少し探しにくいことがありますが、慌てなくて大丈夫です。

貼り付けた直後はコードがそのまま見えるため不安になるかもしれませんが、それは正常な表示です。

プレビューや公開画面で確認すると、地図として表示されます。

プレビューで表示を確認する

貼り付けが終わったら、必ずプレビューで確認します。

ここを飛ばして公開すると、思っていた見た目と違うことがあります。

確認したいポイントは次の通りです。

• 地図が表示されているか
• 正しい場所が出ているか
• 横幅が不自然でないか
• スマホでも見やすそうか
• 周りの文章とのバランスが悪くないか

私も一度、地図の位置が少し違うまま公開しそうになったことがあります。

文字情報だけでは気づきにくいので、最後の確認は必ずしておきたいところです。

地図を見やすくするサイズ調整のコツ

Googleマップ側でサイズを選ぶ考え方

埋め込みコードを取得するとき、地図のサイズを選べる場合があります。

ここでは、見せたい目的に合わせて考えると失敗しにくいです。

地図の使い方	向いているサイズ感	理由
住所確認がメイン	標準的な大きさ	地図が大きすぎず読みやすい
アクセス説明がメイン	やや大きめ	道路や周辺の目印が見やすい
店舗情報ページの下部	中くらい	本文の邪魔をしにくい
イベント会場案内	やや大きめ	来場者が場所を確認しやすい
記事内の補足表示	小さめから中くらい	読み進めやすさを保ちやすい

「ここにあります」と示したいのか、「この周辺まで見てほしい」のかで、ちょうどよい大きさは変わります。

本文とのバランスを考えて調整する

地図だけが目立ちすぎると、記事全体が読みにくくなります。

文章、画像、見出しとのバランスを考えて配置すると、ページの完成度が上がります。

• 見出し直下に大きすぎる地図を置かない
• 説明文がほぼないまま地図だけ出さない
• 地図の前後にひとこと補足を入れる
• 地図の下に住所やアクセス補足を置く
• 複数の地図を連続で並べすぎない

たとえば「最寄り駅からの位置関係が分かる地図です」とひとこと添えるだけでも、読者はかなり読みやすくなります。

地図の前後に入れたい一言の例

Googleマップは便利ですが、いきなり表示するだけだと少し無機質に見えます。

前後に短い説明を入れると、ぐっと親切な印象になります。

• お店の場所はこちらです
• 最寄り駅からの位置関係が分かる地図を載せています
• 車で来る方は周辺道路もあわせてご確認ください
• 初めて来られる方は、地図で場所を確認しておくと安心です
• 会場周辺の様子もあわせてチェックできます

こうした一言があるだけで、単なる貼り付けではなく、読者目線の案内になります。

スマホでも見やすい地図に整えるポイント

横幅の見え方を必ずスマホで確認する

パソコン画面だけで判断すると、スマホで見たときの違和感に気づきにくいです。

投稿前には、スマホ表示でも確認しておくのがおすすめです。

• 横に切れていないか
• 周りの文章と比べて大きすぎないか
• タップしづらくなっていないか
• 上下の余白が詰まりすぎていないか
• 地図の前後の文章が読みにくくなっていないか

特に、地図のあとにすぐ別の見出しが続くと、少し窮屈に見えることがあります。

適度に文章や補足を入れて、流れを整えるのがポイントです。

スマホで地図が見づらいときの考え方

スマホで見づらいと感じたら、まずは「何を見せたい地図なのか」をはっきりさせると調整しやすくなります。

• 場所だけ伝えたいなら標準的な大きさでよい
• 周辺道路まで見せたいならやや大きめにする
• 細かい道順は文章でも補足する
• 駅名や目印も一緒に書く
• 地図に頼りすぎず、住所も併記する

読者の中には、地図を見るのがあまり得意ではない方もいます。

だからこそ、「地図があるから大丈夫」ではなく、文字でも支えることが大切です。

地図だけに頼らず補足情報もセットにする

使いやすいアクセス案内は、地図だけでは完成しません。

文章による補足があることで、ぐっと伝わりやすくなります。

補足すると親切な情報	具体例
住所	建物名まで入れると分かりやすい
最寄り駅	どの駅から近いかを明記する
徒歩時間	駅から何分くらいかを書く
目印	コンビニ、交差点、建物など
駐車場の有無	車利用の読者に親切
入り口の注意点	裏口や階段位置など

地図の下にこうした情報があると、読者はかなり安心できます。

特に店舗や教室などの案内ページでは、地図と補足情報をセットで考えるのがおすすめです。

Cocoonで地図がうまく表示されないときの対処法

共有リンクを貼っていて埋め込みコードになっていない

いちばん多いのがこのパターンです。

GoogleマップのURLをそのまま貼ってしまい、埋め込みコードを使っていないケースです。

• 共有用のURLを貼っていないか
• 「地図を埋め込む」から取得したか
• HTML全体をコピーしたか
• 途中を消していないか

「共有」と「埋め込み」は似ていますが、目的が違います。

記事内に地図を表示したいなら、埋め込み用のHTMLを使う必要があります。

カスタムHTMLではないブロックに貼っている

埋め込みコードを段落ブロックや通常のテキスト入力欄に貼ると、コードがそのまま文字として見えることがあります。

この場合は、貼る場所が違っている可能性が高いです。

• カスタムHTMLブロックを使っているか
• コードを段落ブロックに貼っていないか
• 見た目ではなくブロック名を確認したか
• 貼り直してプレビューしたか

うまくいかないときは、一度削除してカスタムHTMLブロックにあらためて貼り直すと解決しやすいです。

場所の選択ミスや表示確認不足

貼れたとしても、表示された地図が違う場所だったということがあります。

これは操作ミスというより、確認不足で起きやすいです。

• 店名が正しいか
• 住所が正しいか
• 地図のピン位置が正しいか
• 読者が行きたい場所になっているか
• 複数拠点のうち目的の地点か

特に、移転した店舗や支店が多いサービスでは気をつけたいところです。

違う地図が載っているだけで、読者に不信感を与えてしまいます。

通常のGoogleマップとマイマップの違いを知っておこう

一地点を見せたいなら通常のGoogleマップで十分

多くの場合は、通常のGoogleマップで十分です。

店舗、会社、会場、観光スポットなど、一つの場所を案内したいなら、まずこれで困りません。

• お店の所在地を見せたい
• 会社のアクセスを案内したい
• イベント会場を紹介したい
• 観光地の位置を伝えたい
• 記事中で一か所だけ補足したい

最初の一歩としては、まず通常のGoogleマップ埋め込みを覚えるのが近道です。

複数の地点をまとめたいなら別の方法も検討する

一方で、複数の場所をまとめて見せたい場合は、通常の地図だけでは少し物足りないことがあります。

• おすすめのカフェを何店舗も紹介したい
• 旅行ルートをまとめて見せたい
• 複数の教室や店舗を案内したい
• 地域の見どころを一覧で見せたい

こうした場合は、Googleマイマップのような別の方法が向いています。

無理に通常の地図をたくさん並べると、ページが見づらくなりやすいです。

どちらを使うべきか迷ったときの判断基準

迷ったときは、次の表を目安にすると分かりやすいです。

目的	向いている方法
1か所の場所を案内したい	通常のGoogleマップ
店舗や会社の所在地を見せたい	通常のGoogleマップ
複数のスポットをまとめたい	マイマップなど別の方法
旅行ルートを一覧で見せたい	マイマップなど別の方法
まず簡単に始めたい	通常のGoogleマップ

最初から難しい方法を選ばなくても大丈夫です。

まずはシンプルな方法で地図を貼れるようになると、その後の応用もしやすくなります。

読者に親切なアクセス案内ページを作るコツ

地図の前に結論を書いて迷わせない

読者はページを開いた瞬間に、「結局どこなのか」を知りたいことが多いです。

そのため、地図の前に結論を書くと親切です。

• 店舗名
• 住所
• 最寄り駅
• 徒歩時間
• 営業時間の案内ページへの導線
• 駐車場の有無

読者は文章を最初から最後まで読むとは限りません。

必要な情報を先に見せることで、忙しい人にもやさしいページになります。

よくある来店パターンを想像して補足する

読者の行動を想像すると、案内の質が上がります。

たとえば、次のような人を思い浮かべると、必要な情報が見えてきます。

• 初めて来る人
• 電車で来る人
• 車で来る人
• 雨の日に来る人
• 子ども連れで来る人
• 近くまで来たのに入り口が分かりにくい人

私はアクセス案内を書くとき、「初めて来る友人に送るつもりで書く」と考えるようにしています。

そうすると、必要な一言が自然と増えて、説明がやさしくなります。

地図の下に入れると喜ばれやすい情報

地図の下には、読者が次に気になることを書いておくと親切です。

• 住所の再掲
• 最寄り駅からの道順
• 車で来る場合の案内
• 駐車場や駐輪場の有無
• 入り口の位置
• 建物の何階か
• 予約ページや問い合わせ先への導線

これらがあると、読者は別ページを行き来せずに済みます。

ページ全体の満足度も上がりやすいです。

CocoonでGoogleマップを貼るときに意識したいSEOの考え方

検索した人が本当に知りたいことに答える

このテーマで検索する人は、操作方法だけを知りたいわけではありません。

実際には、その先の悩みも抱えていることが多いです。

• どうやって貼るのか
• どのブロックを使うのか
• スマホでも見やすいのか
• 見やすくするにはどうするのか
• 表示されないときはどうするのか

こうした疑問まで先回りして答えると、記事の満足度が高くなりやすいです。

初心者向けの記事ほど、「その次に困ること」まで拾ってあげるのが大切です。

キーワードを詰め込みすぎず自然に使う

SEOを意識すると、キーワードをたくさん入れたくなるかもしれません。

ですが、不自然な文章になると読みづらくなってしまいます。

• 見出しに自然な形でキーワードを入れる
• 本文では読みやすさを優先する
• 関連語もやわらかく混ぜる
• 同じ表現を繰り返しすぎない
• 読者の疑問に答える流れを優先する

検索エンジンのためだけではなく、まず読者にきちんと伝わるかどうかを大事にしたいところです。

「貼れる」だけでなく「使いやすい」まで書く

競合の記事には、最短手順だけで終わるものもあります。

そこで差がつくのは、読者が実際に使いやすいところまで説明しているかどうかです。

• どこに置くと読みやすいか
• スマホでどう見えるか
• 地図の前後に何を書くと親切か
• アクセス案内に何を足すべきか
• どんなページで役立つか

操作方法だけではなく、使いどころまで教えると、読者は「この記事を読んでよかった」と感じやすくなります。

よくある質問

Q. CocoonでGoogleマップを埋め込むときはプラグインなしでもできますか？

はい、基本的にはプラグインなしでできます。Googleマップで取得した埋め込みコードを、CocoonのカスタムHTMLブロックに貼り付ければ表示できます。まずはシンプルな方法で試してみて、特別な機能が必要になったときだけ別の方法を考えると進めやすいです。

Q. Cocoonで地図を貼り付けたのにコードのまま表示されるのはなぜですか？

コードがそのまま見える場合は、カスタムHTMLではないブロックに貼っている可能性があります。段落ブロックなどに貼ると、地図ではなく文字として表示されやすいです。カスタムHTMLブロックを使っているかどうかを見直すと改善しやすいです。

Q. CocoonでGoogleマップを埋め込むなら投稿と固定ページのどちらが向いていますか？

内容に応じて選ぶのがおすすめです。店舗情報や会社概要、アクセス案内のように長く使う内容なら固定ページが向いています。一方で、イベント紹介や観光スポットの記事内で使うなら投稿でも問題ありません。読者がどこで地図を見たくなるかを考えて決めると失敗しにくいです。

まとめ｜まずは1回貼ってみよう

今日の最初の一歩として、まずはGoogleマップで表示したい場所を開き、「地図を埋め込む」からコードをコピーして、CocoonのカスタムHTMLブロックに一度貼ってみてください。