Googleマップ埋め込みでピンを立てるには？手順とコツを紹介

※本記事にはアフィリエイト広告（PR）を含みます。

自分のホームページやブログにGoogleマップを載せたいけれど、目的の場所にきちんとピンが立つのか、複数の店舗を一つの地図にまとめられるのか、操作に迷ってしまうことはありませんか。

結論からいえば、Googleマップの「共有」から地図を埋め込むコードを取得することで、検索した地点にピンが表示された地図をサイトに設置できます。

ただし、この標準の埋め込み方法では表示されるピンは検索地点の1本のみで、後から手動で追加したり移動したりする機能はない点は確認しておきたいところです。

この記事では、単一地点にピンを立てて埋め込む基本の手順から、複数のピンをまとめて表示したいときに使うGoogle My Maps、さらにピン画像の変更などデザインをカスタマイズしたい場合に必要になるGoogle Maps APIの考え方までを、順を追って紹介します。

お店やホームページに地図を載せたいけれど専門知識に自信がない方にも、迷わず進められるように整理しました。

用途に合った方法を選ぶことで、無料の範囲でも見やすい地図をサイトに設置できます。

この記事でわかること

• Googleマップの「共有」からピン付き地図を埋め込む基本の手順
• 地図の初期表示（ズームや中心位置）を意図通りに整えるコツ
• 複数のピンを1つの地図に立てたいときのGoogle My Mapsの使い方
• ピン画像の変更や配色カスタマイズに必要なAPIと料金の考え方

Googleマップ埋め込みでピンを立てるには？地点を検索して「共有」から埋め込みコードを取得すればよい

Googleマップにピンを立てて自分のサイトに埋め込みたいときは、Googleマップで地点を検索し、「共有」メニューから埋め込みコードを取得します。
特別なツールや専門知識は不要で、パソコンのブラウザからGoogleマップにアクセスできれば操作できます。
ここでは検索からコード取得までの流れと、うまく検索に出てこない場合の対処法をあわせて紹介します。

住所・店舗名・施設名で検索するとその地点にピンが立った地図が作れる

Googleマップの検索窓に、埋め込みたい場所の住所や店舗名、施設名を入力して検索すると、該当する場所に自動でピンが立ちます。
このとき表示されるピンは検索結果として1本だけで、あとから手動で本数を増やしたり位置を動かしたりする機能は用意されていません。
まずはこの仕組みを理解しておくと、次の作業で迷いにくくなります。

検索キーワードは、正式名称に近い形で入力するほど狙った場所がヒットしやすくなります。
たとえば店舗名だけだと同名の別店舗が候補に出ることもあるため、住所や地域名を組み合わせて検索するのが安心です。

• 正式な店舗名・施設名で検索する
• 候補が複数出る場合は市区町村名や番地も加える
• 検索結果の地図上でピンが目的の場所に立っているか目視で確認する

埋め込みの対象は、自社店舗や自社が管理する施設、公共施設など公開が前提となっている場所に限定するのが望ましいところです。
個人宅など、公開の許諾がない場所にピンを立てて公開することは避けてください。

「共有」→「地図を埋め込む」タブでiframeコードをコピーする

ピンが目的の場所に立っていることを確認したら、地図上の場所名やピンをクリックして詳細パネルを開き、「共有」ボタンから「地図を埋め込む」タブを選ぶのが次のステップです。
このタブに切り替えると、HTMLに貼り付けるためのiframeコードが自動で生成されます。

表示されたコードは「HTMLをコピー」といったボタンをクリックするだけで、コード全体をまとめて取得できます。
手入力でコードを打ち直す必要はなく、コピーしたものをそのまま使うのが基本です。

このとき画面下部には地図サイズを選べるプルダウンが用意されていることが多く、小・中・大などから表示イメージに近いものを選んでからコピーすると、あとの調整がラクになります。
サイズはHTML側でも書き換えられますが、最初にある程度近いものを選んでおくと手間が減ります。

ピンを立てたい地点が検索で出ない場合は地図上を右クリックして指定する

新しくできた施設や、正式名称での登録がまだ済んでいない場所は、検索しても候補に出てこないことがあります。
そのようなときは、地図上で目的の場所だと思われる位置を探し、その地点を右クリックすると座標や「この場所について」といったメニューが表示されます。

表示されたメニューから場所を選択すると、その地点にピンが立った状態になり、そのまま「共有」メニューに進んで埋め込みコードを取得できます。
検索でヒットしない場合でも、この方法でおおよその位置にピンを立てることが可能です。

右クリックで指定した位置は目視での目安となるため、実際の建物の入口や境界と数メートルずれる可能性があります。
可能であれば地図を拡大表示にしてから位置を指定すると、ずれを小さく抑えやすくなります。

座標をより正確に扱いたい場合は、緯度・経度を調べて検索窓に貼り付ける方法もあります。
これについては別のセクションで詳しく取り上げます。

取得したiframeコードはHTML編集画面に貼るだけで地図が表示される

取得した埋め込みコードは、加工せずにそのまま貼り付けることで地図として表示されます。
コードの中身を書き換える必要はなく、コピーしたものを丸ごとHTML編集画面に入れるだけで完結します。
ただし、サイズ調整や表示位置の見た目を整えたい場合は、いくつか手を加える箇所があるので順番に見ていきます。

記事本文のHTMLブロックにコードをそのまま貼り付ける

Googleマップから取得したコードは、iframeタグと呼ばれる形式のHTMLです。
これは「この枠の中にGoogleマップの画面をそのまま表示してください」という指示が書かれたコードで、記事編集画面のHTML入力欄に貼り付けるだけで機能します。

ここで注意したいのは、コードの一部だけを削ったり、改行位置を変えたりしないことです。
コードの途中には見た目上は意味がなさそうな文字列が含まれていますが、これらも含めて一つのまとまりとして機能しているため、途中で切れると地図が表示されなくなることがあります。

