GoogleMapの埋め込み方法をメリット・デメリットとあわせて紹介
執筆者
マーケティングサポート「バンソウ」のメディア管理人
株式会社クリエイティブバンクのマーケティングサポート「バンソウ」のメディア管理人。得意分野は、SEO全般・サイト分析・オウンドメディア・コンテンツマーケティング。バンソウはクライアント様のBtoBマーケティングをサポートするサービスです。詳しい内容はこちらをご覧ください。
GoogleMapの埋め込みとは
GoogleMapの埋め込みとは、GoogleMapで行える地図の拡大・縮小・移動・経路検索などの機能を維持しながら、自社サイトのページ上にGoogleMapを表示させることを指します。
例えば、東京ドームの地図を埋め込むと、以下のように表示できます。
GoogleMapをページに埋め込むことで、ユーザーが自由に地図を操作して周辺の駅や店舗を調べたり、航空写真や口コミを確認したりなど、情報収集が行えるようになります。
GoogleMapの埋め込みを行うメリット
GoogleMapでは、ユーザーがページ上で地図を操作できるといったユーザー側のメリット以外にも、地図の作成にかかる費用を削減できたり、地図の閲覧時にユーザーの離脱を防ぎやすかったりするなど、サイト運営者側にもメリットが多くあります。
GoogleMapの埋め込みを行うメリットは、次のとおりです。
地図の作成や更新にかかる費用を削減できる
GoogleMapの埋め込みは、無料で行えます。外部業者に地図の作成を依頼した場合は、地図の作成費や更新費がかかってしまうため、地図を掲載する際にGoogleMapを埋め込むことで、地図の作成・更新にかかる費用を削減できるでしょう。
また、Googleでは、以下のようにリアルタイムで地図の情報を更新しています。
自社で地図の内容を更新せずとも、常に最新の情報を表示できる点も、GoogleMapの強みといえます。
地図は、文字通り毎日毎秒更新しています。Google では、衛星画像やストリートビューカー、Google マップユーザー、地元の企業主などから世界中の最新情報を常に収集しており、その情報を使用して地図を更新しています。
引用：Google の地図データについて知っておくべき 9 つのこと｜Google Developers
GoogleMapの操作に慣れたユーザーが多い
出典：ICT基盤の高度化とデジタルデータ及び情報の流通に関する調査研究｜総務省
GoogleMapは国内外においても利用者数の多い地図サービスです。総務省の「情報通信白書令和5年版」では、日本やアメリカなどさまざまな地域で多くのユーザーがGoogleMapを利用していることがわかります。
このように、GoogleMapは利用しているユーザーが多いサービスのため、地図の拡大や移動といった操作に慣れているユーザーも多いでしょう。自社サイトのページ内にGoogleMapの埋め込みを行って地図を表示することで、普段からGoogleMapを利用しているユーザーは、地図サービスを利用するときと同じ操作感でページ上の地図も操作できます。
ページを遷移させることなく地図を見せられる
自社サイトのページ内に地図を埋め込むことで、別ページの地図へのリンクを張るときよりも、ユーザーのページからの離脱を防ぎやすくなります。
別ページの地図へのリンクを張った場合は、自社サイトのページから外部サイトに移動することになるため、ユーザーがそのまま離脱してしまう可能性が高まります。しかし、GoogleMapの地図を直接自社サイトのページ内に埋め込むことで、ユーザーは別ページに遷移せずとも地図を確認できるようになるため、離脱する確率を下げられます。
GoogleMapの埋め込みを行うデメリット
Webサイトによっては、GoogleMapをサイト内に埋め込むことで、ページの読み込み速度が遅くなる可能性があります。ページの読み込み速度はユーザーの利便性にも大きく関わるため、Googleでのランキング要素としても、デスクトップ・モバイルともに含まれています。
検索ユーザーはできるだけ早く質問に対する答えを見つけたいと考えています。研究によると、ユーザーはページの読み込み速度を非常に気にかけています。読み込み速度これまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
引用：ページの読み込み速度をモバイル検索のランキング要素に使用します｜Google 検索セントラル
そのため、自社サイトのフッターなど、サイト内のどのページを表示してもページ内に埋め込んだ地図が表示されるように設定している場合は、Webサイトに負荷がかかり、ページの読み込みに時間がかかってしまう可能性があるため、あらかじめ読み込み速度に問題がないか確認しておきましょう。
万が一ページの読み込みに時間がかかっている場合は、会社概要のページに地図を埋め込むなど、一部のページにだけ地図が表示されるように設定することで、読み込み速度を改善できます。
GoogleMapの埋め込み方法(HubSpot)
ここまで、GoogleMapをページ内に埋め込むメリットやデメリットなどをご紹介しました。ここからは、実際にページ内にGoogleMapを埋め込む際にどのように進めたらよいのか、HubSpotでの手順をご紹介します。
なお、地図をそのまま埋め込みたい場合や、ストリートビューを埋め込みたい場合など、埋め込む地図の種類によって少し手順が異なるため、ご注意ください。
目的地の位置を示す場合
上記のような、目的地の位置を示す地図を埋め込む際は、以下の手順で進めます。
１．GoogleMapを開き、目的地を検索する
引用：GoogleMap
２．「共有」をクリックする
引用：GoogleMap
３．「地図を埋め込む」をクリックする
引用：GoogleMap
４．「HTML をコピー」をクリックする
引用：GoogleMap
なお、地図のサイズはデフォルトでは「中」に設定されていますが、「小」「大」「カスタムサイズ」も設定できます。それぞれのサイズに設定すると、プレビューのサイズも変更されるため、プレビューを確認しながら任意のサイズに変更するとよいでしょう。
■サイズを「小」にした場合
引用：GoogleMap
５．HubSpotで、地図を埋め込むページの編集画面を開く
６．「挿入」から「埋め込み」をクリックする
７．コピーしたコードを貼り付ける
８．「挿入」をクリックする
９．内容が正しく反映されているか確認する
ストリートビューを埋め込む場合
上記のような、ストリートビューを埋め込む際は、以下の手順で進めます。
１．GoogleMapを開き、目的地を検索する
引用：GoogleMap
２．画面を下にスクロールし、「写真と動画」内の「ストリートビューと 360°ビュー」をクリックする
引用：GoogleMap
引用：GoogleMap
３．画面上部の、縦に並ぶ「…」から「画像を共有または埋め込む」をクリックする
引用：GoogleMap
４．「地図を埋め込む」をクリックする
引用：GoogleMap
５．任意のサイズを選択し、「HTML をコピー」からコードをコピーする
引用：GoogleMap
以降のHubSpot上の手順は、「目的地の位置を示す場合」内でご紹介した「５．HubSpotで、地図を埋め込むページの編集画面を開く」以降と同じです。
特定の位置から目的地までの経路を示す場合
上記のような、特定の位置から目的地までの経路を示す地図を埋め込む際は、以下の手順で進めます。
今回は例として、赤坂見附駅からニューオータニ ガーデンコートまで徒歩で向かう際の経路を指定します。
１．GoogleMapを開き、目的地を検索する
引用：GoogleMap
２．「ルート・乗換」をクリックする
引用：GoogleMap
３．移動手段と出発先を指定する
引用：GoogleMap
４．ルートが表示されたら、「詳細」をクリックする
引用：GoogleMap
複数のルートが表示された場合は、最も適当なルート（地図に表示したいルート）の「詳細」をクリックしてください。
５．「共有」アイコンをクリックする
引用：GoogleMap
６．「地図を埋め込む」をクリックする
引用：GoogleMap
７．任意のサイズを選択し、「HTML をコピー」からコードをコピーする
引用：GoogleMap
以降のHubSpot上の手順は、「目的地の位置を示す場合」内でご紹介した「５．HubSpotで、地図を埋め込むページの編集画面を開く」以降と同じです。
GoogleMapの埋め込み方法(WordPress)
ここまで、HubSpotでの埋め込み方法をご紹介しました。WordPressでは、以下の手順で埋め込みを行います。
なお、埋め込みコードの表示方法や取得方法はここまでご紹介した内容と同じのため、ここではWordPress（ブロックエディタ）上での埋め込み手順からご紹介します。
１．地図の埋め込み用コードを取得したら、WordPressのページ編集画面を開く
２．編集画面上の「＋」をクリックし、編集メニューを開く
３．検索ボックスに「HTML」と入力し、「カスタムHTML」をクリックする
４．コードを貼り付ける
５．「下書きを保存」をクリックし、編集内容を保存する
６．「プレビューの表示」から編集内容が問題なく反映されているか確認する
埋め込んだGooogleMapのサイズの変更方法(HubSpot・Wordpress)
ここまで、HubSpotやWordPressでのGoogleMapの地図の埋め込み方法をご紹介しました。「実際にページに埋め込んだ地図が思ったよりも大きかったため縮めたい」「もっと地図を大きく表示させたい」といった場合は、それぞれのCMSの編集画面上で大きさを変更できます。
HubSpotでは、地図の埋め込み用コードをソースコードに直接入力して、width（横幅）とheight（高さ）の数値を変更することで、サイズを変更できます。
WordPressでは、地図を埋め込んだ後、「GoogleMapの埋め込み方法(WordPress)」でご紹介したカスタムHTMLに入力したコードのwidthとheightの数値を変更することで、サイズを変更できます。
GoogleMapへのリンクの取得方法
ここまで、GoogleMapに地図を埋め込む方法をご紹介しました。
「東京のおすすめ観光スポット10選」といったコンテンツなど、一度に多くの場所を紹介する際は、ページの読み込み速度の低下などを考慮し、リンクのみを張るほうが適しているケースもあります。
GoogleMapで、マップへのリンクのみ取得する方法は、以下のとおりです。
１．GoogleMapで該当の場所を表示する
２．「共有」をクリックする
引用：GoogleMap
３．「リンクをコピー」をクリックする
引用：GoogleMap
４．コピーしたリンクを任意の場所に貼り付ける
■記載例
【恩賜上野動物園】
住所：〒110-8711 東京都台東区上野公園9-83
GoogleMap：https://maps.app.goo.gl/PdTXm3MFLLbXurWn9
営業時間：9時30分～17時00分
GoogleMapの埋め込み時にAPIが必要となるケース
ここまで、GoogleMapの地図を自社サイトのページ内に埋め込む方法をご紹介しました。
上記の内容は基本的な地図の埋め込み方法ですが、地図上に必要な情報のみを表示させたり、地図の色や線のデザインを変更したりするなど、細かくカスタマイズする場合はAPIが必要となります。自社サイトのデザインやブランドのイメージに合わせた地図を設置したい場合は、APIの利用もご検討ください。
記事内でご紹介した地図の埋め込み方法は誰でも無料で行える方法のため、地図をカスタマイズしない場合は、APIの取得は必要ありません。
まとめ
この記事では、GoogleMapを自社サイトのページ内に埋め込むメリットやデメリット、具体的な埋め込み方法などについてご紹介しました。
GoogleMapは世界中での利用ユーザーが多く、リアルタイムで地図情報が更新されているため、ユーザーにとって使いやすいだけでなく、サイト運営者側でも地図の作成・更新にかかる時間や手間を削減できる点が特長です。
GoogleMapの埋め込みは、目的地を示す以外にも、ストリートビューや出発地から目的地までのルートを示す地図も可能なため、記事内でご紹介した手順をぜひご参考にしてください。
