googleマップのデザインのカスタマイズ

現在map javascript api を使用して地図作りをしております。
スタイルを変更したく、snazzymapsを利用してスタイルを当てはめたのですが全く反映されません。
どなたか解決策をご教授お願い致します。

JavaScript
1<script type="text/javascript">
2var map = null;
3var infowindow = new google.maps.InfoWindow();
4var gmarkers = [];
5var i = 0;
6var styleOptions =
7  [
8{
9        "featureType": "administrative",
10        "elementType": "all",
11        "stylers": [
12            {
13                "saturation": "-100"
14            },
15            {
16                "visibility": "off"
17            }
18        ]
19    },
20    {
21        "featureType": "landscape",
22        "elementType": "all",
23        "stylers": [
24            {
25                "saturation": -100
26            },
27            {
28                "lightness": 65
29            }
30        ]
31    },
32    {
33        "featureType": "poi",
34        "elementType": "all",
35        "stylers": [
36            {
37                "saturation": -100
38            },
39            {
40                "lightness": "50"
41            }
42        ]
43    },
44    {
45        "featureType": "poi.attraction",
46        "elementType": "all",
47        "stylers": [
48            {
49                "visibility": "off"
50            }
51        ]
52    },
53    {
54        "featureType": "poi.business",
55        "elementType": "all",
56        "stylers": [
57            {
58                "visibility": "off"
59            },
60            {
61                "saturation": "-61"
62            },
63            {
64                "lightness": "25"
65            },
66            {
67                "gamma": "0.75"
68            },
69            {
70                "weight": "2.76"
71            }
72        ]
73    },
74    {
75        "featureType": "poi.business",
76        "elementType": "geometry.fill",
77        "stylers": [
78            {
79                "visibility": "on"
80            }
81        ]
82    },
83    {
84        "featureType": "poi.medical",
85        "elementType": "all",
86        "stylers": [
87            {
88                "visibility": "off"
89            }
90        ]
91    },
92    {
93        "featureType": "poi.park",
94        "elementType": "all",
95        "stylers": [
96            {
97                "visibility": "off"
98            }
99        ]
100    },
101    {
102        "featureType": "poi.place_of_worship",
103        "elementType": "all",
104        "stylers": [
105            {
106                "visibility": "off"
107            }
108        ]
109    },
110    {
111        "featureType": "poi.school",
112        "elementType": "all",
113        "stylers": [
114            {
115                "visibility": "off"
116            }
117        ]
118    },
119    {
120        "featureType": "poi.sports_complex",
121        "elementType": "all",
122        "stylers": [
123            {
124                "visibility": "on"
125            }
126        ]
127    },
128    {
129        "featureType": "road",
130        "elementType": "all",
131        "stylers": [
132            {
133                "saturation": "-100"
134            }
135        ]
136    },
137    {
138        "featureType": "road",
139        "elementType": "labels",
140        "stylers": [
141            {
142                "visibility": "off"
143            }
144        ]
145    },
146    {
147        "featureType": "road.highway",
148        "elementType": "all",
149        "stylers": [
150            {
151                "visibility": "on"
152            }
153        ]
154    },
155    {
156        "featureType": "road.arterial",
157        "elementType": "all",
158        "stylers": [
159            {
160                "lightness": "30"
161            }
162        ]
163    },
164    {
165        "featureType": "road.local",
166        "elementType": "all",
167        "stylers": [
168            {
169                "lightness": "40"
170            }
171        ]
172    },
173    {
174        "featureType": "transit",
175        "elementType": "all",
176        "stylers": [
177            {
178                "saturation": -100
179            }
180        ]
181    },
182    {
183        "featureType": "water",
184        "elementType": "geometry",
185        "stylers": [
186            {
187                "hue": "#ffff00"
188            },
189            {
190                "lightness": -25
191            },
192            {
193                "saturation": -97
194            }
195        ]
196    },
197    {
198        "featureType": "water",
199        "elementType": "labels",
200        "stylers": [
201            {
202                "lightness": -25
203            },
204            {
205                "saturation": -100
206            }
207        ]
208    }
209  ];
210 
211function inicializar() {
212  var option = {
213    zoom: 12,
214    center: new google.maps.LatLng(34.3825853, 132.4584538),
215  };
216  map = new google.maps.Map(document.getElementById("map"), option);
217  google.maps.event.addListener(map, "click", function() {infowindow.close();});
218
219 
220  // ポイントの追加
221  var point = new google.maps.LatLng(######, ######);
222  var marker = create_maker(point, "info", "<img src='######' /><br><a href='URL' target='_blank'>######</a><br>住所:######<br>TEL:######");
223 
224  var point = new google.maps.LatLng(######, ######);
225  var marker = create_maker(point, "info", "<img src='######' /><br><a href='URL' target='_blank'>######</a>");
226 
227  var point = new google.maps.LatLng(######, ######);
228  var marker = create_maker(point, "info", "<img src='######' /><br><a href='URL' target='_blank'>######</a>");
229
230  var point = new google.maps.LatLng(######, ######);
231  var marker = create_maker(point, "info", "<img src='######' /><br><a href='URL' target='_blank'>######</a>");
232
233  var point = new google.maps.LatLng(######, ######);
234  var marker = create_maker(point, "info", "<img src='######' /><br><a href='URL' target='_blank'>######</a>");
235
236  var point = new google.maps.LatLng(######, ######);
237  var marker = create_maker(point, "info", "<img src='######' /><br><a href='URL' target='_blank'>######</a>");
238}
239 
240function create_maker(latlng, label, html) {
241  var marker = new google.maps.Marker({position: latlng, map: map, title: label});
242  google.maps.event.addListener(marker, "click", function() {
243    infowindow.setContent(html);
244    infowindow.open(map, marker);
245  });
246  gmarkers[i] = marker;
247    i++;
248    return marker;
249}
250 
251function map_click(i) {
252  google.maps.event.trigger(gmarkers[i], "click");
253}
254
255google.maps.event.addDomListener(window, "load", inicializar);
256</script>

以上、宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1  var option = {
2    zoom: 12,
3    styles: styleOptions,
4    center: new google.maps.LatLng(34.3825853, 132.4584538),
5  };

投稿2019/08/27 10:15

kei344

総合スコア69407

stellanova

2019/08/27 22:59

kei344様ご回答有難うございます。ご指摘いただいた部分で反映できました。本当に助かりました。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

googleマップのデザインのカスタマイズ

関連した質問