よくばりトラベルプランズ

読者です 読者をやめる 読者になる 読者になる

よくばりトラベルプランズ

旅行好きの情報公開!誰かの旅行プランの役に立つように、時間・料金・お得・便利をメインに書いています。

ブログにGoogle Mapを使う時は画像として貼り付けずに「埋め込む」

旅行記などを書いていると場所を地図で示したり、ルートや所要時間を見せたい時ってありますよね。ブログを見ている人にとっても分かりやすく有り難い情報ですからぜひ上手に活用したいところです。


continents-695188_640.jpg 

そこで一番利用されている地図のGoogle Mapsを利用する場合についての方法なのですがGoogle Mapsには「利用規約」があるので色々と気を付けて使用しなければならないんです。

画像としての貼り付けは×

一番ありがちなのはPCの「スクリーンショット画像」を保存して貼り付けてしまうことです。簡単な方法ですし、たまにウェブ上で見かけるので大丈夫かのかな?と思って使ってしまいがちです。

でももしスクリーンショット画像で使用してしまうと、帰属などを失った「個人の画像」になってしまうので、その地図がGoogle Mapsのものなのか分からなくなってしまいます。


権利帰属表示が必要


ブログなどでGoogle Mapを利用する時は「権利帰属表示」の必要があります。サイトの管理者であるGoogleだけでなく、Google Mapsの地図データ提供者、日本ではZENRINですが、著作権上その表示の必要もあるのです。

地図の下にさりげなく小さく表示されている「Google」と「ZENRIN」という文字がとても重要ということのようです。

帰属
Google のコンテンツを使用するときは、その権利帰属(Google とデータ提供者)を明確に表示する必要があります。権利帰属表示をエンド クレジットに移動したり、数秒後に消したりすることはできません。

基本地図、ストリートビューのパノラマ画像マイマップを埋め込む場合、ウェブまたはアプリケーションで該当の Google APIを使用するか、動画または JPEG 画像を Google Earth プロからエクスポートしてください。必要な帰属表示が地図に取り込まれるので、その他のクレジットは必要ありません。クレジットおよびデータ提供者の適切な表示方法については、権利帰属表示のガイドラインをご覧ください。

引用元:Google使用許諾 - マップ、ストリートビューの使用 - 一般的なガイドライン

Google マップGoogle Earth の権利帰属表示に関するガイドライン

Google マップGoogle Earth のコンテンツを利用する際は、Google とデータプロバイダの権利帰属を必ず表示する必要があります。適切な権利帰属表示のないコンテンツ利用は、いかなる場合も認められません。また、権利帰属表示はコンテンツが表示されている間は常に表示されている必要があります。Google は権利帰属表示の例外の申請には回答せず、例外を認めることもありません。

画像にサードパーティのデータプロバイダ名が表示されている場合は、「Google」の名称または Google ロゴを表示しただけでは適切な権利帰属表示とは認められません。以下の場合については、権利帰属表示の文言が自動的に表示されます。

  • Google マップが提供する HTML を使用してインタラクティブマップを埋め込む場合
  • Google の Geo API を利用してウェブサイトまたはアプリケーション内にカスタムマップを作成する、またはカスタムマップを埋め込む場合
  • Google Earth プロを使って高解像度の画像または .mov ファイルをエクスポートする場合
引用元:Google使用許諾 


常に最新情報を反映

そしてGoogleが地図情報を更新したり訂正した際にどのサイト上でも(個人のブログ上でも)反映されるようにしておく必要があるんです。常に最新の状態で表示されるということは見ている側としてもありがたいことですね。

Google Maps利用規約は、印刷物に使用する場合はかなり厳しい制限があるので注意が必要ですが、WEB上での使用は一度方法を把握してしまえば簡単なので、しっかり規約を守って利用したいところ。

ではどのように利用するかという点ですが、グーグルマップサイトに機能が備わっているのでそれを利用するだけです。


実際に埋め込んでみる

今回は「権利帰属表示に関するガイドライン」の3つの方法の中で、一番上に記載されていた「HTMLを使用してインタラクティブマップを埋め込む」という方法です。

地図を埋め込む、場所を共有する

パソコン版の Google マップでは、地図やストリートビュー画像、運転ルート、検索結果をウェブサイトやブログに埋め込むことができます。パソコン、スマートフォンタブレットでは、メール、Google+FacebookTwitter、テキスト送信を使用して他のユーザーと場所や地図を共有できます。

地図やルートを埋め込む

ウェブサイトやブログに地図やルートを埋め込む手順は次のとおりです。

  1. Google マップを開きます。
  2. 埋め込みたい地図、ストリートビュー画像、ルートを地図上に表示します。
  3. 左上のメニュー  をクリックします。
  4. [地図を共有 / 埋め込む] をクリックします。
  5. 表示されるボックスの上部で [地図を埋め込む] タブを選択します。
  6. ご希望の埋め込みサイズを選択し、HTML 埋め込みコードをコピーしてウェブサイトやブログのソースコードに貼り付けます。

