サイトのデザインに合わせたGoogle Mapを表示しよう

Pocket

googlemap

こんにちは。
宮崎から景山がお送りします。

初めて宮崎に来ました。
自分がどこを歩いているのかさっぱりわかりません。

GoogleMapがなければ家にたどり着くことすらできなかったでしょう。
Google先生に感謝です。

GoogleMapに頼りまくりな私ですが、サイトにGoogleMapを表示させる事は多いはず。

そこで、本日はGoogleMapもサイトのテイストに合わせたデザインにカスタマイズする方法を紹介します。

 

geniusmap

 

まずは、何はともあれGoogleMapで表示させたい場所を表示させましょう。

map01

 

普通にサイトにMapを表示させるだけなら、左上の三本線のメニューから
地図を共有または埋め込むから、埋め込むを選択してタグを埋め込めばよいです。

ですが、カスタマイズする場合はGoogleMap APIを使います。


 

【Google Map カスタマイズ】

  1. マップの表示
  2. デザインの適用
  3. アイコンの変更

を行います。下記の記述が表示させるコードとプログラムです。

こちらのコードをコピペで、マップのデザインを変更できればよいのですが、多少の設定が必要です。
【変更の必要な箇所】

  • 6行目 Google Map APIの読み込み
  • 9行目 マップを表示させる関数の読み込み
  • 11行目 マップを表示させる領域を確保
  • 16行目 マップの表示させたい場所を指定
  • 29〜35行目 マップのデザインの記述
  • 43〜45行目 アイコンの設定

太字の部分の変更が特に重要です。

【16行目の座標】

表示させたい場所で右クリック

スクリーンショット 2016-02-29 2.47.39

この場所についてを選択。

座標が表示されるので、座標をクリック。

スクリーンショット 2016-02-29 2.49.23

地図の検索ボックスが検索場所から、座標に変更されるのでそれをコピー。

スクリーンショット 2016-02-29 2.50.17

16行目の記述の座標にペーストします。

 

【29〜35行目 マップのデザインの変更】

こちらは、便利なサイトがあります。

Google Maps API Styled Map Wizard

デザインを変更するコードを生成してくれます。

細かい設定でなければ、簡単にできます。

サイトが表示されたら、右上のボックスから表示させたい場所を検索。

スクリーンショット 2016-02-29 2.58.36

画面左に表示されている項目から変更したい項目を選ぶだけです。

スクリーンショット 2016-02-29 3.02.04

上の図は、Hue(色相)をクリックしただけです。

様々な項目を試してみてください。

コードを生成したい場合は、下図の左下Show JSONをクリック。

スクリーンショット 2016-02-29 3.03.58

スクリーンショット 2016-02-29 3.05.37

表示されたコードを29〜35行目の

var styleOptions =

の後にペーストすれば良いです。※ ]; カッコの後にセミコロンを入れてください。

より細かく設定したい場合は右のメニューのAddをクリックで追加できます。

スクリーンショット 2016-02-29 3.12.32

 

スクリーンショット 2016-02-29 3.13.45

 

最後にアイコンの変更方法

【43〜45行目の記述】

用意したアイコンのパスを記述すれば表示されます。

43行目にパスをいれる。

 

これらの変更でマップをカスタマイズすることができます。

スクリーンショット 2016-02-29 3.46.36

 

また、デザインサンプルのあるサイトSnazzymapsなどもあるので色々試してみてください。

それではっ!!