貼り付ける場所については、記事本文用のブロックであればどこでも問題ありません。
文章の合間に挟んでも、記事の最後にまとめて置いても、表示のされ方に違いは出ません。

コピーの際は、取得画面に表示されているコード全体を選択し、余分な空白や改行を追加しないよう気をつけると安心です。

width・heightの数値を書き換えて表示サイズを調整する

iframeコードの中には、width（横幅）とheight（縦幅）という項目があり、それぞれ数値がピクセル単位で入っています。
この数値を書き換えると、地図の表示サイズを変更できます。

例えば、初期状態でwidthが600、heightが450となっている場合、これを800や500といった数値に置き換えれば、それに応じて地図の枠も大きくなります。
逆に小さくしたい場合は数値を小さくすれば構いません。

ただし、幅と高さの比率をあまり大きく崩すと、地図の縦横比が不自然になり見づらくなることがあります。
目安として、元のコードに入っている比率をおおよそ保ったまま拡大・縮小すると、バランスの取れた見え方になりやすいです。

次の表は、よく使われるサイズの目安をまとめたものです。
あくまで一例として参考にしてください。

用途の目安	width	height
本文中の小さめの地図	400程度	300程度
標準的なサイズ	600程度	450程度
大きく見せたい場合	800程度	600程度

スマホでの見切れはstyle指定でレスポンシブ対応させる

widthに固定の数値を入れたままだと、スマートフォンなど画面幅の狭い端末で地図が見切れてしまうことがあります。
これを防ぐには、width属性の数値だけに頼らずCSSで幅を100%に指定する方法が有効です。

具体的には、iframeタグにstyle属性を追加し、width:100%;のように指定します。
こうすることで、画面幅に合わせて地図の横幅が自動的に伸び縮みするようになります。

widthの数値指定とstyleでの100%指定が両方残っていると、表示が崩れる可能性がありますので、style指定のwidth:100%;に統一することが重要です。
width属性の固定値だけに頼らず、CSSで幅を100%に指定する方法を採用してください。

heightについては、100%指定にすると高さが極端に伸び縮みしてしまうことがあるため、300pxや250pxのように固定値で指定しておくほうが扱いやすい傾向があります。
横幅は画面に合わせて可変にし、縦幅はある程度固定するという組み合わせが、扱いやすい設定として広く採用されています。

地図の表示位置はdivやtext-alignで左右中央に寄せられる

iframeはそのまま貼り付けると、初期状態では左寄せで表示されることが多いです。
地図をページの中央に配置したい場合は、周囲を囲むdivタグにtext-align:center;を指定する方法が使いやすいです。

具体的には、iframeコードの前後をdivタグで囲み、そのdivにstyle=’text-align:center;’を加えます。
こうすることで、内側にあるiframe全体が中央に寄って表示されるようになります。

もう少し細かく余白を調整したい場合は、margin:0 auto;という指定を使う方法もあります。
これはiframe自体に幅の指定がある状態で使うと、左右の余白が均等になり、見た目のバランスが整いやすくなります。

表示位置を整えるだけでも記事全体の印象が変わるため、地図を目立たせたい場面では試してみる価値があります。
文章の幅いっぱいに広げるか、中央に小さくまとめるかは、記事のレイアウトに合わせて選ぶとよいでしょう。

地図の初期表示は埋め込み前のズームと中心位置で決まる

埋め込んだ地図がページに表示されたとき、どの範囲がどのくらいの拡大率で見えるかは、コードを取得する直前のGoogleマップの画面状態に基づいて決まります。
つまり、コードを取得する前の準備次第で、訪問者に見せたい見え方をコントロールできるということです。
ここでは、その準備の具体的なポイントを見ていきます。

埋め込みコードを取得する前に見せたい範囲までズームしておく

Googleマップは、住所や店舗名で検索した直後の縮尺のまま「共有」メニューを開いてしまうと、周辺の広い範囲まで表示された地図になりがちです。
見せたいのが建物単体なのか、最寄り駅からの道のりを含めた周辺エリアなのかによって、必要なズーム倍率は変わってきます。

そのため、コードを取得する前に、マウスホイールや画面上の＋・－ボタンを使って実際にページで見せたい範囲までズームを合わせておくことが大切です。
ズームを合わせた状態のまま「共有」→「地図を埋め込む」の順に進めば、その見え方がそのままiframeコードに反映されます。

なお、一度コードを取得したあとにズーム違いに気づいた場合は、iframeのURLパラメータを手打ちで書き換えるのではなく、Googleマップ側でもう一度ズームを調整し直してコードを取り直す方法が安全です。
パラメータの手動編集は思わぬ表示崩れの原因になりやすいため、避けたほうが無難です。

見せたい内容	ズームの目安
建物やお店の外観がわかる範囲	やや拡大した状態
最寄り駅からの道のりを含めた周辺	やや広めの範囲
大まかなエリア・地域の位置関係	広範囲の縮小表示

ピンを画面中央に置いてから共有すると意図した見え方になる

ズームと合わせて意識したいのが、ピンが表示画面のどの位置に来ているかという点です。
検索直後は地図の中心からピンが少しずれていることがあり、そのまま埋め込むと、記事に貼ったときにピンが端の方に寄って見えてしまう場合があります。

これを防ぐには、地図をドラッグしてピンを画面の中央付近に移動させてから、共有メニューを開くとよいでしょう。
中央に寄せておくことで、iframeの幅や高さを後から調整した場合でも、ピンが枠からはみ出しにくくなります。

ピンが画面の端に寄ったまま埋め込むと、表示サイズを変更したときにピンが見切れる可能性があります。
特にスマホでの表示幅を狭く設定する場合は、中央寄せをしていないと影響が出やすくなります。

