少し欲張りですが、styledMapTypeでスタイル設定したGoogleマップにカスタムマーカーを複数立てたいのですが、下記のコードだと表示されません。
JavaScript初心者です。アドバイスいただけないでしょうか。
※icon: '***.png' // 入れ込みたい画像 は仮です。
※ちなみにこの地図はWordpressで作成したHPのフッターに表示させる予定です。
lang
1 var map; 2 var marker = []; 3 var infoWindow = []; 4 var markerData = [ // マーカーを立てる場所名・緯度・経度 5 { 6 name: '場所1', 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を使って複数のマーカーと吹き出しを設置してみる
・マップのスタイル設定を開始する
ご回答お待ちしております。
回答1件
あなたの回答
tips
プレビュー