ハワイのWeb制作会社で働くダンサーのブログ

世界のヘイショーによる個人ブログ。テーマはサイト制作、マーケティング、SEO、アフィリエイト、ハワイ、ポケモン、スケボー、海外就職、ダンスなど。

【HTML講座】Googleマップ埋め込みカスタマイズでのスマホ対策、デザイン変更方法。

2017/02/16

今日はWebデザイン、HTMLコーディングについてです。

ホームページにGoogleマップを埋め込むのはとても簡単ですが、少しの手を加えることで劇的なカスタマイズが出来るということをご存知でしょうか??

 

方法は簡単。以下のコードをサイトにコピペしてみてください。

 

すると以下のようなマップの表示が現れると思います。

 

 

完成系はこんな感じです。

何が違うのかと言うと、

  • マップ上のスクロール操作が無効になっている
  • マップの色が変わっている
  • マーカーのアイコンが変わっている

の3点です。

ここからカスタマイズして目的地の住所や色調、アイコン画像を変更していきます。

 

 

まずは目的地を設定

 

目的地を設定するには

の中の数字の箇所を変更するだけでOK。

 

ここの数字はその地点の土地番号を示しているのですが、目的地の土地番号を調べる方法は以下の通りです。

 

map

 

Googleマップでの作業:

  1. 目的地にカーソルを合わせて右クリック
  2. 「この場所について」をクリック
  3. すると建物の名前と、土地番号が現れます

 

 

色を変更する

 

色を変更するには以下のカラーコードの箇所を変更します。

3行目のカラーコードを変更します。

 

 

マーカーのアイコン画像を変更する

 

マーカーのアイコンを変更するには、以下のコードを編集します

1行目と5行目を見ていただければ分かりますが、ここがアイコンの画像のURLパスになっています。

ここを自分がアップロードしたアイコン画像のURLに変更すればOKです。

 

 

スマホ対策に有効!

 

以上でカスタマイズは完了ですが、一番の肝はマップ上のスクロール操作が無効にしたことです。

これはスマホやMACのトラックパッドを利用するユーザーによって、ユーサビリティ上かなり重要です。

 

map

 

通常Googleマップの上でスクロール動作をすると地図の拡大縮小が行われるためにスクロールがそこで止まってしまって邪魔になりますが、今回のカスタマイズによりそれを防ぐことができます。これはでかい。

 

以上です!

カスタマイズしていきましょう。

 

 

-Webデザイン