手順としては、検索→ズーム調整→ドラッグでピンを中央に配置→共有、という順番を一つの流れとして覚えておくと、毎回同じ手順で安定した見た目の地図を用意しやすくなります。

地図・航空写真・ストリートビューの表示モードも引き継がれる

Googleマップの画面左下や設定メニューからは、通常の地図表示のほか、航空写真やストリートビューといった表示モードを選ぶことができます。
この表示モードも、コードを取得した瞬間の状態がそのまま埋め込み先に反映される仕組みです。

たとえば、建物の外観をより具体的に見せたい場合には航空写真モードを選んでからコードを取得する、周辺の街並みの雰囲気を伝えたい場合はストリートビューを表示させてから共有する、といった使い分けが可能です。
用途に応じてモードを選んでおくことで、訪問者にとって意図が伝わりやすい地図に仕上がります。

ただし、モードによっては表示される情報量が多くなり、ページの読み込みにやや時間がかかる場合もあります。
シンプルに場所を伝えたいだけであれば、通常の地図表示のままで十分なケースが多いでしょう。

いずれのモードを選んだ場合も、後から見え方を変えたくなったときは、Googleマップ側で表示を切り替えてからコードを取り直すのが基本の対処法です。
取得済みのコードをそのまま流用しつつ設定だけ変えるという方法は用意されていないため、修正のたびに手順を最初からやり直す点は覚えておくとよいでしょう。

1つの地図に複数のピンを立てるならGoogle My Mapsを使う

複数の店舗や施設をまとめて1枚の地図に表示したい場合は、Google My Maps（マイマップ）というツールの利用を検討できます。
通常のGoogleマップの埋め込みは検索した地点に1本だけピンが立つ仕様のため、複数拠点を紹介したいときには向きません。
My Mapsであれば、必要な地点を好きなだけ登録して、まとめて1つの地図として管理できます。

Google My Mapsで新しい地図を作りマーカーを順番に追加する

My Mapsはブラウザ上で動作する地図作成ツールで、Googleアカウントがあれば手軽に始められます。
新しい地図を作成したら、住所や施設名で検索してマーカーを1つずつ追加していく流れになります。

マーカーの追加は検索窓から地点を探して「地図に追加」を選ぶだけなので、パソコン操作に慣れていない人でも進めやすい作業です。
店舗が10件程度であれば、順番に登録していっても数十分ほどで一通り完了することが多いでしょう。

ここで登録するのは公開が前提の店舗や施設に限定することが大切です。
個人宅など公開の許諾がない場所を勝手にピン留めして公開すると、トラブルの原因になりかねません。

登録し終えたマーカーは後から位置を微調整したり削除したりできるため、まずは候補地点をひととおり登録してから細かい調整をするという進め方がやりやすいです。

楽天市場で「Google My Maps」を見る

レイヤ分けと色分けでピンの種類を見分けやすくする

My Mapsにはレイヤという機能があり、ピンをグループごとに分けて管理できます。
たとえば「本店」「支店」「取扱店」のようにレイヤを分けておくと、地図を見る側にとっても情報が整理されて分かりやすくなります。

さらにピンのアイコンや色を変更できる機能も用意されているため、レイヤごとに色を変えておくと視覚的にひと目で種類を判別できます。
飲食店と物販店を同じ地図に載せるようなケースでも、色分けをしておけば見分けがつきやすいです。

ただし、レイヤや色の種類を増やしすぎると、かえって地図が見づらくなってしまう場合があります。
用途に応じて3〜4種類程度に絞っておくと、訪問者にとって扱いやすい地図になりやすいでしょう。

各ピンに店名・営業時間・写真などの説明を登録できる

My Mapsでは各ピンをクリックした際に表示される説明欄に、店名や営業時間、案内文などの情報を自由に入力できます。
テキストだけでなく写真を添付することもできるため、地図上で店舗の雰囲気まで伝えられる点が魅力です。

この説明欄の情報を充実させておくと、訪問者は地図を見ただけである程度の判断材料を得られます。
例えば以下のような項目をまとめておくと使いやすい地図になります。

• 店舗名・施設名
• 営業時間や定休日の目安
• 簡単な案内文やおすすめポイント
• 外観や内観の写真

営業時間などの情報は変動する場合があるため、掲載する際は「最新の情報は公式サイトや店頭でご確認ください」といった一文を添えておくと親切です。
情報が古いまま放置されていると、訪問者に誤解を与えてしまう恐れがあります。

作成した地図は「公開」設定にしないと訪問者に表示されない

My Mapsで地図を作り込んでも、共有設定を変更しないままではサイトの訪問者には地図が表示されません。
初期状態では非公開になっているため、公開設定への変更を忘れると地図が空白のまま表示される可能性があります。

設定を変更する際は、共有メニューから「リンクを知っている全員が閲覧できる」といった状態に切り替える必要があります。
この設定を済ませておかないと、せっかく作った地図もサイト上では意味を持たなくなってしまいます。

公開範囲の設定は地図を埋め込む前の段階で必ず確認しておきたいポイントです。
次のセクションでは、この公開設定を済ませたMy Mapsをサイトに埋め込む具体的な手順について取り上げます。

My Mapsのオリジナル地図も共有メニューからサイトに埋め込める

公開設定を済ませたMy Mapsは、通常のGoogleマップと同様にiframeコードを取得してサイトに貼り付けることができます。
作成した複数ピンの地図をそのまま記事内で表示できるので、通常のマップ埋め込みと同じ感覚で扱える点は覚えておきたいポイントです。
ここでは取得の手順と、あわせて確認しておきたい設定を見ていきます。

地図メニューの「自分のサイトに埋め込む」でiframeコードを取得する

My Mapsの編集画面を開いたら、地図タイトルの横にあるメニューアイコンをクリックします。
表示される項目の中から「自分のサイトに埋め込む」という選択肢を選ぶと、iframeコードが記載されたウィンドウが立ち上がります。

