式場の招待状や会社の案内を作成する際、最寄り駅が複数ある場合など複数経路を１つにまとめた地図が必要になることがあります。Adobeソフトなど特別なツールを利用せずにGoogleMapで実はサクッと作る方法があることをみなさんご存知でしょうか。
ちょっとコツが必要なので知っていると差がつくワザでもあるのでいつかのためにも一読いただけると幸いです。
早速手順紹介していきます。
GoogleMapで指定色の複数ルートをマップ上に載せる
1.まずはGoogle Mapを開きます。ログインしていると右上にアイコンが出ます。出てない場合はログインしましょう。
2.三本線(ハンバーガーメニュー)をクリックします。
3.マイプレースを選択します。
4.マイマップのタブを選択し、一番下にある「地図を作成」をクリックします。
5.ルートを追加する(Y字に跳ねる軌道のような矢印)をクリックします。
6.交通手段を車・徒歩した上でA,Bに住所を入れていきます。
7.駅名など「入力候補」で住所を入力することができます。入力ミスを避けるためにもこちらの方がおすすめです。
8.目的地を入力すると自動で縮尺が代わりルートが表示されます。車と徒歩で表示されるルート(候補)が異なるので注意しましょう。
9.左のメニュー上部の３点リーダをクリック(①をクリック)KML/KMZにエクスポートをクリックします。
10.KML/KMZにエクスポートの下の「地図全体」クリックして目的のルートを選択し、「.KMLファイルにエクスポートします。」にチェックをつけ「ダウンロード」をクリックします。(ルート毎の色の変更には一度エクスポートしてインポートする必要があるためです)
11.エクスポートした最初のるーとの左上のチェック外します。
12.別ルートを5〜8の手順で追加します。曲がる場所が検索時のルートと異なる場合は、一番近い目標から順に「目的地の追加」で登録していきます。
13.先ほどのルートを追加するため、空のレイヤの「インポート」をクリックします。
14.先ほど保存したファイルを選択して「開く」をクリックします。
15.マップ上にルートが追加され、個別スタイル下の行にカーソルを持っていくとペンキのアイコンが表示されるようになります。
16.色や線の太さが変更できるようになります。変更したい場合はエクスポート・インポートを全てのルートで行う必要があるようです。
17.ここまでで地図は完成しました。メニュー上の「プレビュー」を押下してみましょう。
18.画像として利用したい方はここでスクリーンショットなどを取って加工すると良いでしょう。元の画面に戻って左メニューの上部のメニューを「共有」クリックします。
19.名前と説明は特になくとも進めます。
20.「許可設定を変更」をクリックして「非公開 – 自分だけがアクセスできます」右横の「変更」をクリックします。そして「ウェブ上で一般公開」を選択して「保存」をクリックします。
21.「自分のサイトに埋め込む」を選択します。
22.公開設定がしてあれば以下のようなコードが表示されます。
<iframe src=”https://www.google.com/maps/d/embed?mid=1KIib8ZE3wHuPW5dbc1rh1QGd_pg8Fzf7″ width=”640″ height=”480″></iframe>
23.コードを貼り付けると以下のようになります。
いかがでしたでしょうか。手順は少し多い印象ですがブラウザ一つでサイトコンテンツをレベルアップさせたりワンランク上の地図を作れたりします。
以上です。お役に立てれば幸いです。