GoogleMapの色を変更する。 | テクニカルノート

［１］まずは、こちらのサイトさんで、基本のコードを生成したものを使わせていただきます。
http://creator.aainc.co.jp/archives/3752

［２］次に、こちらのサイトさんで、いい感じのデザインの配色を選んで、スタイルデータのコードを取得します。
https://snazzymaps.com/

で、配色を変更するには、［１］で取得したコードのスタイル部分を書き換えます。

var styleOptions = [{
		"stylers": [{ "hue": '#003366' }]
	}];

var styleOptions = [{

"stylers": [{ "hue": '#003366' }]

}];

のところの中身を削除して、

var styleOptions = 

;

var styleOptions =

;

［２］で取得したスタイルデータのコードをコピペします。

var styleOptions =
/*ここに貼り付けます*/
;

var styleOptions =

/*ここに貼り付けます*/

;

で、コードをそのまま貼り付けたらOK。
簡単でした。

あと、このままだとアイコンが表示されないので、もうすこし書き換えます。
アイコンをオリジナル画像としたい場合は、アイコン画像を作って、［１］の

/*アイコン設定*/
var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/
new google.maps.Size(70,84),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);

/*アイコン設定*/

var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/

new google.maps.Size(70,84),/*アイコンサイズ*/

new google.maps.Point(0,0)/*アイコン位置*/

);

の、/icon.png　で指定します。
new google.maps.Size(70,84),/*アイコンサイズ*/ で画像サイズも変更することを忘れずに。

アイコンをデフォルトに戻したいときは、［１］の

var markerOptions = {
position: latlng,
map: map,
icon: icon,

var markerOptions = {

position: latlng,

map: map,

icon: icon,

の、icon: icon,　の行だけを削除すればOK。

マウスホイールでズームしないようにするには、myOptionのところに、scrollwheel: false　を追加する。

var myOptions = {
zoom: 17, /*拡大比率*/
center: latlng,
scrollwheel: false,
mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
};

var myOptions = {

zoom: 17, /*拡大比率*/

center: latlng,

scrollwheel: false,

mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }

};