この画面に表示されるコードをコピーして、HTML編集画面に貼り付ければ地図が表示される仕組みです。
取得の流れ自体は通常のGoogleマップの共有機能と近く、迷うことは少ないはずです。

ただし、My Mapsの場合はコード取得の前に地図が完成しているか、必要なピンがすべて登録済みかを見直しておくと二度手間になりません。
埋め込み前に地図の中身を最終確認しておくことが、後のトラブルを避けるコツです。

共有リンクを「リンクを知っている全員」に変更しておく

iframeコードを取得できても、共有設定が整っていなければ意味を持ちません。
My Mapsの共有メニューを開き、リンクの共有範囲が「リンクを知っている全員が閲覧できる」になっているかをあらためて確認しましょう。

この設定は前のセクションでも触れた内容ですが、コード取得の直前にもう一度チェックしておくと安心です。
編集中に設定が初期状態へ戻ってしまうケースもゼロではないため、二重の確認が無駄になることはありません。

設定を変更したつもりでも実は反映されていないまま埋め込むと、サイト側では地図が空白のまま表示される可能性があります。
取得したコードを貼り付けた後、実際にページを表示して地図が見えるかどうかまで確認する流れを習慣にしておくと安全です。

埋め込み後にピンを追加・修正しても再貼り付けは不要

My Mapsを埋め込んだ後で店舗情報を追加したり、営業時間の記載を直したりすることはよくあります。
こうした修正を加えても、サイト側のコードを取り直す必要はありません。
My Mapsの地図データはGoogle側に保存されているため、編集内容は自動的にサイト上の表示にも反映されます。

これは、地図画像を作って貼り付けるような方法とは大きく異なる利点です。
以下に、My Mapsを編集した際の反映の目安をまとめました。

• ピンの追加・削除：編集後、サイトを再読み込みすれば反映される
• 説明文や写真の変更：同様に再読み込みで反映される
• 地図タイトルの変更：埋め込み表示には影響しない場合がある
• 共有設定を非公開に戻した場合：地図が表示されなくなる

反映までに多少の時間差を感じることもありますが、基本的にはコードの再取得や再貼り付けは不要です。
運用を続ける中で店舗の営業時間や施設の情報が変わったときも、My Maps側を更新するだけで済むのは扱いやすい点だといえます。

WordPressでは投稿・固定ページ・ウィジェットのどこにでも地図を置ける

WordPressで作られたサイトなら、投稿・固定ページ・サイドバーやフッターなど、様々な場所に地図を配置できます。
使っているエディタの種類によって貼り付け方が少し異なるだけで、どの場所であっても基本の考え方は共通です。
ここでは代表的な4つの配置パターンについて、それぞれの手順と注意点を紹介します。

ブロックエディタでは「カスタムHTML」ブロックにコードを貼る

現在のWordPressで標準になっているブロックエディタでは、「カスタムHTML」ブロックを使うのが基本の手順です。
段落ブロックや画像ブロックと同じ感覚で、ブロック追加のメニューから「カスタムHTML」を選ぶだけで準備が整います。

ブロックを追加したら、表示された編集欄にGoogleマップから取得したiframeコードをそのまま貼り付けます。
この時点では地図らしい見た目にはならず、コードの文字列がそのまま表示されますが、それで問題ありません。

プレビュー画面に切り替えると地図が表示されるため、貼り付けた直後に一度確認しておくと安心です。
段落ブロックに直接コードを貼ると、タグが文字として扱われて地図が表示されない可能性があります。

クラシックエディタはテキスト（HTML）モードに切り替えて貼り付ける

プラグインなどでクラシックエディタを使っている場合は、編集画面上部にある「ビジュアル」と「テキスト」の切り替えタブを確認します。
地図のコードを貼るときは、必ず「テキスト」モードに切り替えてから貼り付けます。

ビジュアルモードのまま貼り付けると、リッチテキスト編集の仕組みによってiframeタグが除去されたり整形されたりして、地図が表示されない状態になりやすいためです。
これは投稿・固定ページのどちらでも共通する注意点です。

テキストモードに切り替えたら、地図を表示したい位置にカーソルを置いてコードを貼り付けます。
貼り付け後にビジュアルモードへ戻して見た目を確認する流れにすると、意図した位置に地図が入っているかを確認しやすくなります。

サイドバーやフッターはカスタムHTMLウィジェットで表示する

記事本文ではなく、サイト全体に共通するサイドバーやフッターに地図を置きたい場合は、「カスタムHTML」ウィジェットを利用します。
外観メニューのウィジェット設定から追加でき、投稿ページとは別の場所での作業になります。

ウィジェットの編集欄にもiframeコードをそのまま貼り付けるだけで、テーマが対応していればサイドバーやフッターの決まった位置に地図が表示されます。
一度設定すればサイト内の複数ページに共通して地図が表示される点が、本文への埋め込みとの違いです。

ウィジェットのエリア幅は本文よりも狭いテーマが多いため、地図がはみ出したり見切れたりしないよう、width・height周りの調整は本文への埋め込みよりも意識しておくとよさそうです。

同じ地図を何度も使うなら再利用ブロックに登録しておく

店舗の案内地図など、複数の記事で同じ地図を繰り返し使う場合は、カスタムHTMLブロックを再利用ブロックとして登録しておくと手間が省けます。
ブロックの設定メニューから登録すると、一覧からいつでも呼び出せる状態になります。

再利用ブロックの利点は、元のブロックを一箇所修正すれば、それを使っているすべての記事に変更が反映される点です。
地図のズームや中心位置を取り直した際も、記事ごとにコードを貼り直す作業が不要になります。

下記に、配置場所ごとの貼り付け方法の違いを簡単にまとめました。

