Googleマップをウェブサイトに埋め込む最も簡単で一般的な方法は、iframe(インラインフレーム)というHTMLのタグを埋め込む方法です。
これによりウェブページの中に小さな「枠」を埋め込むように、その枠内でGoogleマップを表示させることができます。具体的には下記の方法でGoogle Mapの埋め込み表示が可能です。
1.Google Mapで検索
Google Mapへアクセスし、検索ボックスから住所や会社名を入力します。
外部のGoogle Mapのページへ遷移します
(例として、株式会社インフォネットを検索します。)
2.「共有」をクリック
住所情報が表示されますので、「共有」をクリックします。
3.地図の埋め込み
「地図を埋め込む」をクリックし、サイズ(小・中・大・カスタム)を選択後、「HTMLをコピー」をクリックします。
4.CMSへ移動、タグの埋め込み
CMSのサイトに移動し、エディタの編集ナビより「テキストの編集」をクリックします。
「<>HTML」をクリックしてコピーしたHTMLを貼り付けますと、以下のようにGoogle Map を埋め込むことができます。
ご留意点
- 住所情報のピンが正しく表示されない場合には、緯度・軽度などで検索して地図を埋め込んでください(正確な住所を確認する際は国土地理院の地理院地図などもご確認ください。)また既に埋め込みされた情報を修正するには下記外部リンクにもあるよりGoogle側へ申請を行って下さい。詳細は下部外部リンクに埋め込んだ「Google マップでビジネス情報を編集する」からご確認ください。
- GoogleMap上にピンを目立って表示させたいなどですと、別途GoogleMapAPIキーの取得やクレジットカード情報をGoogle側へ登録が必要になるケースがございます。詳細は下部外部リンクに埋め込んだ「料金プランと API の費用」からご確認ください。
- GoogleMap側の仕様変更に伴い、設定方法が変わることがございます。あらかじめご留意ください
外部リンク
他のユーザーとマップやルートを共有する(Google)
地図に載っていない住所またはピンの場所の間違いを修正する(Google)
Googleマップがエラーで表示されない背景と対処方法(atmarkit)
Maps Embed API の概要(Google)
国土地理院
Google マップでビジネス情報を編集する(Google)
料金プランと API の費用(Google)
---------
関連質問
一つ前に戻る