東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2023.04.17

oyuco

Google マップのマイマップでオリジナルの地図を作ってみた

Google マップのマイマップでオリジナルの地図を作ってみた

こんにちは!Maromaroのディレクターoyucoです。

最近、ある案件で事業エリア内の複数ある勤務地をGoogle マップのマイマップで作成して掲載してはどうか?、という提案で仮に作成しました。最終的には画像を作成して掲載することになりましたが、せっかくなのでマイマップでのオリジナル地図作成について、作成手順や活用について紹介します。

Google マップのマイマップとは?

マイマップとはGoogle マップの機能を使って、自分の地図(マイマップ)を作成することができる地図作成ツールです。作成したマイマップは編集はもちろん、共有できるので誰かと共同編集することもできます。

マイマップでできることは?

自分の地図を作成できる!

・地点の追加や、線(ライン)や図形(シェイプ)の描画ができます。
・場所を検索して地図に追加することができます。
・好みのアイコンや色を選択して表示することができます。
・スプレッドシートなど、ファイルに保存されているラインやシェイプ、場所をインポートして掲載することができます。

共有して共同編集できる!

・作成したマイマップは、Webサイトやブログに埋め込んで表示することができます。
・他のユーザーと共有して、共同で編集することができます。
・Google ドライブで管理することができます。複数作成したマイマップの整理、各マイマップの共有設定や名前・説明の変更など。

どこでも利用できる!

・パソコンだけでなくモバイルでマイマップを表示することができるので、外出先でも利用できます。

マイマップの作成手順

では、Maromaroの渋谷オフィス周辺のランチマップを作成します。
Maroaro渋谷オフィス周辺には便利なコンビニも色々あって、お弁当やお惣菜、コンビニスイーツなどランチによく利用するので掲載します。

1.パソコンでGoogleにログインしてマイマップにアクセスして、[利用を開始]をクリックします。
※マイマップのログインには、Googleのアカウントが必要です。

Google マップ:マイマップはこちら

Google マップ:マイマップ

2.左上の [新しい地図を作成]をクリックします。

3.マイマップのタイトルと説明を設定します。
左パネルの上にある [無題の地図] をクリックして、[地図のタイトルと説明を編集]画面でタイトルと説明を入力して[保存]をクリックします。


これでマイマップのタイトルと説明が設定されました。

4.カテゴリ(レイヤ)を設定します。
左パネルの[無題のレイヤ]をクリックして、[レイヤ名を編集]画面でこれから登録する名前(グループやカテゴリ名など)を入力して[保存]をクリックします。

これでマイマップに掲載するカテゴリが設定されました。

5.設定したカテゴリ(レイヤ)にランチスポットを登録します。
渋谷オフィス周辺の大抵のお店がGoogle マップに登録されているので、マウスでドラッグして地図を移動したり、地点をズームアップしてお店を探すことができます。また、地図上にある検索窓に店名を入力して探すこともできます。
※検索窓の下にある[凡例]クリックで左パネルを閉じたり、表示することができます。

地図上に登録されているお店アイコンをクリックするとお店の情報パネルが表示されるので、左下にある[+地図に追加]をクリックします。すると、お店のアイコンは地図上でデフォルトのピンに変わって左パネルに表示されます。


これでランチスポットが1つ設定されました。

6.登録したランチスポットのピンを好みのアイコンや色にカスタマイズします。
地図上のお店の情報パネルの下にあるアイコンの一番左[スタイル]アイコンをクリックします。
[スタイル]パネルでデフォルトのピンをランチに関連するアイコンや好みの色を選択して変更します。
[スタイル]パネルの下にある[他のアイコン]をクリックすると多くのアイコンが用意されているので、レストラン、ファストフード、ピザ、麺類、寿司、カフェなどのアイコンを選択して設定したり、オリジナルで作成したアイコンを[カスタム アイコン]で登録して設定することもできます。
※[カスタム アイコン]のサイズは32×32pxか、64px×64pxで作成することをオススメします。

これでランチスポットのアイコンが変更されました。
このように[5]と[6]の手順でランチスポットをいくつか登録していきます。

また、コンビニとMaromaroの渋谷オフィスも他のカテゴリ(レイヤ)を追加して登録します。
左パネルのマイマップ説明の下にある[レイヤを追加]をクリックして、[4]~[6]の手順でランチスポットを登録します。


これでマイマップが作成できました。
お店でひとりランチはなんだか落ち着かず苦手なので、ほぼほぼテイクアウトがメインのマップです・・・。

7.マイマップを共有します。
マイマップを作成した時点では、マイマップは非公開で自分だけが閲覧、編集できる状態です。
左パネルの[共有]をクリックして、[地図の共有]画面でマイマップをMaromaroブログに掲載できるように下記項目をクリックして設定します。

