Google マイマップでオリジナル地図を作成し埋め込んでみる

Pocket
LINEで送る


以前の記事でAPIを使ったGoogle MAPのカスタマイズをしてみましたが、今回はマイマップという機能でGoogle MAPをカスタマイズしてみようと思います。

Google マイマップ サービスページ

Google マイマップについての紹介ページはこちら。

利用を開始はこちらのページから。

Google マイマップ カスタマイズの流れ

とても操作が簡単なので、ざーっと流れをまとめます。

「+新しい地図を作成」をクリック。

左上のパネルから、地図のタイトルと説明を記入。

ピンは検索して地点を選ぶか、検索窓下のピンアイコンを選択した状態で地図上のお好きな場所をクリックでピンが設置されます。

ピンは色もアイコンも変更できます(画像をアップロードすることでオリジナルのアイコンも設置できます)。

ルートは自分でポチポチ線を引っ張ってくこともできますし、A地点からB地点までの地点をそれぞれ検索して設定することもできます。

ざっとこんな感じ(テストなのでピンの位置はあまり正確ではないです)。

左のパネルの下にある「基本地図」から地図のテイストを6種類の中から選べます。今回は荒ぶる自然の北海道らしいテイストにしてみました。

地図タイトル横のメニュー(縦に・が3つあるアイコン)を開き、「自分のサイトに埋め込む」を選択。

お馴染みiframeのソースが吐き出されました。

公開範囲はデフォルトでは自分のみなので、「ウェブ上での一般公開」に変更します。基本的に編集権限は管理者のみでいいと思います。

Google マイマップ 埋め込み結果

埋め込んだ結果が以下のとおり(後からこっそり知床のアイコンをオリジナル画像に差し替えてみました)。

以前は経度緯度を調べてscript内に一箇所一箇所記述していった記憶があるんですが、いつの間にこんな簡単便利なサービスが始まってたんでしょう……。日々勉強し続けないとダメですね。

APIでの実装ほど細かいカスタマイズはできないようですが、簡単にstyleを当ててみた結果以下の程度には変えられました(今はIEの存在を無視します)。
ここではborder-radius: 10px; filter: grayscale(1); border: none;を当てています。

Pocket
LINEで送る

back to top