Webサイトに地図を表示したいとき、一般的には「Googleマップを埋め込む」方法がよく使われます。
しかし、より細かくカスタマイズされた地図を表示したい場合には、「Googleマイマップ」の活用が効果的です。
今回は、Googleマイマップとは何かという基本から、Webサイトへの埋め込み方法、そして実際の活用例までをご紹介します。
一例として、以下のような地図を作成・表示できるようになります。
目次
Googleマイマップとは？
Googleマイマップとは、Googleが提供するオリジナル地図作成ツールです。
通常のGoogleマップと違い、以下のような自由なカスタマイズが可能です。
- 独自のスポットを自由に追加できる
- 各スポットに説明文や写真を挿入できる
- スポット同士を線でつなぎ、ルートを視覚化できる
- 複数のレイヤで情報を整理できる
- マーカーの色分けやデザイン変更ができる
活用例
Googleマイマップの具体的な活用シーンをご紹介します。
- 複数展開しているカフェの全店舗を1つの地図にまとめ、営業時間・写真・ルート案内を表示
- バスツアーのルートを地図上で可視化
- コンビニを種類ごとに色分けして一覧表示
- 各スポットのマーカーをオリジナル画像に変更
GoogleマイマップをWebサイトに埋め込む方法
以下の手順でGoogleマイマップを作成し、Webサイトに埋め込むことができます。
Googleマイマップを作成
1．Googleアカウントでログイン
2．Googleマイマップ（https://www.google.com/mymaps） にアクセス
3．「新しい地図を作成」をクリック
4．地図の名前やレイヤを整理
5．地図上にスポットや線、写真等を追加
基本的な操作方法
①地図のタイトル（クリックすると名前を編集可能）
②レイヤを追加（クリックするとレイヤの追加が可能）
例えば北区・南区のようなエリアや、サッカー場・野球場等、カテゴリごとに分類可能
インポートからCSV等のデータを読み込むことも可能
③レイヤ（クリックすると名前を編集可能）
1レイヤに最大2,000件、全体で最大10レイヤまで作成可能
④「恵比寿駅」等のキーワードで検索することでそのスポットを追加可能
検索バーの下のアイコンからラインを引いたり、ルートを表示することも可能
マーカーのデザイン
レイヤ名の下にデザインを編集できる項目があり、「スタイル」をクリックするとマーカーを１件１件別のものにする「個別スタイル」、すべて同じデザインにする「均一スタイル」等の設定が可能です。
その下の地名や「すべてのアイテム」をホバーするとバケツのアイコンが表示され、マーカーの色や見た目を編集できます。
マーカーの色や見た目はマーカーを直接クリックしても編集可能で、他に写真を登録する、説明文を追加する等の操作も可能です。
地図を「公開設定」に変更
地図画面左上の「共有」または「プレビュー」をクリックすると公開範囲を指定することができ、「リンクを知っている全員が表示可能」に設定することで地図を公開できます。
HTMLコードを取得してWebに貼り付け
地図上部のメニュー（三点アイコン）から「地図を埋め込む」を選択し、表示された <iframe> タグをコピー、自分のWebサイトに下記のようなコードを貼り付けることでWebサイト上でも公開できます。
<iframe src=”https://www.google.com/maps/d/embed?mid=XXXX” width=”640″ height=”480″></iframe>
※埋め込みの際に「オーナー名を表示するかどうか」を確認されます。地図にGoogleアカウント名が表示されるため、不要な場合はオフにしてください。
まとめ
GoogleマイマップをWebサイトに埋め込むことで、単なる地図ではなく、情報性に富んだコンテンツとして活用できます。
カスタマイズ性も高く、見た目もわかりやすいため、訪問者にとっての利便性が格段に上がります。
特別なプログラミング知識は必要ありませんので、ぜひこの機会にGoogleマイマップを活用してみてください！
