【Googleマップ】地図の共有、埋め込み方法について

今回はGoogleマップの基本操作である「地図の共有、埋め込み」の方法について解説していきたいと思います。
Google マップを確認しながら、以下解説の手順の通り操作してください。

Googleマップの画像使用について

まずGoogleマップのキャプチャ画像をサイトに掲載することは、Googleマップの規約違反となる可能性があります。
当サイトでは、使用している画像は、Googleマップのキャプチャ画像ではなく、Google Maps APIを使用した自作コンテンツの画像です。
実際のGoogleマップとは異なることを予めご了承ください。

【注意】
Googleマップのキャプチャ画像の使用は規約にて禁止されています。
多くの解説サイトで、キャプチャを使用しているのを見かけますが、Google Mapの地図情報、コンテンツをキャプチャしてサイト等で使用するとGoogleの規約違反となります。
地図の画面をサイト等で使用したい場合は、「地図を共有または埋め込み」から埋め込みコードを取得しましょう。
それでは、「地図の共有、埋め込み」の操作手順を見ていきましょう。

Google マップを共有する、サイトに埋め込む

1Google マップの左上にあるハンバーガーメニュ（横三本線）をクリックすると、サイドバー（メニュ一覧）が開きます。

※Googleマップをイメージした自作コンテンツで操作手順を解説しています。

2 サイドバーにあるメニュ一覧から「地図の共有または埋め込み」を選択してください。

3 リンクを共有する

ポップアップで表示された「リンクを共有」では、発行されたURLをメールやSNSで共有することで、他の人に地図の検索結果の情報を伝えることができます。
例）ミーティングの打ち合わせをするお店の位置情報を、他のメンバーにお知らせしたいとなど。
「Google マップを検索する」からお店を検索します。検索によりお店が選定された状態で、サイドバーのメニュ「地図の共有または埋め込み」をクリックして、共有するリンクを発行します。共有された人は、このリンク先に移動することで、検索結果と同じ状態の地図（お店の位置情報等）を確認することができます。

また、「短縮URL」にチェックを入れると、URLが短くなりますので、メールで送るときやSNSでシェアする時は、見栄えと文字数制限を考慮すると短縮したURLを使う方が良いでしょう。

4 地図を埋め込む

ポップアップで表示された「地図を埋め込む」では、自分のサイトにGoogleマップを表示させることができます。
発行されたhtmlタグ（iframe）をコピーし、自分のサイトのソースに貼り付けてください。
埋め込む地図のサイズは、「小(800 * 600)、中(600 * 450)、大(800 * 600)、カスタムサイズ」で自由に変えることができます。サイズを選択すると、青色の背景の部分（ここにはGoogleマップが表示されます）が実際にサイトに埋め込む大きさに可変しますので、イメージが大変分かりやすく使いやすいと思います。

実際にGoogleマップから埋め込み用のiframeを発行して、埋め込んでみましょう

発行したiframeを表示したいサイトのhtmlに貼り付けると以下のようにGoogleマップが表示されます。

中サイズ（600 * 450）

iframeを発行した後に埋め込みサイズを変更したい場合は、ソースの赤字の数を変更してください。
width=""は、横幅（px）,height=""は、高さ（px）を指定することができます。
※横幅を変えたい場合width="600"
※高さを変えたい場合height="450"

以上、Googleマップの共有方法と、サイトにGoogleマップを埋め込む方法の解説でした。
店舗サイトのアクセス情報ページなど、住所だけでなくGoogleマップで位置情報を示した地図を埋め込むことで、よりユーザにとって分かりやすい表示となることでしょう。

待ち合わせ場所やイベント会場をシェアしたり、アクセスマップとして表示したり、色々な活用法がありそうですね。
とても簡単にできるので是非使ってみてください。

Maps Flow!

このブログを検索