スキップしてメイン コンテンツに移動

【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マップが表示されます。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975468372!2d139.7432442156315!3d35.658580480199525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1497844030556" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

中サイズ(600 * 450)

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


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

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