やまもち

お金の問題に向き合わなければ時間と自由は得られない

Google mapのピンを埋め込む方法:My mapを綺麗に共有できるカスタマイズ方法解説

自分が行った場所を紹介する上でなくてはならない機能が地図です。

この地図をうまく使いこなせれば、そのサイトを見た人の満足度はかなりUPします!!

 

このサイトでも地図を使った場所紹介をよくやっています。

今回は私が使っているGoogle mapで、自分が指定したピンだけをわかりやすく表示する方法を解説します。

 

早速Googl Mapの設定手順

 

google mapを開きます。

この時、自分のアカウントでログインしていることを確かめてください。

ゲストユーザーにしているとピン公開機能は使うことはできないので注意してください。

 

 

 

左上のメニューを選択します。

 

 

 

 

メニューバーの中のマイプレイスを選択

 

 

 

 

マイプレイス内のマイマップを選択

 

 

 

マイプレイス内の一番下にある「地図を作成」選択すると、

新しいページに飛びます。

 

 

 

ここで表示されたgoogle mapに自分がピンを立てたい所を検索して、

その地点をクリックしてピンを立ててください。

 

 

 

次に検索バーの下にあるアイコンからピンを選択して、新たにピンを立てます。

次にピンを立てた場所の名前を入力します。

 

 

 

メニューバー内にある「無題のレイヤ」を選択して先ほどと同じ名前に変更してOKを選択すると名前が変更されます。

 

 

 

 

青色のペンキマークを選択して「ラベル設定」「名前」に変更します。

 

 

 

これでピンの隣に名前が表示されて見やすくなりました。

 

 

 

 

個別スタイルの下にあるピンアイコンを選択すると、ピンの形や色を変えることができます。

 

 

 

 

次に一般に公開するための設定をしていきます。

「共有」を選択します。

 

 

 

 

初期状態だと、自分だけが見れる状態になっているのでこれを一般公開します。

「変更」を選択。

 

 

 

「ウェブ上で一般公開」を選択

 

次にgoogle mapを埋め込んだ際の表示の範囲を設定します。

画面に表示されているmapを埋め込みの際に表示したい範囲に調整します。

 

範囲が決まったら地図の名前横にあるメニューを選択して

デフォルトビューを設定を選択。

その時何も表示されませんが問題ありません。

 

 

 

「プレビュー」を選択。

すると新しいページに飛びます。

 

 

 

ここに表示される地図にピンと名前が表示されているのを確認したら「共有」を選択

 

 

 

 

「<>自分のサイトに埋め込む」を選択

ここに表示されたコードを全てコピーして、

自分のサイトのHTML形式のコード内にペーストすれば完成です。

 

これで完了です。

ピンの位置も名前も見やすく表示され、サイトに綺麗な動線を作る方法でした。

慣れるまでは面倒な作業でも、数回繰り返しているうちに流れ作業でできるようになります。

同じ地図なに複数のピンをつけることもできます。ピンや色を使い分けて見やすくすることもできるので使い方の幅はアレンジ次第で無限大です。