2018年5月23日

隠居のPC備忘録:Google mapで私的な地図を作成し、ブログに掲載する

今年の桜地図のように、私的な地図を作成してブログにアップロードすることは、少し前までは Java Script のコードを使用するなどかなりの難しいことだった。
参照:隠居のパソコン備忘録:Google Maps API V3 で旅行地図を作成する

 Google MAP は、どんどん進化している。最近、桜地図を作成していて私的な地図作成が非常に簡単になってきていることが分かった。このような地図を作成する方法を備忘録として記録しておきたい。
 当サイトで、アップしている YAMAKO さんのブログに、3月下旬に山陰・山陽地方をバスツアー された記録が掲載されている。これを題材に、このようなツアーの地図を Google Map に作成し、ブログにアップする手順を記録しておきたい。

  1. Google map をブラウザで開く。(大抵は、自宅近辺の地図が表示される)
  2. 左上の枠のメニューボタンmenu01.JPGをクリックすると、メニューボックスが表示される。
    「マイプレイス」を選択すると出てくる画面で、右上の「マイマップ」を選択し、下の方に青い文字で表示される「地図を作成」をクリックする。
  3. gmap002.JPG

  4. すると下のような画面になる。
  5. gmap005.JPG

  6. 地図の名前を「山陰・山陽バスツアー」として、はじめの訪問地である「倉敷美観地区」を検索ボックスに入力すると下のような画面になる。
  7. gmap006.JPG

  8. 画面中央のポップアップの下のアイコンは、それぞれ左から、マーカーを指定する「スタイル」IC01.JPG、ポップアップに表示する情報を「編集する」IC02.JPG、掲載する写真または動画をアップロードする「画像を追加する」IC03.JPG、今回は使っていないが、ルートを表示するIC04.JPG、そして掲載した写真や編集入力部分の削除する「対象物を削除」IC05.JPGである。

  9. 訪問地点を表示するマーカーは、Google map に標準で種々用意されているが、ここでは訪問順を示す番号入りのマーカーを使いたかったので、「他のアイコン」から「カスタムアイコン」を選択し、パソコン上に収納していた番号入りマーカーをアップロードした。ただし、カスタムアイコンは、一つづつしか登録できない。番号付きマーカーについては、過去のブログのGoogle Maps API で旅行地図を作る:番号付きマーカーを使う に記載している。

    gmap010.JPG

  10. 情報の編集ボックスには、訪問した日付とブログ記事へのURLを入力した。URLをクリックするとブログ記事へ誘導してくれる。

  11. カメラアイコンをクリックすると、パソコンからファイルを選択して画像をアップロードする画面となる。+ ボタンをクリックすると10枚まで続けてアップロードできるが、10枚以上のときは、保存後改めて、カメラアイコンをクリックして追加しなければならない。ただし、地図を公開して閲覧できる写真は10枚までである。

  12. 訪問先に順次マーカーを立て、関連リンク先や写真をアップすると、下図のように表示される。ここで地図が航空写真のような表示になっているのは、左ボックスの下にある「基本地図」でスタイルを航空写真を選択したからである。
  13. gmap011.JPG

  14. 作成した地図は、知人らと共有することができる。先ほどの画面にある左ボックス中断の「共有」ボタンをクリックすると、下のようなポップアップ画面がでるので、共有相手などを指定できる。メールで通知するのが一般的だろう。
  15. gmap012.JPG

  16. ブログに掲載するには、左ボックスの右上メニューボタンをクリックすると表示されるボックスから「自分のサイトに埋め込む」を選ぶと下のようにブログに貼り付けるコードが表示されるので、これをコピペすればよい。
  17. gmap013.JPG ⇛⇛ gmap014.JPG


 このようにして作成した地図は、当サイトの Studio YAMAKO の右枠の「山陰・山陽バスツアー」ボタンをクリックすると表示される。

トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/3815

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)