人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページにグーグルマップを表示させるために「jquery.gmap3.js」を使っています。

▼jquery.gmap3.js
https://github.com/bumberboom/jquery.gmap3/blob/master/js/jquery.gmap3.js


表示される地図の色を変えようとして、コードをいじっているのですが、上手く変更されません・・・orz

表示させるマップは1つだけですので「jquery.gmap3.js」をいじっています。

修正箇所が分かる方は教えていただければ助かります。
お願い致します。m(_ _)m


●質問者: kana-pop
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● ラフティング
●0ポイント

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/)参考に


2 ● ぽけっとしすてむ
●500ポイント ベストアンサー

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
});

f:id:psne:20150403051342p:image
スタイルが適用されます。


kana-popさんのコメント
ぽけっとしすてむ様 ご回答ありがとうございます。 パーフェクトでございます。m(_ _)m
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