3ステップでグーグルマップを埋め込むか、ここでコードを生成できます。遅延読み込みのレスポンシブなiframe、プライバシーに配慮したクリックで読み込む版（任意）、公式のMaps Embed APIの方法も紹介します。
グーグルマップを埋め込むには、Googleマップでその場所を開き、「共有」から「地図を埋め込む」を選んでHTMLをコピーします。地図を表示したい場所に貼り付けましょう。さらに良くするには、スマートフォンでサイズが変わるようiframeを囲み、loading="lazy"を追加し、訪問者が地図を求めたときだけGoogleに接続するクリックで読み込む版も検討してください。
埋め込みコードを取得する3つの方法
下のジェネレーターは、住所、自分のMaps Embed APIキー、またはGoogleから取得したコードをもとにコードを書き出します。レスポンシブなラッパーとタイトルを必ず追加し、地図をクリックで読み込むボタンで囲むこともできます。
「共有」から「地図を埋め込む」のコードなら無料です。キーが必要なMaps Embed APIも、Googleでは無料で利用できると記載されています。カスタムマーカー付きのJavaScript地図など、ほかのMaps製品は毎月の無料枠を超えると使用量に応じて課金されるので、使う前に最新の料金を確認してください。
コピーしたコードは、600×450ピクセルのように幅と高さを固定しています。それを削除し、ジェネレーターの出力のようにCSSのaspect-ratioを使うボックスでiframeを囲めば、画面に合わせて拡大縮小されます。
地図を読み込むと、訪問者のIPアドレスとブラウザー情報がGoogleに送られ、GoogleがCookieを設定することがあります。同意の規則が厳しい地域では、多くのサイトが「地図を表示」ボタン付きのプレースホルダーを表示し、クリック後にのみ地図を読み込んでいます。クリックで読み込むオプションはまさにこれを行います。いずれにしても、プライバシーポリシーで地図について触れておきましょう。
経路案内：「共有」を選ぶ前にGoogleマップの「経路」タブを使うか、Maps Embed APIのdirectionsモードを使います。複数のピン：Googleマイマップで地図を作成して公開に設定し、「自分のサイトに埋め込む」オプションを使います。
直接の効果はありません。ローカル検索に効くのは、充実したGoogleビジネスプロフィールと、Web全体で一貫した名前、住所、電話番号です。地図は訪問者があなたを見つける助けになり、それだけで置く理由は十分です。
すでにGoogleのiframeをコピーしているなら、このラッパーの中に貼り付け、width、height、style属性を削除してください。
ボックスはどの幅でも4対3の形を保ちます。srcは、コピーしたコードのものに置き換えてください。
取得元
住所から
Googleのコードを貼り付け
Maps Embed APIキー
「共有」の「地図を埋め込む」のコードまたはURL
住所または場所
ズーム：{n}
APIキー（自分のドメインに制限してください）
これはGoogleが文書化していないq=住所の形式を使います。公式の方法には、コピーしたコードかAPIキーを使ってください。
形
スクリーンリーダー用のタイトル
当店の所在地を示す地図
クリックで読み込む（プライバシー）
生成された地図コードのプレビュー
埋め込みコードをコピー
住所を入力するか、Googleマップからコピーしたコードを貼り付けてください。
無料で始める · クレジットカード不要