Google My Mapsを作ってオリジナルマップをサイトへ埋め込む。

やりたいこと

サイト上で複数の場所を示したい時ってありますよね。
そんな時って、、、
① 住所を書く

• 会社：東京都新宿区新宿2-16-6 新宿イーストスクエアビル7階
• 会社近くのカフェ：東京都 新宿区 新宿 2-15-22 S2ビル1F

② 一つずつ地図を埋め込む

• 会社
  

• 会社近くのカフェ（ベローチェ）
  

とうやり方があるかと思うのですが、今回は「一つの地図で複数の場所を表示させる」ということをやってみます。

対象場所

今回は以下の場所を表示させます。

1. 株式会社ヘッドウォータース
2. 会社近くの良く行くカフェ
3. 会社近くの良く行くランチ

実践

地図を作成する。

1. Google My Mapsを開く。（https://www.google.com/maps/d/u/2/）
2. 「新しい地図を作成」を押下。
3. タイトルと説明文をつける。
   1. 「無題の地図」を押下。
   2. 「地図のタイトル」、「説明」を入力して保存。
4. レイヤを作成。（レイヤは、フィルターとか大分類というイメージ。）
   1. 「無題のレイヤ」を押下。
   2. レイヤ名を入力して保存。
   3. 「レイヤを追加」を押下。
   4. 「無題のレイヤ」という名前で追加されるので上記同様にレイヤ名を編集。
   5. 今回は以下３つのレイヤを作成。（会社：会社の位置 / カフェ：会社近くのカフェの位置 / ランチ：会社近くのランチの位置）
5. 場所を追加する
   1. 追加対象のレイヤを押下。（アクティブ状態にしておく。）
   2. 追加する場所を検索。
   3. 「地図に追加」を押下。
   4. 同様に「カフェ」と「ランチ」にも場所を追加。 ベースはこれで完了しました！

装飾してみる。

今のままだとピンが見づらいため、ピンの装飾をしてみます。

ピンのアイコンを変更。

1. 対象の場所を押下。
2. 「スタイル」を押下。
3. 「他のアイコン」を押下。
4. 「カスタムアイコン」を押下。
5. ロゴ画像をアップデート。
6. 「カスタムアイコン」に追加されたロゴ画像を選択してOKを押下。
7. 他の場所もピンのアイコンを変更。

ピンに名前を表示する。

1. 対象のレイヤ下に記載している「〇〇スタイル」を押下。
2. 「ラベルなし」を押下して、名前を選択する。

場所の名前が表示される！
3. 「カフェ」と「ランチ」も同様に名前を表示させます。

Webサイトに埋め込む。

地図は完成したので、最後に地図をWebサイトへ埋め込んでみます。

共有範囲を設定する。

1. 「共有」を押下。
2. 「変更」を押下。
3. 目的に合わせて「公開範囲」と「ユーザーの操作権限」を設定。（今回は一般公開で閲覧のみに設定。）
4. 保存！

埋め込む。

1. 左上の「設定」を押下。
2. 「自分のサイトに埋め込む」を押下。

3. iframeをコピー。

<iframe src="https://www.google.com/maps/d/u/2/embed?mid=15J-E79fp8qmYxN7vvcVNfoHZ6ex16XpG" width="640" height="480"></iframe>

4. コピーしたiframeをサイトへ貼り付ければ完成！

まとめ

１つの地図の中で複数の場所にピン留めをしてみました。
ブログサイトとかであればオススメの場所とかをピン留めしていって紹介するのに使えそうですね！
Coサイトだったら拠点紹介とか店舗紹介にも活かせそうです！

是非、試してみてください！

参考

• Googleマイマップの作り方。導入～基本地図の作成、使い方を覚えよう【基本編①】
• Googleマイマップの使い方。レイヤ―追加、スタイル変更の方法を解説【基本編②】
• Googleマイマップの公開方法。共有、埋め込み、プレビュー、デフォルトビュー【基本編③】