【グーグルマップ】マイマップを作成・共有・Webサイトに埋め込みの手順をわかりやすくご紹介

お気に入りのお店をグーグルマップに登録したいなぁ。そのグーグルマップをウチのWebサイトに埋め込むことができたら便利だろうなぁ。

グーグルマップの便利な機能の一つに、マイマップというツールがあります。

オリジナルの地図が作れたり、作成した地図をWebサイトで共有したり。

個人で使うにも、仕事のツールとして使うにも、とても便利なマイマップ。

今回はグーグルマイマップを使った地図の作成方法からWebサイトへの埋め込みかたまでの手順をわかりやすくご紹介していきます。

グーグルマイマップで『新しい地図』を作成する手順

step.1

はじめにグーグルマップを開きます。

Google My Mapsトップページ
step.2

ログインします。
1. 　画面右上のアイコンからログイン
2. 『新しい地図を作成』を押す
step.3

新しいグーグルマップが開きました。

これから、オリジナルの情報を加えていく画面になります。

いくつか設定をしていきましょう。
step.4

新しく作った地図のタイトルを入力するために、画面左上にある『無題の地図』を押します。
step.5

『地図タイトル』に入力します。

『説明』は必要に応じて入力してください。

入力が終わったら『保存』を押します。
step.6

地図の画面に戻りました。

入力したタイトルや説明のコメントが入っているか確認してみてください。
step.7

次に『レイヤを追加』を押します。

レイヤとは、好きなカテゴリーをグルーピングしやすくするもので、文字で説明するより見てもらう方が理解が早いと思います。

例えばこのようにレイヤを分けて作ってみました。
- 美味しいラーメン屋さん
- 美味しいカレー屋さん
- 美味しいパスタ屋さん

作ったレイヤは左にあるチェックボックスで表示／非表示を切り替えることができるので、知りたい情報だけを効率よく確認することができる優れた機能です。

これでグーグルマップのオリジナル地図（マイマップ）が完成しました。

どうもお疲れ様でした。

マイマップに登録する手順

次はマイマップにオリジナルの場所を登録していく手順についてご紹介します。

step.1

試しに上野駅を登録してみましょう。

検索窓に上野駅と入力して検索します。
step.2

上野駅が検索され、地図に上野駅が表示されました。

画面の上部にある『マーカーを追加』を1回クリックし、地図上の目的の場所でもう1回クリックします。
step.3

『マーカー』と呼ばれるアイコンが地図上に表示され、入力画面も表示されます。

上段にはわかりやすい地名や店名など、下段には住所やURL、覚え書きやコメント等、メモがわりに文字を入れます。もちろん未記入でも大丈夫です。

入力が終わったら『保存』を押します。
step.4

保存されるとこのように表示されます。

このアイコンは、地図上でドラッグすることで場所の変更ができます。

もちろん、管理者権限のある人だけが編集できるようになっています。
step.5

次にアイコンのデザインの変更と画像の追加についてご紹介していきます。

このペンキ缶のマークは、アイコンの色や形を変更するものです。

上段がアイコンの色の変更。

下段はアイコンの形を変更するパレットです。
step.6

続いてペンのマークです。

こちらは、登録したアイコンの文字情報を編集するマークです。
step.7

次は画像の挿入です。

カメラのマークを押してください。

このような画面が出てきますので、画像をドロップするか、ファイル指定をしてください。

画像を登録したら『保存』で終了してください。

以上でオリジナル情報の登録は完了となります。

どうもお疲れ様でした。

Webサイトへの埋め込みについて

最後に、作ったオリジナルのグーグルマップを、Webサイトに埋め込む方法をご紹介します。

step.1

マイマップのページを開き、画面上部にある『共有』を押します。
step.2

クイック共有の設定を行います。

赤枠の『リンクの共有を有効にする』を押します。

青枠の『一般公開』は注意が必要です。

青枠の『一般公開』の注意点

Webサイトやブログなどで、不特定多数の人に公開する場合にアクティブにします。

あくまで個人で扱う情報や、限られたメンバーだけで活用する場合はここはオフの状態にします。
step.3

マイマップの最初の画面から、こちらの設定ボタンを押し

プルダウンで現れた『自分のサイトに埋め込む』を押します。
step.4

表示されたソースコードをコピーしてください。
step.5

ワードプレスなどのエディターを開きます。

こちらの画面はワードプレス＋あフィンガー５となります。

お持ちの環境によって画面は異なりますが、かならず『テキスト』エディターにコードを貼るようにしてください。
step.6

コードを貼り付けたあと、ビジュアルエディターで確認するとマイマップが表示されていることが確認できます。