配置場所	使う機能	ポイント
投稿・固定ページ（ブロックエディタ）	カスタムHTMLブロック	プレビューで表示確認する
投稿・固定ページ（クラシックエディタ）	テキストモード	ビジュアルモードでの貼り付けは避ける
サイドバー・フッター	カスタムHTMLウィジェット	幅が狭いテーマは表示崩れに注意する
複数記事での使い回し	再利用ブロック	一括修正できて管理がラクになる

ピンの位置を数値で指定したいときは緯度・経度を調べて使う

住所や施設名で検索してもうまくヒットしない地点は、緯度・経度の数値を使用することでピンを立てる場所を指定できます。
地番だけの土地や、まだ登録名が浸透していない新しい施設などは、名称検索よりも座標指定のほうが確実な場合があります。
ここでは座標を調べる方法から、実際にピンを立てるまでの流れを紹介します。

Googleマップ上で地点を右クリックすると緯度・経度が表示される

Googleマップをパソコンのブラウザで開き、ピンを立てたい地点の上で右クリックすると、メニューの一番上あたりに数字の並びが表示されます。
これが緯度・経度の座標で、クリックするとそのままコピーできる仕組みになっています。

表示される数字は「35.681236, 139.767125」のように、緯度と経度がカンマ区切りで並んだ形式です。
前半が緯度、後半が経度を表しており、この順番を入れ替えてしまうと全く違う場所を指してしまうため注意が必要です。

スマホアプリ版のGoogleマップでも、地図を長押しすると同じように座標が表示される仕組みになっています。
画面下部に出てくる情報カードをタップすると座標をコピーできる場合が多いので、外出先で場所を確認したいときにも役立ちます。

この方法は、対象の場所が地図上に建物や道として表示されてさえいれば、名称が登録されていなくても座標を取得できる点が便利です。
新設の駐車場や公園の一角など、まだGoogleマップに正式な名前が載っていない場所でも使えます。

コピーした座標を検索窓に貼るとその地点にピンが立つ

取得した緯度・経度をGoogleマップの検索窓にそのまま貼り付けて検索すると、その座標の地点にピンが1本立った状態になります。
あとは通常の埋め込み手順と同じく、「共有」メニューから「地図を埋め込む」タブに進んでiframeコードを取得すれば完了です。

この方法の良いところは、店舗名や住所の表記ゆれによって違う場所がヒットしてしまう心配がない点です。
似た名前の施設が近くに複数ある場合や、住所だけでは特定しにくい広い敷地内の一角を指したい場合に向いています。

座標を検索窓に貼るときは、数字とカンマ、小数点の間に余計な空白や改行が入っていないか一度見直しておくと安心です。
コピー元によっては全角のカンマや空白が紛れ込むことがあり、そのままでは検索がうまく通らない場合があります。

なお、この記事の前提としてお伝えしている通り、標準の埋め込みコードで表示できるピンは1本のみです。
座標指定を使っても複数地点を同時に表示することはできないため、複数のピンをまとめたい場合はGoogle My Mapsの利用が向いています。

Maps Embed APIでは座標をパラメータとして直接指定できる

共有メニューから取得するiframeコードは、実はMaps Embed APIと呼ばれる仕組みの上に成り立っています。
このAPIでは、URLの中に緯度・経度をパラメータとして直接書き込む形式も用意されており、コードの中身を見比べると座標がどこに埋め込まれているかが分かるようになっています。

とはいえ、この記事で紹介している範囲では、Googleマップ上の操作だけで座標指定からコード取得まで完結させる方法をおすすめしています。
URLパラメータを手作業で書き換える方法は、記述を一文字間違えるだけで地図が正しく表示されなくなることがあるためです。

下記に、座標を扱う際の主な方法とその特徴を簡単にまとめました。

方法	特徴	向いているケース
座標を検索窓に貼る	操作がシンプルで失敗が少ない	住所や名称で検索しにくい単一地点
URLパラメータを手打ち編集	自由度は高いが記述ミスが起きやすい	APIの仕組みを理解した上での調整

数値を手入力で書き換える方法は、桁の打ち間違いや順序の入れ替えが生じやすく、地図がずれる可能性があります。
座標を使う場合も、まずはGoogleマップ上で検索して表示を確認し、問題なければ共有メニューからコードを取得する流れが安心です。
座標指定はあくまで名称検索で見つからないときの補助的な手段として使うと、トラブルを避けやすくなります。

「Maps Embed API」を検索して探す

ピン画像の差し替えや地図デザインの変更にはGoogle Maps APIが必要になる

ピンの見た目を変えたり地図全体の配色を変更したりするには、Google Maps Platformが提供するAPIの利用を検討する必要があります。
共有メニューから取得できる標準の埋め込みコードは手軽ですが、デザイン面のカスタマイズはできない仕組みになっています。
ここでは、どのような準備が必要になるのかを順番に見ていきましょう。

JavaScriptで地図を読み込みカスタムマーカーに独自画像を設定する

地図上のピンを店舗ロゴやオリジナルアイコンに差し替えたい場合は、Maps JavaScript APIというツールを使って地図をプログラムで読み込む方法があります。
標準のiframe埋め込みでは自動的に決まった形のピンが1本表示されるだけですが、JavaScript APIを使うとマーカーの画像ファイルを自分で指定できるようになります。

ただし、この方法はHTMLだけでなくJavaScriptの記述が必要になるため、コーディングの知識がある程度求められます。
単純に店舗の場所を案内したいだけなら、ここまでの対応は不要な場合がほとんどです。
デザイン性を高めたい特別な事情がある場合に検討する選択肢として捉えておくとよさそうです。

また、マーカー画像を設定する際は、画像サイズやファイル形式によって表示が崩れることもあるため、事前にテスト表示で確認する作業も欠かせません。
思い通りの見た目にならないときは、画像のピクセルサイズを見直すと解決することがあります。

