Googleマップには「マイプレイス」に「マイマップ」という無料サービスもあります。
目次
既存のGoogleマイマップの検索方法
ブラウザの検索窓に「site:https://www.google.com/maps/d/」と入力します。
2021年１月時点：「約20,900 件」と結果表示。トップは「Mas de la Barque」、フランスのホテル・スキー場のマイマップのようです。
検索を絞り込むには、上のURLの末尾スラッシュのあとにスペースを入れて、キーワードを入力します。日本語でも大丈夫のようです
「site:https://www.google.com/maps/d/ 日本」 とすると「約1,340 件」でした。
2021年７月時点：「約33,200件」と結果表示。６ヶ月で12,000件、月に2,000件、日に70件ほど作成されているようです。
この「検索する方法」については、「Google Maps API 徹底解説サイト」に、サイト管理人アルゴリズンさんの詳しい解説があります。
「フリー川崎写真集」で、写真をキーワード検索「円筒分水」で検索すると39件の写真が表示されます。川崎市高津区久地です。
そこで、全国にある「円筒分水」の調査報告サイトも有るのではないか？ということで検索してみますと・・・
その名もズバリ、円筒分水ドットコム「https://entoubunsui.com」サイトが有りました。この中に円筒分水巡りの決定版というバナー「円筒分水・円形分水 全国版」をクリックすると、Googleマイマップタイトル「cylindrical water splitter in JAPAN」が開きました。
全国211件ほど記録されております。「共有」で「埋め込み」してみました。
既存のGoogleマイマップの閲覧方法
マップのボタンについて
- マップタイトルの左にあるボタンをクリックすると、マップにあるマーカーのリストがマップの左に現れます。
- そのリストをクリックするとさらに詳細情報が表示されます
- 地図上のマーカーをクリックしても同じ詳細情報が表示されます
- 詳細情報の上にYB動画の静止画が表示されます
この画像は約300✕180pxほど＝1.7:1→YB動画アスペクト比16:9 - 静止画をクリックすると、Gマイマップの枠一杯のYB動画画面となり閲覧できます
地図・テキスト・動画の三つ巴による情報の紹介ができます。
上のGマイマップをコピーして、別のマーカーに変えたのが下のマップです。すでにマップ上にある「Google マップからの詳細情報」付きのマーカーを選択します。マーカーの色は編集しています。すると「10枚までの投稿者の写真」が自動的にスライドで表示されるようになります。
新規のGoogleマイマップの作成方法
Googleマイマップはプログラミングなどの知識なしに、GoogleMap上にマーカーや経路、領域などを表示して、自分で地図を作成することができるサービスです。
Google Maps APIを用いた地図制御が必要ない場合などに便利です。解説サイト：Google Maps API 徹底解説サイトから
作成するには、Gアカウントで「マイマップ」のページを開きます。
「共有」にして「iframe」のコードを取得して本文に埋め込みます。
- 「基本地図」で、９種類の背景のマップを選択できます
- 各マーカーの中に画像を10枚まで入れることができます
- YB動画も埋め込むことができます
- 他にも面白い仕組みがあります・・・
標準の「地図」を選択
「大陸（濃色）」を選択
静止画による作成マニュアルの紹介
株式会社アーティス提供 カスタムアイコン（36px程度で）などの説明もあります。
静止画がお好きな方はこちらがよろしいかと。
動画による作成マニュアルの紹介
基本的な作成方法
エクセルをインポートする方法
小技
マイマップの縮尺を指定
Z値（0〜22ぐらい）を例えば「&z=14」と記述します。
＜iframe width=”640″ height=”640″ src=”https://www.google.com/maps/d/u/3/embed?mid=1d3-1a1tL8CT-h3l-Bj1D9F6WyB5opU7k&z=14” data-mce-fragment=”1″＞
マイマップ全体にCSSのfilterプロパティを使う
【標準の「地図」を選択】にクラスをつけて・・・
HTML
＜iframe width=”640″ height=”640″ class=”example” ・・・＞
CSS
.example {
filter: grayscale(90%);
}
マイマップの情報はやはり色で分別されているからよりわかりやすいですので、ホバーしたら原色が表示されるのが本来ですね。
【標準の「地図」を選択】にクラスをつけて・・・
HTML
＜iframe width=”640″ height=”640″ class=”example2″ ・・・＞
CSS
.example2 { filter: grayscale(90%); }
/* ホバー時にフィルターを解除 */ .example2:hover { filter: none; }