実践的なデジタルの知識を体系的に学ぶ

本サイトについて掲載・取材等のお問い合わせ

解析ツール

ミンウェブ

オウンドメディアライブラリ

ミンウェブニュース

ミンウェブ辞書

運営：株式会社セルリア

ビジネスを成功へと導くWebコンサルティング・インターネット広告・Web制作を提供する会社です。

企業情報

サービス一覧

オウンドメディア制作

Webサイト制作・リニューアル

SEOコンサルティング

Webサイト課題診断

【画像で解説】Googleマップをコピペだけで簡単にサイトに埋め込む方法

Googleマップがサイトに埋め込んであると、わかりやすくていいですよね。埋め込んであるとサイト内でマップを操作することができるので、画像を貼り付けるのと比べ使い勝手がいいです。今回はそんな便利なGoogleマップの埋め込みの方法について解説していきます。

更新： 2022/10/21

カテゴリ：

Googleマップがホームページやブログに埋め込まれているのを見たことはありますでしょうか？一見難しそうに見えますが、実はコピペだけで簡単に、埋め込むことができます。

今回はGoogleマップをサイトに埋め込む方法について解説していきます。

Googleマップをサイトに埋め込む方法

ここでは「東京都庁」を例としてこのページに埋め込んでいきます。

Googleマップで埋め込みたい箇所を検索して表示

Googleマップを開いて（https://www.google.com/maps/）左上の検索ボックスに埋め込みたい場所を入力し、虫眼鏡の検索マークをクリックします。

共有マークをクリックし「地図を埋め込む」をクリック

「共有マーク」をクリックすると下記の画面が表示されるので、「地図を埋め込む」をクリックします。

③地図のサイズを選択

サイトに埋め込むGoogleマップのサイズを「小・中・大・カスタムサイズ」から選択します。(カスタムサイズは縦横の幅を自由に調整することができます)

HTMLコードをコピー

HTMLコードを全て選択してコピー、もしくは「HTMLをコピー」をクリックします。

コピーしたコードを貼り付け

コピーしたコードをGoogleマップを埋め込みたいサイトに貼り付けます。以下のようになれば完了です。

駅から目的地などのルートを埋め込む方法

駅などからGooleマップで表示した場所までのルート等をサイトに埋め込む方法を紹介します。

Googleマップで埋め込むルートを表示する

サイトに埋め込みたいルートをGoogleマップで表示し、左上の「メニューマーク」をクリック

「地図を共有または埋め込む」をクリック

赤ワクで囲まれている「地図を共有または埋め込む」をクリックします。

コードをコピー

先ほどと同様にコードを全て選択してコピー、もしくは「HTMLをコピー」をクリックします。

コードを貼り付け

コピーしたコードをGoogleマップを埋め込みたいサイトに貼り付けます。以下のように表示されれば完了です。

Googleマップをカスタマイズしたい場合

埋め込むGoogleマップをカスタマイズしたい場合、APIキーを使用する必要があります。

また、2018年6月12日以前にJavaScriptなどを使用してGoogleマップをページに埋め込んでいた場合は「Google Maps Platform」への仕様変更によりGoogleマップが表示されなくなる場合があります。

以前こちらのサービスを使用していた方や新規APIキーを使用してページにGoogleマップを埋め込みたい方は(https://cloud.google.com/maps-platform?hl=ja)

こちらのページでクレジットカードを登録。新しいAPIキーを取得することでマップを埋め込んでカスタマイズをすることができるようになります。

Googleマップを埋め込んでサイトをわかりやすくしよう

今回はGoogleマップの埋め込み方法を紹介しました。Googleマップをページに埋め込むことで目的地を簡単に確認することができます。

また、地図の画像を貼り付けるのと違い、地図をサイト内で操作することができるので使い勝手が良いです。

必要に応じて、Googleマップを埋め込んでよりサイトをわかりやすくしていきましょう。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

記事に対するご意見・ご要望フォーム

minweb編集部（株）セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ！完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術 <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を１つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。

【全3種】他の資料もチェックする

無料で資料をダウンロードする

運営会社

セルリアのロゴ

Web制作・広告・コンサルティングのセルリア

集客力を強化するWeb制作

オウンドメディア制作・立ち上げ

SEOコンサルティング・内製化

無料Webサイト課題診断

コーポレートサイトへ

人気の記事TOP20

今週

今月

全て