スタイル設定で配色を変えおしゃれな地図に仕上げる

地図そのものの色合いや道路・建物の表示スタイルを変更したい場合も、Maps JavaScript APIのスタイル機能を利用します。
標準の埋め込み地図はGoogleが用意した配色のまま表示される仕様のため、サイトの雰囲気に合わせて地図の色味を統一したいときにこの機能が役立ちます。

スタイル設定では、道路の色・水域の色・文字の表示有無などを細かく指定できます。
落ち着いたトーンにまとめたり、ブランドカラーに近づけたりといった調整がしやすくなる一方で、設定項目が多いため慣れるまでは試行錯誤が必要になることもあります。

デザインにこだわりたい場合は無理に自分で組まず、こうした調整作業に対応できる制作者へ相談する方法もあります。
この点については、後ほど別の見出しで改めて触れます。

APIキーはGoogle Cloudでプロジェクトを作成して発行する

Maps JavaScript APIを使うためには、Google CloudでAPIキーを発行する手続きが必要です。
Google Cloudの管理画面でプロジェクトを新規作成し、Maps JavaScript APIを有効化したうえでキーを発行する、という流れが一般的な手順として案内されています。

発行したAPIキーはHTMLのソースコード上に記述するため、そのままでは誰でも閲覧・コピーできる状態になってしまいます。
APIキーにHTTPリファラー制限とAPI種別の制限をかけずに公開すると、第三者に不正利用され、自分の請求先アカウントに想定外の料金が発生する可能性があります。

制限をかける際は「利用を許可するウェブサイトのドメイン」と「使用できるAPIの種類」を指定できます。
この設定を済ませておくことで、キーが漏れた場合でも他サイトからの利用を防ぎやすくなります。

キー発行にはクレジットカード登録が求められる点を理解しておく

Google Maps PlatformのAPIキーを発行するには、Google Cloudの請求先アカウントにクレジットカードなどの支払い情報を登録する必要があります。
これは無料枠を利用する場合でも共通の手続きで、登録なしにはAPIキーそのものを発行できない仕組みになっています。

無料枠を超えた利用分は従量課金となるため、「登録さえすれば料金が発生しない」という理解ではなく、利用量に応じて費用がかかる場合があると考えておくのが安心です。
料金体系や無料枠の条件は変更されることがあるため、最新の情報は公式サイトでご確認ください。

ここまでの内容を簡単な比較で整理すると、次のようになります。

項目	標準の埋め込み（iframe）	Maps JavaScript API
APIキー	不要	必要
ピン画像の変更	不可	可能
地図の配色変更	不可	可能
クレジットカード登録	不要	必要

• デザイン変更が不要なら標準の埋め込みで十分
• カスタムマーカーや配色変更を希望するならJavaScript APIを検討
• APIキー発行時は制限設定と予算管理を忘れずに行う

標準の埋め込み地図は無料で使え、課金対象はAPI利用分に限られる

ここまで紹介してきた埋め込み方法のうち、費用が発生する可能性があるのはGoogle Maps APIを使う場合に限られます。
共有メニューから取得したiframeコードによる地図表示は、店舗案内やMy Mapsの複数ピン地図も含めて料金がかかりません。
「地図を埋め込む＝課金される」というイメージを持つ方もいますが、その理解は正確ではないので整理しておきます。

共有メニューから取得したiframeの表示には料金が発生しない

Googleマップの「共有」→「地図を埋め込む」で取得するiframeコードは、APIキーなしでそのまま貼るだけで使える仕組みです。
表示回数がどれだけ増えても、これが原因で費用を請求される心配はありません。
個人のブログから店舗サイトまで、幅広い場面でこの方法が使われているのはこのためです。

費用が発生しない理由は、この埋め込み方式がGoogleの請求先アカウントと結びついていない点にあります。
APIキーを発行していない状態なので、そもそも課金対象になる仕組みに乗っていません。
単純に地図を1つ表示したいだけの場合は、まずこの方法で十分足りることが多いです。

My Mapsで作った複数ピンの地図を埋め込む場合も同様で、共有設定から取得したコードであれば料金はかかりません。
ピンの数が増えても表示の仕組みは変わらないため、店舗が複数あるケースでも安心して使えます。

Maps Embed APIの基本モードも無料枠で運用できる

先ほどのiframeは正式には「Maps Embed API」と呼ばれる仕組みの一部で、これを緯度・経度などのパラメータで直接指定する使い方も可能です。
この基本的な使い方についても、無料枠の範囲で運用できる設計になっています。
座標指定で地図を表示したい場合でも、慌ててAPIキーを取得する必要はありません。

ただし「無料枠」という言葉には条件が伴います。
利用条件や上限は変更されることがあるため、実際の数値や範囲については公式サイトで確認しておくと安心です。
ここで大切なのは、Embed APIの基本モードとJavaScript APIでは課金の性質がまったく違うという点を理解しておくことです。

JavaScript APIは読み込み回数に応じて従量課金される

一方、カスタムマーカーや配色変更のために使うMaps JavaScript APIは、ページの読み込み回数に応じて費用がかかる可能性のある従量課金の仕組みです。
アクセス数が多いサイトほど読み込み回数も増えるため、想定より費用がかさむケースが出てきます。
デザイン性を高めたい気持ちだけでこの方式を選ぶと、後から負担に感じることもあるので注意が必要です。

下の表に、これまでの内容も踏まえた課金面の違いをまとめます。

方式	APIキー	料金の考え方
共有メニューのiframe	不要	課金なし
Maps Embed API（座標指定など）	不要	無料枠内で運用可能
Maps JavaScript API	必要	読み込み回数に応じた従量課金

単純な店舗案内であれば、無理にJavaScript APIへ進む必要はありません。
デザイン変更が本当に必要な場面に限って検討する、という順番で考えるのが無難です。