共有できるものとできないもの

共有できるもの:

共有できないもの:


このように結構詳しく方法が記載されているのですが、記載された通りの手順で進んでいくと少し迷う部分などがあるので、もう少し詳しくメモしておきたいと思います。


Google Mapの「地図を埋め込む」とは

「埋め込む」という状態は、見ている人が地図を動かせる状態で張り付けるということ。


PCなら上の地図上にマウスのポインタを持って行くと地図を操作できますよね。

スマホの方は地図を動かすことが可能が試してみて下さい。もし見ている人がGoogleアカウントにログインした状態で見ると、地図の右上に自身のアカウントアイコンが表示されている場合もあるので気が付く方もいるかもしれません。


地図上のひとつのポイントを表示する方法

  1. 地図上で場所を検索して赤いポイントを表示させます。
    もし地図に情報が登録されていない場所なら、場所を右クリックしてそのまま左クリックして(「この場所について」を選びます)、グレーの小さなポイントを表示させ、下に出たストリートビューの枠に出ている経度緯度の数字をクリックすると、その場所に赤いポイントが表示されます。

  2. Google Mapの左上にある「三」(ハンバーガーメニュー)を開き「地図を共有または埋め込む」を選択します。
    上部タブ「地図を埋め込む」を選択、貼りたい地図の大きさを 大・中・小 から選択します。

  3. そのタグを、HTMLの挿入したい場所に貼ります。
    タグをHTMLに張り付けるだけでMAPの表示は可能ですが、そのままだとブログページの幅、スマホの幅からはみ出てしまう場合があるのでそこを解決します。

  4. ブログページなどの幅、スマホ画面の幅からMAPがはみ出さないように以下のタグでくくります
<div class="ggmap">
Google Mapのiframeのタグコード
</div>
これで完了!(注意)このタグは以下「ルート表示」や「ストリートビュー」の埋め込みでも同様に利用します。

忘れていました。
CSSにこちらをコピペしましょう。

.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.

ルートを表示する方法

  1. まず終点(行先)を先に検索して選びます
  2. 「ルート・乗換」をクリック
  3. 次に出発点を検索して選びます(先に出発点を検索した場合は住所の右にある ↑↓ マークをクリックすればOKです)
  4. 交通手段を選択します(おすすめ、車、電車・バス、徒歩、自転車など)
  5. 必要なら、ルートのオプションを設定します(乗換が少ない、徒歩が少ない)
  6. 必要なら、出発時刻や到着時刻を設定します(時間と日付)
  7. いくつかのルートが左に表示されるので、自分が表示したいルートを選択します
  8. ブログページなどの幅、スマホ画面の幅からMAPがはみ出さないようにタグでくくります


上のMAPはフランスのパリ、シャルルドゴール空港からルーブル美術館までの電車移動を設定してみました。

ストリートビューを埋め込む
同じ方法でストリートビューも埋め込むことが可能です。地図の場所を示すだけでは分かりにくい場合に有効的です。


  1. ストリートビューを表示する
  2. 見せたい方向を設定する
  3. 左上の「…」3つの●が縦になったボタンをクリックして「画像を共有または埋め込む」
  4. HTMLの埋め込みたい場所にタグを貼り付ける
  5. ブログページなどの幅、スマホ画面の幅からMAPがはみ出さないようにタグでくくります

芝公園から見た東京タワーなど)

ストリートビュー画像の使用

お客様のプロジェクトでストリートビュー画像をお使いになる場合は、まず、このページの冒頭にある一般的なガイドラインをお読みになり、特に権利帰属表示に関する規約にご留意ください。
ストリートビュー画像を使用するときは、次のいずれかの方法で取り込んでください。
上記の方法で画像を取り込んでいただくと、Google がユーザーの要求に応じて画像を編集または削除した場合、それらの変更が現在のプロジェクトにも反映されます。

ストリートビューもこの方法で取り込むことで、最新の画像が表示されます。

ストリートビューの機能では右下にある「問題の報告」から自宅の表札、車のナンバープレートなど、画像のぼかし依頼を簡単にできることもあり、それがきちんと反映される必要があるんですね。

ですから綺麗な空と紅葉だった写真がいつのまにか真冬の寒々しい画像に切り替わってしまう可能性も多いにあるのでそのあたりは注意が必要かもしれませんね。



他にも「Googleの色々なAPI」を使ったものや「Google Earth プロ」を利用して直接画像を取り込むことも可能なようで、少し勉強してみたのですがAPIは登録などをして「キーを取得する」など少し大変そうなので今回はあきらめました。

Google Earth は昔使用していましたが「重そう」という理由でPCに取り込むこと自体に抵抗があり今回は試しておりません…。

他にも複数の場所に印をつけて共有したい場合はGoogleの「My Map」機能が便利なようです。My Mapについてはまた必要な機会があれば調べつつ書いてみたいと思います!


にほんブログ村 旅行ブログへ