ロゴ

デザインはShikisya Designへ!

ページトップへ

お問合せ

2014.07.30
Google Map のカスタマイズ
[記事のカテゴリ]ウェブデザイン
サイトトップ > ブログトップ > ウェブデザイン > Google Map のカスタマイズ

簡単に自分の好きなデザインにカスタマイズ出来るGoogle Mapの作り方をご紹介します。

Google Mapは便利だけど他のデザインにあわないから使いたくないと言う方は多いのではないでしょうか?
弊社ホームページのアクセスに使用しているGoogle Mapも、デザインに併せてカスタマイズしたものです。

【カスタマイズ例】


やり方は何種類かある様ですが、今回使用したAPIはこちらです。
How to use the Styled Maps Wizard
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

英字で少し分かりづらいですが、簡単にご説明します。
1.画面左のFeature typeを選択し、
 『Landscape』→『Natural』を選択。

2.続いてElement type
 『ALL』→『Geometry』→『Fill』を選択。

3.続いて『Clor』にチェックをして、
 スライダを自分の好きな色に変更。

4.右のウィンドウ中の『Add』を押して保存。


ノーマルのGoogle Map

20140730-a.jpg


カスタマイズしたGoogle Map


20140730-b.jpg




他にも、線路の色を変えたり、、、

20140730-c.jpg


道路の色を変えたり、、、

20140730-d.jpg


様々なカスタマイズが出来ます。
カスタマイズが完成したら、画面右下の『Show JSON』をクリックして、
JSファイルを書き出します。


日本語版のカスタマイズサイトは非公式ですがありますので、こちらの方が分かりやすいかもしれません。
日本語版 Google Maps API Styled Map Wizard

ぜひ一度お試しを。



【参考サイト】
http://liginc.co.jp/web/tool/browser/63680
http://blog.prostaff1.com/?p=1150