予算アラートとAPIキー制限で想定外の請求を防ぐ

JavaScript APIを利用する場合は、予算アラートの設定とAPIキーの制限を組み合わせておくことが欠かせません。
Google Cloud Consoleでは、一定の利用額に達した際に通知が届くよう予算アラートを設定できます。
想定外の請求に早く気づくための備えとして、発行の段階で必ず設定しておきたい項目です。

• 予算アラートを設定し、利用額の目安に達したら通知を受け取れるようにする
• APIキーにHTTPリファラー制限をかけ、自分のサイト以外からの利用を防ぐ
• 利用するAPIの種類を必要なものだけに絞って制限する
• 1日あたりの割り当て上限（クォータ）を設定し、極端な増加を抑える

これらの設定をしないままAPIキーを公開すると、第三者に利用されて自分の請求先アカウントに費用が発生する事態にもつながりかねません。
手間はかかりますが、発行時にまとめて設定しておけば運用中に慌てることは少なくなります。
料金や無料枠の条件は変更される場合があるため、実際の数値は公式サイトで最新の内容を確認しておきましょう。

地図がずれる・ピンが出ないトラブルは設定と貼り付け方を見直せば直る

埋め込んだ地図が真っ白になったり、ピンの場所がおかしいと感じたりしたときは、コードの貼り方や公開設定を順番に見直せば、たいていの原因は特定できます。
特別な知識がなくても、チェックポイントを一つずつ確認すれば対処できる範囲のトラブルがほとんどです。
ここでは代表的な4つの原因と、その直し方をまとめます。

コードが途中で切れていないか全文を貼り直して確認する

地図がまったく表示されない場合、まず疑いたいのがiframeコードの一部が欠けているケースです。
コピー時に選択範囲がずれていたり、貼り付け先のエディタで改行やスペースが余計に入ったりすると、コードとして正しく認識されなくなります。

特に長いURLパラメータを含む場合は、末尾の引用符（”）が抜け落ちるだけでも地図が真っ白になってしまいます。
一度貼り付けたコードを全部消して、Googleマップの共有画面からもう一度コピーし直すと解決することが多いです。

手打ちで文字を修正した経験がある場合も要注意です。
iframeコードは自分で書き換えず、取得したものをそのまま使うのが安全で、パラメータの一部だけを手動で編集すると表示が崩れる原因になります。

貼り付け後にプレビュー画面で必ず表示を確認する習慣をつけておくと、公開後に読者から指摘を受ける前に気づけます。

My Mapsの公開設定が非公開のままだと地図が空白になる

複数のピンを立てたMy Mapsの地図がサイト上で表示されない場合、原因の多くは共有設定にあります。
地図の共有範囲が「自分のみ」や「限定公開」のままだと、埋め込みコードだけ正しく貼っても訪問者には何も表示されません。

対処法としては、My Mapsの共有メニューを開き、リンクの設定を「リンクを知っている全員が閲覧できる」に変更する必要があります。
この設定を忘れると、作成者本人のパソコンでは見えても、別の端末やブラウザで開くと空白になってしまいます。

公開範囲の変更は地図の編集画面からいつでも行えるため、一度設定した後も、地図を更新するたびに範囲が変わっていないか軽く確認しておくと安心です。

テーマやプラグインのHTML除去機能を疑いブロックを変える

コードも公開設定も問題ないのに地図が出ない場合は、WordPressのテーマやセキュリティ系プラグインがiframeタグを自動で除去している可能性があります。
特にビジュアルエディタや一部の入力欄では、安全対策としてスクリプトタグやiframeタグを自動的に取り除く仕組みが備わっていることがあります。

この場合は、コードを貼る場所を「カスタムHTML」ブロックやテキストモードに変更すると改善するケースが目立ちます。
ビジュアル編集画面に直接貼り付けると、保存時にタグが整形されて消えてしまうことがあるため、貼り付け先の選び方自体を見直すのが近道です。

プラグインの設定画面で「HTMLタグの制限」や「セキュリティ強化」といった項目がないか確認し、必要に応じて対象ページだけ除外設定にする方法もあります。
管理画面の項目名はプラグインによって異なるため、名称が分からないときはプラグイン名で検索してみるとよいでしょう。

ピンの位置が実際とずれる場合はマーカーを手動で微調整する

標準の埋め込み地図では検索した地点に自動でピンが一本立つだけで、位置を手動で動かす機能はありません。
そのため住所の表記ゆれや似た名称の別施設と混同されると、意図した場所と少しずれた地点にピンが立ってしまうことがあります。

この場合は、Googleマップの検索窓に施設名だけでなく住所や郵便番号も加えて検索し直し、正しい地点で改めて共有コードを取得するのが基本の対処法です。

複数ピンを扱うMy Mapsであれば、地図の編集画面でマーカーをドラッグして位置を細かく調整できます。
ずれを直したいときは、下の表を参考に該当する方法を選んでみてください。

症状	考えられる原因	対処の方向性
地図が真っ白	コードの欠け・非公開設定	コード再取得・共有範囲の変更
ピンだけ出ない	検索地点の取り違え	住所を加えて検索し直す
スマホで崩れる	幅指定が固定値のまま	CSSで幅を100%に調整
ピンの位置が微妙にずれる	類似施設との混同	My Mapsでマーカーを手動調整

My Mapsでマーカーの位置を直した後は、埋め込み済みのページ側で再貼り付けをしなくても更新内容が反映されます。
地図データを直すだけで表示側も自動的に最新の状態になるため、こまめな修正がしやすい点も覚えておくと役立ちます。

店舗の集客が目的ならGoogleビジネスプロフィールの整備も合わせて行う

