Google Mapの地図をWebサイトに埋め込む方法

Google マップの地図を、自身のブログやサイトに埋め込みしたい、と思ったことはありませんか。

ウェブサイトではよく見かけるGoogle マップの埋め込みですが、自分で埋め込みをするにはとても難しそうに感じます。

そこでこちらでは、初めて埋め込みをする方にもわかりやすく、簡単に行える埋め込み方法をご紹介いたします。

また埋め込みをする際によく耳にする、「APIキー」についても説明をいたしますので、ぜひ最後までお読みになってください。

Google Mapの埋め込みとは？

Google マップの埋め込みとは、HTMLというテキストデータを使って、ブログやサイトにGoogle マップを表示させる機能です。

画像との違いは、拡大や縮小などGoogle マップとして利用ができ、まさにブログやサイトにGoogle マップを埋め込んだように表示ができる点です。

Google Mapの地図をWebサイトに埋め込む方法

PCを使ってGoogle Mapの地図を、Webサイトに埋め込む方法を説明していきます。

Google Chromeの画面から①「Google アプリ」をクリックし、②「マップ」を選択します。

検索窓に①埋め込みしたい「名称または住所」を入力、②名称を入力した場合は「表示された候補」の中から選択をしてください。

検索した場所が表示されたら、「共有」を選択します。

共有のダイアログボックスが開かれたら、「地図を埋め込む」を選択します。

埋め込みしたい地図を確認し、「HTMLをコピー」をクリックします。

テキストの画面に、コピーしたHTMLのiframeタグを「Ctrl」＋「V」キーで貼り付けます。

プレビューで見ると、Google マップの地図が埋め込みされているのがわかります。

さまざまなGoogle Mapの埋め込み方法

サイズを変更して埋め込む

埋め込みのサイズは変更が可能です。

共有画面を表示するまでは、上記の「Google Mapの地図をWebサイトに埋め込む方法」を参照してください。

共有画面から「中▼」をクリックします。

ダイアログボックスが開かれたら、表示したい「サイズ」を選択してください。

サイズ選択後は、参照した「Google Mapの地図をWebサイトに埋め込む方法」にそって、HTMLをコピーし埋め込みを完了させて下さい。

リンクの埋め込み

こちらでは、リンクをコピーし埋め込みを行う方法を説明していきます。

共有画面を表示するまでは、上記の「Google Mapの地図をWebサイトに埋め込む方法」を参照してください。

共有画面が開かれたら、「リンクをコピー」をタップします。

コピーしたリンクをブログやウェブサイトに貼り付けをします。

リンクの設定の仕方は、ご利用になっているブログやウェブサイトのマニュアルを参考にしてください。

リンクの前に名称や住所を入力し、プレビューで表示をしました。

「Google Mapで開く」をタップすると、五稜郭タワーの地図が確認できます。

マイマップを埋め込む

マイマップの埋め込みは、ポイントとして紹介したい「マーカー」を付けた地図の表示が可能になります。

こちらでは、すでに作成したマイマップを使って埋め込みの説明をしていきます。

これからマイマップを作成する方は、下記の記事を参考になさってください。

Google マップのマイマップとは？作り方から使い方まで情報まとめ

Google マップを開き、左上の「メニュー」アイコンをタップします。

メニューのダイアログボックスが開かれたら、「マイプレイス」を選択します。

マイプレイスの画面から「マイマップ」を選択します。

埋め込みをしたい「マイマップ」（例：沖縄旅行）を選択します。

「マイマップを開く」をクリックします。

埋め込みをするためには共有が必要なため、「共有」を選択します。

クイック共有のダイアログボックスが開かれたら、「リンクの共有を有効にする」をクリックします。

沖縄旅行の①「その他の操作」ボタンをタップし、ダイアログボックスが開かれたら、②「自分のサイトに埋め込む」を選択します。

「この地図を埋め込む」のダイアログボックスが開かれたら、①HTMLを「Ctrl」＋「C」キーでコピーし、②「OK」ボタンをクリックします。

テキストの画面に、「コピーしたHTMLのiframeタグ」を「Ctrl」＋「V」キーで貼り付けます。

これでマイマップの埋め込みは完了しました。

プレビューで表示をするとこのように埋め込みの完了が確認できます。

マーカーをクリックすると、詳細の確認もできます。

ストリートビューを埋め込む

検索窓に埋め込みしたい①「場所」や「名称」を入力し、②「ストリートビューと360°ビュー」を選択します。

埋め込みしたいストリートビューを選択し、①「その他の操作」ボタンをクリック、②「画像を共有または埋め込む」を選択します。

共有画面が開かれたら、「地図を埋め込む」を選択します。

