Flexible Common – Map

概要

Google Map をページに埋め込むセクションテンプレートになります。Mapは、アドレスとiFrameを使用することが出来ます。
Styleは、Mapのみ、iFrameのみ、又は混合と＋エディターなどのスタイルを用途によって使用することが出来ます。

iFrameの用途について

GoogleマップからiFrameを作成する場合に、経路やストリートビューを用いた地図を作成することが出来ます。

用途

サイトの連絡先ページや個別に場所を地図で案内する時などに使用ができます。

使用方法

• 編集ページ の「Flexible Commmon」から[Add Section]から使用するテンプレートを選択して下さい。
• レイアウトの設定はローカルでの設定になります。

テンプレート

• Map

設定

1. 内容
   • Map – Address：MAP用の住所を入力します。（例：東京都新宿区信濃町35）
   • Map – iFrame：iFrame用のアドレスを入力します。（Googleマップで作成した）
   • Map Style：Map/iFrameのみ又は混合、Map/iFrameとテキストエリア、テキストエリアとMap/iFrame
   • Map Zoom：デフォルトの地図の拡大・縮小率の数値
   • Map Heigh：Mapの高さ
   • Contents Heigh：テキストエリアの高さ（Mapとテキスト）
   • Column Width：カラムの幅（％）
   • Map Border color：Mapエリアの枠線色
   • Editor Bgcolor：テキストエリアの背景色
   • Editor Border Color：テキストエリアの枠線色

iFrameでのHeight設定について

• Google マップで作成したiFrameのURL内の「height=”420″」の数値を変更して下さい。そしてテキスト/MAPと混合して使用する場合は、「 Map Heigh」と「Contents Height」の高さもiFrameのURL内の「height=”420″」と同じにして下さい。
• iFrame には、「Map Border color」は適用されません。

Map のみ

Map ＋ エディター

エディター ＋ Map

iFrame

iFrame + エディター

エディター + iFrame

 Map(Top) iFrame(Bottom)

Map ＋ iFrame

iFrame + Map

設定内容

• Map Style：Map,Map and Editor,Editor and Map,iFrame,iFrame and Editor,Editor and iFrame,Map(Top) iFrame(Bottom),Map and iFrame,iFrame and map
• Map Zoom：17
• Map Heigh：380(Map), 420(iFrame)
• Contents Heigh：380(Map), 420(iFrame)
• Column Width(%)：60-40（Map/iFrame＋テキスト）, 40-60（テキスト＋Map/iFrame）, 50-50（Map + iFrame）
• Map Border color：#C0C0C0
• Editor Bgcolor：#F7F7F7
• Editor Border Color：#FFFFFF

作成手順

1. Google Map で「慶応義塾大学病院」の病院名または住所で検索をしてMAPを表示させます。
2. 検索をした左側のメニューを下の方にスクロールさせて「写真と動画」の所で、ストリートビューと360°ビューを探して選択をします。
3. MAPがビュー画面に変わります。そして左下に小さいMAPの窓が開くのでそのMAPでちょうど良い場所に移動をします。
   マウスでビュー画面をクリックして場所を調整します。
4. ビュー画面の上にある「慶応義塾大学病院」のタイトルの横にあるメニューボタンをクリックします。
5. 「画像を共有または埋め込む」をクリックします。
6. 「地図を埋め込む」タブを選択して、「HTMLをコピー」をして、iFrame用のURLをコピーします。

※Google Map の操作パネルなど頻繁に変わるので、上記のビデオの操作手順と異なることが多々あると思われます。

グーグルマップの利用にあたっては、著作権法・Googleが定める利用規約と、ガイドラインに従った利用をする必要があります。これらの利用規約に従いGoogle Mapで作成した埋め込み用のURLで地図を表示させて利用するのであれば自由に利用することができます。

過去にグーグルマップ著作権の違反の事例として、岩手県・宮城県のHPでGoogleの利用規約違反が生じた実例もあり、コンテンツの利用方法や禁止事項などの条文を理解することが必須とされます。

県ＨＰで著作権侵害の恐れ　宮城４０００枚、岩手２０００枚の地図掲載
https://www.sankei.com/article/20170331-C43GZX6Z5JLPDLWIBGB4JHGPX4/

注意すること

Google Mapをキャプチャして修正を行うことや出典のGoogleのコピーライトの表記を無くしたりしなければ問題なく使用ができますが、「Google Maps Platform Terms of Service」を確認するところ下記の2点をピックアップしておきます。

• 「3.2.2 Requirements for Using the Services.の (e) No Use With Non-Google Maps.」から
  • お客様のアプリケーション内でGoogleマップコアサービスをGoogle以外のマップと一緒に、またはその近くで使用しないでください。
• 「4. Customer Obligations.の 4.1 Compliance.」から
  • 顧客とそのエンドユーザーによるサービスの使用が本契約に準拠していることを確認する。MAPコンポーネントの使用について明記して、顧客へ通知する。とあるのでここで通知します。