サイトへの地図埋め込みだけでなく、Googleビジネスプロフィールの登録・整備もあわせて行うと、店舗情報がより多くの場面で見つけてもらいやすくなります。
埋め込み地図は自社サイトを訪れた人に向けた案内ですが、ビジネスプロフィールはGoogle検索やGoogleマップ自体で店舗を探している人に向けた入口になります。
どちらか一方ではなく、両方を整えることでピンにたどり着くまでの経路が増えるイメージです。

ビジネスプロフィール登録で検索結果の地図枠に表示されやすくなる

店舗名やサービス名で検索したときに、検索結果の上部や右側に地図付きの枠が表示されることがあります。
これはGoogleビジネスプロフィールに登録された情報がもとになっており、埋め込み地図とは別の仕組みで動いています。

この枠に店舗が表示されるかどうかは、登録内容の充実度や検索する人との位置関係など複数の要素が関わっているとされています。
登録さえすれば必ず上位に表示されるというものではありませんが、登録していないと検索結果の地図枠にそもそも載る機会自体が少なくなる点は理解しておきたいところです。

自社サイトへの埋め込み地図はあくまで「サイトに来てくれた人」向けの補助的な案内です。
一方でビジネスプロフィールは「まだサイトを知らない人」に見つけてもらうための入口にもなるため、両方を組み合わせておくと取りこぼしが減ります。

登録自体は店舗のオーナーや管理者であれば手続きを進められる仕組みになっているため、まだの場合は検討してみる価値があります。
手続きの詳細や最新の仕様は変更されることがあるので、公式サイトの案内を確認しながら進めるのが安心です。

登録情報が正確だと埋め込み地図のピン情報も充実する

Googleビジネスプロフィールに登録した店舗名・住所・営業時間・写真などの情報は、Googleマップ側のデータとも連動しているとされています。
そのため情報を整えておくと、埋め込み地図のピンをクリックした際に表示される情報も充実しやすくなります。

例えば営業時間や電話番号が古いまま放置されていると、訪問者が実際に来店したときに「営業していなかった」といったすれ違いが起こりやすくなります。
登録情報の更新を後回しにすると、埋め込んだ地図の信頼性が低下する可能性があります。

下の表に、確認しておきたい登録項目の例をまとめました。

登録項目	確認しておきたいポイント
店舗名	表記ゆれがないか（略称と正式名称の混在など）
住所	移転や区画変更がないか最新の状態か
営業時間	季節や曜日による変動が反映されているか
写真	外観・内観がわかる画像が登録されているか

こうした基本情報を整えておくことは、埋め込み地図単体をきれいに見せる工夫よりも、来店につながる情報としての実用性を底上げする作業といえます。

自作が難しいカスタマイズはFiverrなどで外注する選択肢もある

ピン画像の差し替えや地図全体の配色変更など、Maps JavaScript APIを使った込み入ったカスタマイズは、コードの知識がないと自力での対応が難しい場面もあります。
そうした場合は、外部のスキルマーケットに作業を依頼する方法も選択肢のひとつです。

例えばFiverrのようなサービスでは、地図のカスタマイズやウェブサイトの細かな調整を請け負う個人や事業者を探せる場合があります。
依頼する際は、APIキーの制限設定まで含めて対応してもらえるか事前に確認しておくと、公開後のトラブルを避けやすくなります。

外注を検討する際は、依頼内容と成果物の範囲をできるだけ具体的にすり合わせておくことが大切です。
「ピンのデザインだけ変えたいのか」「地図全体の配色まで変えたいのか」を明確にしておくと、やり取りの手間が減ります。

費用や納期はサービスや依頼先によって幅があるため、複数の候補を比較しながら検討するのがおすすめです。
最新の料金体系や利用条件は、各サービスの公式サイトで確認しておくと安心です。

まずは無料で使える標準の埋め込み地図やMy Mapsで十分に対応できないかを見極め、それでも足りない部分だけを外注や自作のAPI活用で補っていく進め方が、無理のない選び方といえるでしょう。

楽天市場で「Fiverr」を見る

まとめ

この記事のポイントをまとめます。

• 単一地点にピンを立てるなら、Googleマップで検索して「共有」から地図の埋め込みコードを取得すればよい
• 取得したiframeコードは、HTML編集画面にそのまま貼り付けるだけで地図が表示される
• 地図の初期表示（中心位置・ズーム倍率）は、コードを取得した時点の画面状態がそのまま固定される
• 1つの地図に複数のピンを立てたい場合は、Google My Mapsで地図を作成し公開設定にしてから埋め込む
• WordPressでは、カスタムHTMLブロックやテキストモードにコードを貼ることでトラブルを避けられる
• ピンの位置を数値で指定したい場合は、緯度・経度を調べて検索窓に貼り付けて使う
• ピン画像の差し替えや地図デザインの変更をしたい場合は、Maps JavaScript APIとAPIキーが必要になる
• 標準の埋め込み地図は料金が発生せず、課金の対象はAPIを使ったカスタマイズ部分に限られる
• 地図が表示されない・ずれるといったトラブルは、公開設定やコードの貼り付け方を見直すことでたいてい解決する

Googleマップの埋め込みは、住所や店舗名を検索して共有ボタンを押すだけで手軽に始められる機能です。
まずは自社の店舗や施設など、公開しても問題のない地点で試してみると、仕組みがつかみやすくなります。

複数のピンをまとめて紹介したい場合は、無理にAPIを使う必要はなく、Google My Mapsを活用すれば手間をかけずに見やすい地図を作成できます。
デザインやマーカー画像にこだわりたくなったときに、初めてMaps JavaScript APIの利用を検討すれば十分です。

地図が表示されない、ズレて見えるといったトラブルも、コードの貼り付け場所や公開設定を確認するだけで解決できることがほとんどです。
慌てずに一つずつ設定を見直してみてください。

サイトに動く地図を置くことで、訪れた人は道順や周辺の様子をその場で確認することができます。
この記事を参考に、無理のない範囲で埋め込み地図の導入を検討してみてください。