ここからは上記した、「Google Mapの地図をWebサイトに埋め込む方法」と同じ操作になります。参考にして埋め込みを行ってください。

拡大した地図を埋め込む

拡大した地図を埋め込むには、テキストに入力したHTMLタグの一部を変更しましょう。

こちらでは、「Google Mapの地図をWebサイトに埋め込む方法」のHTMLタグを使って説明をしていきます。

HTMLタグのこの部分を変更すると、縮尺の変更が可能です。

13.1より少ない数に変更すると、地図を拡大できます。

ここでは「3」に変更しました。

プレビューで表示すると、埋め込みした地図が拡大されたことが確認できます。

Google Mapを英語で埋め込む

Googleマップを開き、「メニュー」アイコンをタップします。

メニューのダイアログボックスが開かれたら、「言語」を選択します。

「言語を選択」のダイアログボックスが開かれたら、表示したい「言語」（例：English）を選択します。

言語が英語に変更されました。

言語が英語に変更されても、埋め込みの方法は変わりません。ここからの操作は上記の「Google Mapの地図をWebサイトに埋め込む方法」を参照してください。

パラメーターで埋め込む

iframeのソースコードにパラメーター指定で地図を埋め込む方法もあります。

「https://maps.google.co.jp/maps?&output=embed」を指定します。

埋め込みしたい「場所」を入力します。

これで、パラメーターを使った埋め込みの完了です。

プレビューで表示すると、パラメーターを使った埋め込みが確認できます。

埋め込み地図をカスタマイズする方法

レスポンシブ対応させる

サイトへの地図の埋め込み方法について説明をしてきましたが、そのまま埋め込みをすると、表示されたときに右側の空白が気になります。

表示した画面にピッタリな地図を埋め込むには、レスポンシブ対応が簡単でおすすめです。

レスポンシブ対応させるには、HTMLタグ内のwidthを100%にすれば横幅が可変します。

「width="600"」を「width="100%"」に書き換えます。

これでレスポンシブ対応が完了しました。

プレビューで表示すると、レスポンシブ対応されている画面が確認できます。

Google Mapの埋め込みで困った場合

埋め込みが表示されない

HTMLタグが間違って入力されると、埋め込みが表示されません。

特にパラメーターを使った埋め込みは、自分で入力する部分があるため、間違った入力や消去が考えられます。

一文字違っても、埋め込みをした地図は表示されないので、もう一度HTMLタグの確認を行ってください。

エラーが表示される

「エラーが発生しました。」と、Google マップが表示されない場合、APIキーの設定を確認しましょう。

Google マップを読み込むリファラー部分に、APIキーが設定されていないとエラーが表示されます。

以前はAPIキーなしで表示が可能でしたが、アップデートが行われ、現在はAPIキーが設定されていないとGoogle マップが表示されなくなりました。

APIキーなしで、埋め込みを行いたいという方は上記した「Google Mapの地図をWebサイトに埋め込む方法」をお試しになってください。

スマホで埋め込んだ地図が見切れる

スマホで埋め込んだ地図が見切れる場合は、上記した「レスポンシブ対応させる」を参照してください。

「width="100%"」に書き換えを行うと、埋め込みした地図が画面に収まります。

埋め込みに関するよくあるご質問

有料？埋め込みするには料金がかかる？

こちらで紹介した、共有の「iframeタグ」を使った埋め込み方法だと料金はかかりません。

ですが、APIキーを取得し設定を行った埋め込みなら、料金が発生する場合があります。

2018年6月にアップデートが行われ、Google MapsのAPIサービスがGoogle Maps Platformと統合し、それに伴い料金体制も変更されました。

現在は$200分までは無料、それ以降は料金が発生する従量制料金プランとなっています。

目安としては、動的な地図の表示で28,500回/月のアクセスが無料となり、それ以降は料金がかかります。

どのような地図を埋め込みするかによっても、目安となるアクセス回数が変わりますので、詳しくはGoogle Maps Platformをご確認ください。

Google Maps APIキーが必要なの？

上記の「有料？埋め込みするには料金がかかる？」で説明をしたAPIキーは、埋め込みに必要なのでしょうか？

Google マップの共有を使った埋め込みでは、不十分なのか？気になるところです。

Google Maps APIキーが必要かどうかは、サイトに埋め込みをした地図をどのように利用したいかがポイントになります。

ブログに自分の旅行した足取りを載せたいだけなら、APIキーを使わなくとも、マイマップを使った埋め込みで十分でしょう。

ですが、ショップのサイトに埋め込む場合など、より高いデザイン性やカスタマイズが必要ならば、APIキーが適しています。

埋め込みをどのように利用したいか、また料金などを考慮し、ご自身にあった埋め込み方法を選択してみてはいかがでしょうか。