店舗・企業WEBサイト制作において、
GoogleMapの埋め込みは必須項目と呼べる時代となりました。
それに伴い、GoogleMapのデザインをオリジナルにカスタマイズしたいという要望が高まっています。
確かに、一般的なGoogmeMapを埋め込むよりも、
自分のサイトデザインに合わせてカスタマイズを施したGoogleMapを埋め込むことで、サイト全体にデザインコンセプトの一体感が生まれ、非常に見栄えがするサイトとなります。
しかし、GoogleMapのデザインカスタマイズは、
難易度が高いものなので、うまくできないと諦めてしまわれる方が多いのです。
それでは非常に勿体ないです。
このような背景を受け、
WEBの知識があまりない方でも簡単にGoogleMapのカスタマイズが行えるようにと用意されたサイトがあります。
それが、「Styled Map Wizard」です。
ここでは、「Styled Map Wizard」の基本的な使い方とカスタマイズ時の操作方法を見ていきましょう。
目次
「Styled Map Wizard」の基本の使い方
「Styled Map Wizard」の説明
「Styled Map Wizard」は、GoogleMapのカスタマイズを比較的簡単に行うための補助サイトです。
外部ページStyled Map Wizard
サイトが英語なので取っ付きづらさがありますが、
GoogleMapをカスタマイズするまでに、
- カスタマイザーでデザインを変更する
- 埋め込み用プログラムを取得する
- 自分のサイトに埋め込む
の３ステップでハイクオリティなカスタマイズが出来てしまう、
非常に簡単で便利なサイトです。
画面の説明
表示される画面は英語サイトですが、
以下のキャプチャのような構成となっています。
背景に表示されている地図は、
カスタマイザーの設定を変えると、リアルタイムでデザインが変わって見えるため、
直感的な印象の確認やデザインの微調整がしやすいのが特徴です。
スタイルを追加するときの操作
新しくスタイルを追加したいときは、
「Map Style」の「Add」をクリックします。
すると、今まで設定したカスタマイズの内容を引き継ぎつつ、
新しいデザインカスタマイズを行うためのブロックが追加されます。
スタイルを削除するときの操作
カスタマイズをしていて、
元に戻したいときや、カスタマイズをキャンセルしたいときなど、
今まで設定してきたスタイルを削除したい時があります。
そんなときは、「My Style」の該当するスタイル右上にある「ゴミ箱」アイコンをクリックしましょう。
埋め込み用プログラムを取得するときの操作
埋め込み用プログラムを取得する時は、「Map Stype」右下の「Show JOIN」をクリックします。
すると、現在表示されている地図を埋め込むためのソースコードが表示されるので、これをコピーしましょう。
コピーしたソースコードを自分のサイト上でGoogleMapを埋め込んでいるスクリプトの中にペーストします。
ペーストする位置は、GoogleMapの埋め込み用メソッドの中に貼り付けましょう。
オリジナルGoogleMap埋め込み定義のプログラム記述法
GoogleMapの埋め込みの方法がわからない方は、以下の記事を参考にしてみてください。
これで、オリジナルデザインのGoogleMapがサイト上で表示されるようになります。
「Styled Map Wizard」で地図デザインをカスタマイズする方法
地図全体にカラーマスクをかける方法
地図全体の色を単色のカラーマスクをかける場合は、
「Feature type」で「All」を選択し、カラーパレッド「Hue」で色相を選択します。
海の色を変更する
単色で変更する
単色で海の色を変更する場合（「伊勢湾」などのテキストも塗りつぶし）は、
「Feature type」で「All」→「Water」を選択し、「Color」で色を選択します。
背景色のみ変更する
海の背景色のみを変更する場合は、
「Feature type」で「All」→「Water」を選択し、「Hue」で色相を選択します。
市街地の色を変更する
市街地の色を変更する場合は、
「Feature type」で「All」→「Landscape」→「Man made」を選択し、
「Color」で色または「Hue」で色相を選択します。
市街地以外の自然地域の色を変更する
市街地以外の自然地域の色を変更する場合は、
「Feature type」で「All」→「Landscape」→「Nutural」を選択し、
「Color」で色または「Hue」で色相を選択します。
施設の色を変更する
公園や公共施設など、地図上に登録がある施設の色を変更する場合、
「Feature type」で「All」→「Point of interest」を選択し、
「Color」で色または「Hue」で色相を選択します。
なお、さらに細かい設定として、
「Point of interest」から更に施設を絞り込んで設定することができます。
施設の一覧は以下のとおりです。
| Attraction | アトラクション施設 |
|---|---|
| Business | ビジネス施設 |
| Government | 公共・行政関係施設 |
| Medical | 医療施設 |
| Park | 公園 |
| Place of works | 教会などの礼拝施設 |
| School | 教育機関 |
| Sports complex | スポーツ施設 |
道路の色を変更する
道路の色を変更する場合は、
「Feature type」で「All」→「Load」を選択し、
「Color」で色または「Hue」で色相を選択します。
なお、更に細かい設定として、
「Load」から更に細かく分類して道路の色を変更することができます。
道路の一覧は以下のとおりです。
| Highway→Contorolled access | 高速道路 |
|---|---|
| Arterial | 国道・県道・環状線 |
| Local | 地方道 |
