styledMapTypeでスタイルを指定したGoogleマップにカスタムマーカーを複数立てたい

少し欲張りですが、styledMapTypeでスタイル設定したGoogleマップにカスタムマーカーを複数立てたいのですが、下記のコードだと表示されません。
JavaScript初心者です。アドバイスいただけないでしょうか。

※icon: '***.png' // 入れ込みたい画像は仮です。
※ちなみにこの地図はWordpressで作成したHPのフッターに表示させる予定です。

lang
1      var map;
2      var marker = [];
3      var infoWindow = [];
4      var markerData = [ // マーカーを立てる場所名・緯度・経度
5        {
6             name: '場所１',
7             lat: 43.184732,
8              lng: 141.008179,
9              icon: '***.png' // 入れ込みたい画像
10       }, {
11              name: '場所2',
12           lat: 43.19748893458981,
13              lng: 140.99967308342457,
14              icon: '***.png' 
15       }
16      ];
17
18      function initMap() {
19        var styledMapType = new google.maps.StyledMapType(
20            [
21              {elementType: 'geometry', stylers: [{color: '#ffffff'}]},
22              {elementType: 'labels', stylers: [{visibility: "off"}]},
23              {elementType: 'labels.text.fill', stylers: [{color: '#ffffff'}]},
24              {elementType: 'labels.text.stroke', stylers: [{color: '#ffffff'}]},
25              {
26                featureType: 'administrative',
27                elementType: 'geometry.stroke',
28                stylers: [{color: '#ffffff'}]
29              },
30              {
31                featureType: 'administrative.land_parcel',
32                elementType: 'geometry.stroke',
33                stylers: [{color: '#ffffff'}]
34              },
35              {
36                featureType: 'administrative.land_parcel',
37                elementType: 'labels.text.fill',
38                stylers: [{color: '#ffffff'}]
39              },
40              {
41                featureType: 'landscape.natural',
42                elementType: 'geometry',
43                stylers: [{color: '#ffffff'}]
44              },
45              {
46                featureType: 'poi',
47                elementType: 'geometry',
48                stylers: [{color: '#ffffff'}]
49              },
50              {
51                featureType: 'poi',
52                elementType: 'labels.text.fill',
53                stylers: [{color: '#ffffff'}]
54              },
55              {
56                featureType: 'poi.park',
57                elementType: 'geometry.fill',
58                stylers: [{color: '#ffffff'}]
59              },
60              {
61                featureType: 'poi.park',
62                elementType: 'labels.text.fill',
63                stylers: [{color: '#ffffff'}]
64              },
65              {
66                featureType: 'road',
67                elementType: 'geometry',
68                stylers: [{color: '#ffffff'}]
69              },
70              {
71                featureType: 'road.arterial',
72                elementType: 'geometry',
73                stylers: [{color: '#ffffff'}]
74              },
75              {
76                featureType: 'road.highway',
77                elementType: 'geometry',
78                stylers: [{color: '#ffffff'}]
79              },
80              {
81                featureType: 'road.highway',
82                elementType: 'geometry.stroke',
83                stylers: [{color: '#ffffff'}]
84              },
85              {
86                featureType: 'road.highway.controlled_access',
87                elementType: 'geometry',
88                stylers: [{color: '#ffffff'}]
89              },
90              {
91                featureType: 'road.highway.controlled_access',
92                elementType: 'geometry.stroke',
93                stylers: [{color: '#ffffff'}]
94              },
95              {
96                featureType: 'road.local',
97                elementType: 'labels.text.fill',
98                stylers: [{color: '#ffffff'}]
99              },
100              {
101                featureType: 'transit.line',
102                elementType: 'geometry',
103                stylers: [{color: '#ffffff'}]
104              },
105              {
106                featureType: 'transit.line',
107                elementType: 'labels.text.fill',
108                stylers: [{color: '#ffffff'}]
109              },
110              {
111                featureType: 'transit.line',
112                elementType: 'labels.text.stroke',
113                stylers: [{color: '#ffffff'}]
114              },
115              {
116                featureType: 'transit.station',
117                elementType: 'geometry',
118                stylers: [{color: '#ffffff'}]
119              },
120              {
121                featureType: 'water',
122                elementType: 'geometry.fill',
123                stylers: [{color: '#ffffff'}]
124              },
125              {
126                featureType: 'water',
127                elementType: 'labels.text.fill',
128                stylers: [{color: '#ffffff'}]
129              }
130            ],
131            {name: 'カスタムマップの名前'});
132
133        // Create a map object, and include the MapTypeId to add
134        // to the map type control.
135        var mapLatLng = new google.maps.LatLng({lat: markerData[0].lat, lng: markerData[0].lng
136        });
137          map = new google.maps.Map(document.getElementById('map'), {
138          center: {lat: 43.1917959, lng: 140.9959227},
139          zoom: 13,
140          mapTypeControlOptions: {
141            mapTypeIds: ['styled_map', 'roadmap', 'satellite', 'hybrid', 'terrain']
142          }
143        });
144
145        // マーカー毎の処理
146         for (var i = 0; i < markerData.length; i++) {
147                markerLatLng = new google.maps.LatLng({
148                 lat: markerData[i].lat, lng: markerData[i].lng
149                }); // 緯度経度のデータ作成
150                marker[i] = new google.maps.Marker({ // マーカーの追加
151                 position: markerLatLng, // マーカーを立てる位置を指定
152                 map: map // マーカーを立てる地図を指定
153                });
154         
155             infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
156                 content: '<div class="map">' + markerData[i].name + '</div>' // 吹き出しに表示する内容
157               });
158         
159             markerEvent(i); // マーカーにクリックイベントを追加
160         }
161         
162           marker[0].setOptions({
163                icon: {
164                 url: markerData[0].icon// マーカーの画像を変更
165               }
166           });
167        }
168         
169        // マーカーにクリックイベントを追加
170        function markerEvent(i) {
171            marker[i].addListener('click', function() { // マーカーをクリックしたとき
172              infoWindow[i].open(map, marker[i]); // 吹き出しの表示
173          });
174        }
175
176        //Associate the styled map with the MapTypeId and set it to display.
177        map.mapTypes.set('styled_map', styledMapType);
178        map.setMapTypeId('styled_map');
179
180      }
181

参考URLは以下です。
・Google Maps APIを使って複数のマーカーと吹き出しを設置してみる
・マップのスタイル設定を開始する

ご回答お待ちしております。

Lhankor_Mhy

2018/03/28 11:13

「まだ回答を求めています」とのことですが、sousukeさんのご回答を試してみて上手くいかなかった、ということでしょうか。それでしたら、そのように補足願います。

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

回答1件

ベストアンサー

セオリー通りnew google.maps.Markerでurl指定すればいいのでは？
あとインデントがめちゃくちゃです。

javascript
1                marker[i] = new google.maps.Marker({ // マーカーの追加
2                 position: markerLatLng, // マーカーを立てる位置を指定
3                 map: map, // マーカーを立てる地図を指定
4                 icon: markerData[0].icon
5                });
6