特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

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

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

カテゴリ: Googleマイビジネス

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の最新情報をお届けします

minweb編集部(株)セルリア

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

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

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

ダウンロード資料画像

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

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

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

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

サービス一覧
会社概要