旅行記などを書いていると場所を地図で示したり、ルートや所要時間を見せたい時ってありますよね。ブログを見ている人にとっても分かりやすく有り難い情報ですからぜひ上手に活用したいところです。
画像としての貼り付けは×
権利帰属表示が必要
帰属
Google のコンテンツを使用するときは、その権利帰属（Google とデータ提供者）を明確に表示する必要があります。権利帰属表示をエンド クレジットに移動したり、数秒後に消したりすることはできません。基本地図、ストリートビューのパノラマ画像、マイマップを埋め込む場合、ウェブまたはアプリケーションで該当の Google APIを使用するか、動画または JPEG 画像を Google Earth プロからエクスポートしてください。必要な帰属表示が地図に取り込まれるので、その他のクレジットは必要ありません。クレジットおよびデータ提供者の適切な表示方法については、権利帰属表示のガイドラインをご覧ください。
Google マップと Google Earth の権利帰属表示に関するガイドライン
Google マップと Google Earth のコンテンツを利用する際は、Google とデータプロバイダの権利帰属を必ず表示する必要があります。適切な権利帰属表示のないコンテンツ利用は、いかなる場合も認められません。また、権利帰属表示はコンテンツが表示されている間は常に表示されている必要があります。Google は権利帰属表示の例外の申請には回答せず、例外を認めることもありません。
画像にサードパーティのデータプロバイダ名が表示されている場合は、「Google」の名称または Google ロゴを表示しただけでは適切な権利帰属表示とは認められません。以下の場合については、権利帰属表示の文言が自動的に表示されます。
引用元：Google使用許諾
- Google マップが提供する HTML を使用してインタラクティブマップを埋め込む場合
- Google の Geo API を利用してウェブサイトまたはアプリケーション内にカスタムマップを作成する、またはカスタムマップを埋め込む場合
- Google Earth プロを使って高解像度の画像または .mov ファイルをエクスポートする場合
常に最新情報を反映
ではどのように利用するかという点ですが、グーグルマップサイトに機能が備わっているのでそれを利用するだけです。
地図を埋め込む、場所を共有する
パソコン版の Google マップでは、地図やストリートビュー画像、運転ルート、検索結果をウェブサイトやブログに埋め込むことができます。パソコン、スマートフォン、タブレットでは、メール、Google+、Facebook、Twitter、テキスト送信を使用して他のユーザーと場所や地図を共有できます。
地図やルートを埋め込む
ウェブサイトやブログに地図やルートを埋め込む手順は次のとおりです。
- Google マップを開きます。
- 埋め込みたい地図、ストリートビュー画像、ルートを地図上に表示します。
- 左上のメニュー
をクリックします。
- [地図を共有 / 埋め込む] をクリックします。
- 表示されるボックスの上部で [地図を埋め込む] タブを選択します。
- ご希望の埋め込みサイズを選択し、HTML 埋め込みコードをコピーしてウェブサイトやブログのソースコードに貼り付けます。
共有できるものとできないもの
共有できるもの:
- 場所、ビジネス情報、住所
- ルートの検索結果
- ストリートビューの画像
共有できないもの:
- 保存した場所を含む地図（自分専用のため）
- 距離測定の結果を含む地図
- 地図そのもののスクリーンショットや画像
- 引用元：Google マップヘルプ
PCなら上の地図上にマウスのポインタを持って行くと地図を操作できますよね。
スマホの方は地図を動かすことが可能が試してみて下さい。もし見ている人がGoogleアカウントにログインした状態で見ると、地図の右上に自身のアカウントアイコンが表示されている場合もあるので気が付く方もいるかもしれません。
地図上のひとつのポイントを表示する方法
- 地図上で場所を検索して赤いポイントを表示させます。
もし地図に情報が登録されていない場所なら、場所を右クリックしてそのまま左クリックして（「この場所について」を選びます）、グレーの小さなポイントを表示させ、下に出たストリートビューの枠に出ている経度緯度の数字をクリックすると、その場所に赤いポイントが表示されます。 - Google Mapの左上にある「三」（ハンバーガーメニュー）を開き「地図を共有または埋め込む」を選択します。
上部タブ「地図を埋め込む」を選択、貼りたい地図の大きさを 大・中・小 から選択します。 - そのタグを、HTMLの挿入したい場所に貼ります。
タグをHTMLに張り付けるだけでMAPの表示は可能ですが、そのままだとブログページの幅、スマホの幅からはみ出てしまう場合があるのでそこを解決します。 - ブログページなどの幅、スマホ画面の幅からMAPがはみ出さないように以下のタグでくくります
<div class="ggmap">
Google Mapのiframeのタグコード
</div>
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
【出典】IN THE COM inc.
ルートを表示する方法
- まず終点（行先）を先に検索して選びます
- 「ルート・乗換」をクリック
- 次に出発点を検索して選びます（先に出発点を検索した場合は住所の右にある ↑↓ マークをクリックすればOKです）
- 交通手段を選択します（おすすめ、車、電車・バス、徒歩、自転車など）
- 必要なら、ルートのオプションを設定します（乗換が少ない、徒歩が少ない）
- 必要なら、出発時刻や到着時刻を設定します（時間と日付）
- いくつかのルートが左に表示されるので、自分が表示したいルートを選択します
- ブログページなどの幅、スマホ画面の幅からMAPがはみ出さないようにタグでくくります
ストリートビュー画像の使用
お客様のプロジェクトでストリートビュー画像をお使いになる場合は、まず、このページの冒頭にある一般的なガイドラインをお読みになり、特に権利帰属表示に関する規約にご留意ください。
ストリートビュー画像を使用するときは、次のいずれかの方法で取り込んでください。上記の方法で画像を取り込んでいただくと、Google がユーザーの要求に応じて画像を編集または削除した場合、それらの変更が現在のプロジェクトにも反映されます。
- Google マップの HTML と URL を使用して、ウェブサイトに画像を埋め込みます（またはリンクします）。
- Google Maps API から直接画像を取り込みます。Google マップ / Google Earth API 利用規約に従ってください。
他にも「Googleの色々なAPI」を使ったものや「Google Earth プロ」を利用して直接画像を取り込むことも可能なようで、少し勉強してみたのですがAPIは登録などをして「キーを取得する」など少し大変そうなので今回はあきらめました。
