▼jquery.gmap3.js
https://github.com/bumberboom/jquery.gmap3/blob/master/js/jquery.gmap3.js
表示される地図の色を変えようとして、コードをいじっているのですが、上手く変更されません・・・orz
表示させるマップは1つだけですので「jquery.gmap3.js」をいじっています。
修正箇所が分かる方は教えていただければ助かります。
お願い致します。m(_ _)m
jquery.gmap3.jsの42行目、43行目を編集します。
function addMap($self, mpOpt) { var opt = { zoom : mpOpt.zoom, center : new google.maps.LatLng(mpOpt.latitude, mpOpt.longitude), mapTypeId : mpOpt.mapTypeId, navigationControl : mpOpt.navigationControl, mapTypeControl : mpOpt.mapTypeControl, scaleControl : mpOpt.scaleControl,//変更 styles: mpOpt.styles//追加 };
map生成前に、予め変更したいスタイルをJSON形式で記述します。
var styles = [ { stylers: [ { "hue": "#0000ff" }, { "saturation": -20 }, { "lightness": 5 }, { "gamma": 1.1 } ] } ];
呼び出し時にstylesをオプションとして追加します。
$("#gMap").gmap3({ address: '外神田', zoom: 16, navigationControl: true, mapTypeControl: true, scaleControl: true, styles:styles });
Google Maps JavaScript API v3を使用してください。
https://developers.google.com/maps/documentation/javascript/styling?hl=ja
スタイル情報を生成するジェネレータまで用意されています。
マップ スタイル設定ウィザード
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
ウイザードの説明画像は、こちら(http://meusonho41.com/blog/2013/09/12/591/)参考に