秋田の総合広告代理店-WEB制作・グラフィック制作・映像制作・写真撮影・イベント企画-

2013/12/23 草皆 亮平

Google Mapに色を付ける方法

img_01

GoogleMapは今やホームページ作成の上で欠かせない存在になっています。しかしマップの色はどのサイトも同じでオリジナリティがありません。そこでマップに色を付け、サイトにちょっとしたアクセントをつけてみましょう!

まずはGoogleMapを設置してみる

サイトにGoogleMapを設置してみましょう。
まずはGoogle Map APIを読み込みます。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

次にヘッドタグに下記のJSを記述します。


HTMLの任意の場所にIDがmap-canvasのDIVタグを設置すると一般的なマップが表示されます。

マップに色をつけてみよう

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html(英語版)
http://code.prostaff1.com/sample/10_google-map/styledmaps/(日本語版)
↑このサイトからマップのスタイルを作成します。かなり細かく設定できます。

気に入ったマップができあがったら「JSON」を表示し中身をコピーし、stylesの変数に代入します。


はい!できあがり。今回は簡単なスタイルでしたが、いろいろ設定できるのでサイトにあったマップができると思います。

考察

googleマップのスタイルの設定が細かすぎて大変!!!




株式会社プロデュース・プロ

〒010-0001 秋田県秋田市中通6-1-65PPビルディング2F
TEL:018-884-3711 FAX:018-884-3722

ホームページ内に掲載している写真、テキストなどの著作権は、株式会社プロデュースプロに帰属します。 Copyright PRODUCE PRO INC.All Rights Reserved.