・このリンクを知っている人なら誰でも表示できる:許可
・インターネットで検索しているユーザーにこの地図を公開する:許可
・この地図で自分の名前と写真を公開する:不許可(個人情報が含まれるので)

この設定をすることでブログなどに埋め込んで表示することができます。

また、他のユーザーと共同編集する場合は[地図の共有]画面で[ドライブで共有]をクリックして、他のユーザーに共有したり閲覧や編集権限を設定します。
マイマップを共同編集できるようにする場合は[ユーザーやグループを追加]に共有者のメールアドレスを入力して[編集者]としてマイマップの共有を通知して、マイマップを共有者が編集できるようにすることができます。[完了]をクリックしてGoogle ドライブに保存されました。作成したマイマップはGoogle ドライブに保存しておくことで、今後の管理に備えておきます。
※一般的なアクセスの設定を[制限付き]に変更すると、ブログなどに表示できなくなります。

8.マイマップの表示確認と共有(Webサイトやブログに埋め込み)します。
左パネルの[プレビュー]をクリックして、作成したマイマップの表示を確認します。
表示に問題なければ[プレビュー]画面のマイマップ説明の下にある[共有]をクリックすると、Webサイトに埋め込むHTMLソースコードが表示されるのでコピーします。

9.このブログに掲載して出来上がりです!
埋め込んだマイマップは表示のカスタマイズができません。デザイン的にカスタマイズできると、もう少しマイマップの活用が広がるような気がします。

マイマップの活用について

マイマップは、自分の地図(マイマップ)のように個人的な用途だけでなく、ビジネス用途に応じた作成で活用することができます。
例えば、ビジネスのロケーションマップ。今回提案段階でボツになりましたが、全国にある複数の事業所や事業エリアをマイマップで簡単に作成して自社サイトに掲載することができます。

他には、大規模な再開発が進んでいる渋谷などのまちづくりや都市開発のプロジェクトマップを作成して、開発エリアを可視化した提案や進行管理に活用できるかもしれません。

また、不動産の物件マップ、不動産周辺や商店街などのリアルなローカル情報をまとめたマップを作成してWebサイトに公開することで、ユーザーに有益な情報を提供することで物件の検討につながるかもしれません。

今回は紹介できませんでしたが、マイマップは特定の地点を結んでルートを作成することができます。
例えば、Maromaro渋谷オフィスまでの最寄り駅からのルートは何パターンもあるのですが、マイマップを使って紹介することができます。Maromaro渋谷オフィスまでのルートマップと今回のランチマップがあれば、ランチついでにで気軽にお立ち寄りいただける方も増えるかもしれませんね。

マイマップを作成してのまとめ

だいぶ前になりますが、ある商品のメーカーさんのWebサイトに全国の販売店一覧表が掲載されていたのですが、一覧から探すだけでなく地図からも探せたら便利、ということでこのマイマップで全国の販売店マップを作成したことがあります。すっかり作成手順は忘れていましたが、操作はさほど変わりなく。カスタムアイコンがいっぱい用意されていたり、Google ドライブに保存できる機能が追加されていました。

さらにもう○○年も前になりますが、ある企業サイトを担当していた際に事故が多い交差点について100点くらい地図をトレースして掲載していたコトがありました。その当時は、 Google マップやYahoo!地図やMapion(マピオン)のようなオンラインマップはなく、たしか地図情報を提供しているゼンリンの地図データを部分的にトレースして交差点の地図画像を作成していました。毎年地点や地図のランドマークなどの変更もあって大変な作業だった記憶があります。
今なら、 Google マップ上のある地点にマーカーを追加してWebサイトに埋め込んで表示することができたり、マイマップを使えば、ある地域で複数の地点にマーカーを追加したエリアマップを共有することで注意喚起できるのでとても便利になったと思います。

また、当時の勤務先が最寄り駅から歩いて10分くらいのところにあってわかりにくくて(わたし自身、面接当日は道に迷いました・・・)、自社サイトのリニューアル時にデザイナー陣の提案で、今では見られなくなったAdobe Flash(当時はマクロメディア社のFlash)で駅から会社までを道なりにたどるアニメーションを制作して、自社サイトのトップメインに掲載していたことがありました。
今ではFlashの制作技術も制作費用をかけなくても、Google マップで出発地と目的地を入力するだけで車や電車、自転車や徒歩など色々な移動手段でのルート検索が簡単にできて、音声で目的地までナビゲートしてくれるのでとても便利です。

誰でも簡単に、無料で作成して使うことができるオンラインマップの進化はとても喜ばしいことですね。

以上、oyucoでした。