第四回 Googleマイマップを使った活用方法について
今回の第四回目はGoogle マイマップ使い方から設定方法についてご説明します。
Google マイマップとは
Googleマイマップとは旅のしおりなどで活用するケースが多く、行きたいポイントを自由に設定したり、またポイントのナンバリングからルートなどを自由に設定が出来、自分だけのマップを自由に作成する事ができます。
今回はGoogleマイマップの作成からCMSへの設定についてご説明します。
Googleマイマップの作成
１．Googleマイマップにアクセス
https://www.google.co.jp/intl/ja/maps/about/mymaps/
こちらのリンクからGoogleマイマップへアクセス～ログインしてください。
２．Googleマイマップの作成
今回は例として京都のモデルコースをテーマに作成します。
【おすすめモデルコース】京都駅周辺のおすすめモデルコース（1泊2日）
1日目：（京都駅）→（東寺）→（嵐山駅）→（東本願寺）
2日目：（清水寺）→（京都タワー）
(1)地図を作成する
１．新しい地図を作成する
⇒ Googleマイマップにログイン（https://mymaps.google.com/）し、左上の［+新しい地図を作成］をクリックする。
２．地図のタイトルと説明を追加する
⇒ 左上の［無題の地図］をクリックし、タイトルと説明を入力する。
・タイトル：おすすめモデルコース
・説明：京都駅周辺のおすすめモデルコース（1泊2日）
３．地図のスタイルを変更する
⇒ 左側のパネルの1番下にある［▼基本地図］をクリックし地図のスタイルを好みのスタイルに変更する。
・行政区域（薄色）
(２)レイヤーに分けて場所を追加する
４．レイヤー名をつける
⇒ 左側のパネル［無題のレイヤ］をクリックし、レイヤー名を入力、保存をクリックする。
・無題のレイヤ→1日目
５．場所の追加
⇒ 検索ボックスに「京都駅」と打ち、検索 → 出てきた場所の［+地図に追加］をクリックする。
同じように「東寺」「嵐山駅」「東本願寺」の順で追加する。
６．レイヤの追加
⇒ 左側のパネル［レイヤを追加］をクリックし、レイヤ名をつけ、場所を追加する。
・無題のレイヤ：2日目
・「清水寺」「京都タワー」の順で追加
※場所は、住所の検索や、データをインポートして追加することができます。
データのインポート：左側のパネル ［インポート］をクリックして インポートするファイルを選択する。
・ファイルの保存形式（CSV・TSV・KML・KMZ・GPX・XLSX・Google スプレッドシート・Google ドライブまたは Google フォトに保存された写真）
・ファイルの先頭にタイトルと次のいずれかの列があること（緯度と経度情報・住所・場所の名前）
(３)レイヤのスタイルを変更する
７．分かりやすくするためには訪れる順に番号をふり、場所の名前などをいれる
⇒ 1日目のレイヤを選択（レイヤ上でクリック）し、［個別スタイル］をクリック、スタイルを変更する。
・場所のグループ化方法：続き番号など
・ラベルを設定：名前
⇒ 1日目と同様に、2日目訪れる順に番号をふり、ラベルに名前などを設定する。
・場所のグループ化方法：続き番号など
・ラベルを設定：名前
８．アイコンの色を変更する
⇒ 2日目のレイヤーを選択し、「京都タワー」の上にカーソルを合わせ→ペンキマークをクリックし色を変更する。
※アイコンの変更も可能
９．アイコンを動かす
⇒ もしアイコンの場所が違うかったばあいなど、動かしたいレイヤーを選択しアイコンをドラッグし移動する事ができる！
(４)目的地までのルートを作成する
１０．検索ボックスの下にある［ルートの追加］アイコンをクリック、左側のパネルに場所を入力する。
⇒ 1日目のルートを入れる
A：京都駅
B：東寺
C：嵐山駅
D：東本願寺
⇒ 車のアイコンをクリックし、乗り物を選択する。
※自転車は表示されないことが多い！
※ルートの場所指定は、直接地図をクリックしても選択できます。
※［ルートを追加］アイコンの左にある［ラインを描画］で地図上に自由に線を描くことができます。
２．GoogleマイマップをCMSに埋め込む！
（１）Googleマイマップを自分のサイトに埋め込む準備
１．左のパネルにある［＋共有］をクリック→リンクを取得＞変更＞リンクを知っている全員 を選択し完了をクリックする。
⇒ 制限：リンクを知っている全員
２．タイトルの右にあるメニューをクリック→［自分のサイトに埋め込む］を選択し、ボックスのテキストをコピーする。
（２）CMSに埋め込む！
※Googleマイマップを追加・埋め込む際に、Googleマイマップから吐き出されたソースではピクセルでサイズが固定されています。貼り付ける際にレスポンシブデザインなどでは下記の修正を行なってください。
サイズの調整、下に余白をいれる
コンテンツパーツ＞パーツの追加＞その他＞埋め込みタグ - 新規作成を追加する。
先程コピーしたソースを張り付け、マップサイズを調整してください。（コピーしたテキストのwidthを変更）、余白を設定（コピーしたテキストに class="box"を追加）後、保存をクリックする。
＜変更前＞
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1Fhq84j_vAgeS8qJonU06slnhd-pexkUk" width="640" height="480"></iframe>
＜変更後＞
<iframe class="box" src="https://www.google.com/maps/d/u/0/embed?mid=1Fhq84j_vAgeS8qJonU06slnhd-pexkUk" width="100%" height="480"></iframe>
・width="640" → width="100%"
・<iframe src → <iframe class="box" src