【Google Map】ピンをオリジナルアイコンにする方法(マイプレイス)

標準

どうやらGoogle仕様が変わっている(?)ようなので、確認も兼ねて『ピン』をオリジナルのアイコンに変える方法を書こうともいます。

GoogleMapからでも、『マイマップ』と検索もしくは下記リンクからでもいけるのですが、今回はGoogleMapからのやりかたです。

参考:Googleマイマップ

 

まず、Googleにログインした状態でGoogleMapにアクセスし、左上のテキストボックス上をクリック↓↓↓

googlemap1

テキストボックスの下に、最近の検索履歴(出ないときもある)と『マイマップ』が表示されるので、『マイマップ』をクリック↓↓↓

googlemap2

現れた『マップ作成』の右側の『作成』をクリック↓↓↓

googlemap3

『無題の地図』が表示されます。(始めにGoogleマイマップでアクセスするとここに来ます)↓↓↓

googlemap4

左上の『無題の地図』をクリックすると名前が変更できるので、好きな名前に変更しておく↓↓↓

googlemap5

お店の名前か、お店の住所を検索すると黄緑色のピンが立ちます(今回はお店の名前)↓↓↓

googlemap6

左の検索結果から当てはまるものをクリック(もしくはピンをクリック)↓↓↓

googlemap7

現れた吹き出しの下部の『地図に追加』をクリック↓↓↓

googlemap8

※ここでお店の名前が表示しない(表示させたい)場合は、お店のGoogle+ページの作成をします。(Google+ページの作成の方法はまた後日)

『地図に追加』をクリックすると、左のボックスの下『無題のレイヤ』に追加されます↓↓↓

googlemap9

追加されたお店の名前(住所)にマウスを会わせるとペンキのようなマークが出るので、それをクリック↓↓↓

googlemap10

現れた吹き出しの下部の『他のアイコン』をクリック↓↓↓

googlemap11

アイコン一覧が現れます↓↓↓

googlemap12

この中から好きなものを選ぶのも良いかと。

一番下にURLを入れる場所があります↓↓↓

googlemap13

予めアイコンを作っておく必要があります。

サイズは64px x 64pxで作ってますが32px x 32pxで表示されます。

サポートされている画像形式はjpg、png、bmp、gif(アニメーションは除く)です。

背景透明も可能です。

あらかじめ自分のサーバーにアップロードしておき、そのURLをコピーします↓↓↓

googlemap14

そのURLをテキストボックスに貼付けて『アイコンを追加』ボタンをクリックすると『Custom icons』というのが表示されます↓↓↓

googlemap15

この状態で反映されているようなのですが、念のため『OK』をクリックして吹き出し等を『x』で閉じます。

ピンが変わっていることを確認↓↓↓

googlemap16

次に、自分のWEBサイト等に埋め込む作業です。

画面左上の『共有』をクリック↓↓↓

googlemap20

ここで地図タイトルと説明を変更できますが、必要なければ『OK』をクリック↓↓↓

googlemap21

『アクセスできるユーザー』の『変更』をクリック↓↓↓

googlemap22

ここで『誰に見せるか』を選択できます。今回は皆に見せたいので『ウェブ上で一般公開』にチェックして『保存』をクリック↓↓↓

googlemap23

『アクセスできるユーザー』を確認して『完了』をクリック↓↓↓

googlemap24

戻ったボックスぼ下記の点3つをクリック↓↓↓

googlemap17

『自分のサイトに埋め込む』をクリック↓↓↓

googlemap18

これで埋め込みコードが発行されるのですが、『共有』の設定を忘れていると以下のエラーが出ます↓↓↓

googlemap19

正しく設定している場合は以下の表示です。

下記のiframeコードをコピーします↓↓↓

googlemap25

高さ、幅を調整して配置すれば完了です↓↓↓

googlemap26

参考:髙木歯科医院アクセス

ちなみに、ここで設定した情報はGoogleドライブに保存されているので、間違えて消さないようにしましょう↓↓↓

googlemap27

以上です。


オススメのレンタルサーバーはこちら↓↓↓

 

オススメのドメイン取得サービスはこちら↓↓↓

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.