geoxml3 パーサーのマーカー アイコンのカスタマイズに成功しましたが、markerclustererplus を導入すると、カスタマイズされた個々のアイコンが上書きされます。クラスタ アイコンの変更に関する情報は見つかりましたが、markerclustererplus で使用される個々のアイコンに関する情報は見つかりませんでした。
また、マーカーがクリックされたときに情報ウィンドウ (?) を表示するクリック機能も失いました。クリック リスナーを追加しようとしましたが、geoxml3 が生成するデフォルトの動作と同じポップアップ結果が生成されません。
ワーキングフィドル：http://jsfiddle.net/BartmanEH/z7bfmyo2/
var map;
var myParser;
var markerClusterer;
var markers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 45.4,
lng: -75.7
},
zoom: 14
});
markerClusterer = new MarkerClusterer(map, [], {});
myParser = new geoXML3.parser({
map: map,
// markerOptions: {
// icon: {
// url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png", // url
// scaledSize: new google.maps.Size(48, 48) // scaled size
// }
// },
// createMarker:function(placemark){
// var marker = new google.maps.Marker({position:placemark.latlng});
// google.maps.event.addListener(marker, "click", function(){
// //console.log(placemark.name);
// infoWindow.content = placemark.description;
// infoWindow.open(map, marker);
// });
// markerClusterer.addMarker(marker);
// },
zoom: false,
afterParse: useData
});
myParser.parseKmlString(file2kml);
function useData(docs) {
console.log("parsed " + docs[0].placemarks.length + " placemarks");
for (var i = 0; i < docs[0].placemarks.length; i++) {
var marker = new google.maps.Marker({
position:docs[0].placemarks[i].latlng,
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
scaledSize: new google.maps.Size(32, 32)
}
});
markers.push(marker);
}
//markerclusterer overrides custom icon!
markerClusterer.addMarkers(markers, true);
}
}
google.maps.event.addDomListener(window, 'load', initMap);
var file2kml = `<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>test placemarks</name>
<Style id="icon-1899-DB4436-labelson">
<IconStyle>
<color>ff3644db</color>
<scale>1</scale>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/red-dot.png</href>
</Icon>
<hotSpot x="32" xunits="pixels" y="64" yunits="insetPixels"/>
</IconStyle>
</Style>
<Placemark>
<name>Church Of Ascension</name>
<description><![CDATA[latitude: 45.410755<br>longitude: -75.681623]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.410755</value>
</Data>
<Data name="longitude">
<value>-75.681623</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.681623,45.410755,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Bank Street Dragon</name>
<description><![CDATA[latitude: 45.420032<br>longitude: -75.699788]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.420032</value>
</Data>
<Data name="longitude">
<value>-75.699788</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.699788,45.420032,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Place Bell Canada</name>
<description><![CDATA[latitude: 45.420214<br>longitude: -75.692603]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.420214</value>
</Data>
<Data name="longitude">
<value>-75.692603</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.692603,45.420214,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>The Royal Canadian Legion Dominion Command</name>
<description><![CDATA[latitude: 45.310682<br>longitude: -75.899762]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.310682</value>
</Data>
<Data name="longitude">
<value>-75.899762</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.899762,45.310682,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Lieutenant Colonel John By</name>
<description><![CDATA[latitude: 45.422076<br>longitude: -75.692515]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.422076</value>
</Data>
<Data name="longitude">
<value>-75.692515</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.692515,45.422076,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Oscar Peterson, the Street Musician</name>
<description><![CDATA[latitude: 45.42268<br>longitude: -75.693955]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.42268</value>
</Data>
<Data name="longitude">
<value>-75.693955</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.693955,45.42268,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Somerset Square</name>
<description><![CDATA[latitude: 45.406222<br>longitude: -75.722117]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.406222</value>
</Data>
<Data name="longitude">
<value>-75.722117</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.722117,45.406222,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Windsor Park Flood Control</name>
<description><![CDATA[latitude: 45.39149<br>longitude: -75.677548]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.39149</value>
</Data>
<Data name="longitude">
<value>-75.677548</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.677548,45.39149,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Frank Clair Statue</name>
<description><![CDATA[latitude: 45.397413<br>longitude: -75.683657]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.397413</value>
</Data>
<Data name="longitude">
<value>-75.683657</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.683657,45.397413,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Ottawa Mill St. Brewpub</name>
<description><![CDATA[latitude: 45.419537<br>longitude: -75.71263]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.419537</value>
</Data>
<Data name="longitude">
<value>-75.71263</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.71263,45.419537,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>David Perry Memorial Bench</name>
<description><![CDATA[latitude: 45.397002<br>longitude: -75.6743]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.397002</value>
</Data>
<Data name="longitude">
<value>-75.6743</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.6743,45.397002,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Companions of the Cross</name>
<description><![CDATA[latitude: 45.412132<br>longitude: -75.70911]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.412132</value>
</Data>
<Data name="longitude">
<value>-75.70911</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.70911,45.412132,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>The Sunburst Building</name>
<description><![CDATA[latitude: 45.419296<br>longitude: -75.699572]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.419296</value>
</Data>
<Data name="longitude">
<value>-75.699572</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.699572,45.419296,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Rideau Curling Club</name>
<description><![CDATA[latitude: 45.413011<br>longitude: -75.704687]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.413011</value>
</Data>
<Data name="longitude">
<value>-75.704687</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.704687,45.413011,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Carling Otrain Station </name>
<description><![CDATA[latitude: 45.397474<br>longitude: -75.709528]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.397474</value>
</Data>
<Data name="longitude">
<value>-75.709528</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.709528,45.397474,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Geese Artwork</name>
<description><![CDATA[latitude: 45.417308<br>longitude: -75.700673]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.417308</value>
</Data>
<Data name="longitude">
<value>-75.700673</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.700673,45.417308,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name><![CDATA[Saint Patrick\'s Basilica]]></name>
<description><![CDATA[latitude: 45.41667<br>longitude: -75.70057]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.41667</value>
</Data>
<Data name="longitude">
<value>-75.70057</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.70057,45.41667,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Headless Elephants</name>
<description><![CDATA[latitude: 45.409045<br>longitude: -75.688275]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.409045</value>
</Data>
<Data name="longitude">
<value>-75.688275</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.688275,45.409045,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Valour Bridge</name>
<description><![CDATA[latitude: 45.310651<br>longitude: -75.901318]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.310651</value>
</Data>
<Data name="longitude">
<value>-75.901318</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.901318,45.310651,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Marble Soccer Balls</name>
<description><![CDATA[latitude: 45.404574<br>longitude: -75.711718]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.404574</value>
</Data>
<Data name="longitude">
<value>-75.711718</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.711718,45.404574,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Shrine To Mary.</name>
<description><![CDATA[latitude: 45.414046<br>longitude: -75.708891]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.414046</value>
</Data>
<Data name="longitude">
<value>-75.708891</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.708891,45.414046,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Guigues Hall Saint Paul University</name>
<description><![CDATA[latitude: 45.408308<br>longitude: -75.676281]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.408308</value>
</Data>
<Data name="longitude">
<value>-75.676281</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.676281,45.408308,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Ottawa Chinese Bible Church</name>
<description><![CDATA[latitude: 45.41234<br>longitude: -75.680081]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.41234</value>
</Data>
<Data name="longitude">
<value>-75.680081</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.680081,45.41234,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Canadian Bank Note Company</name>
<description><![CDATA[latitude: 45.395734<br>longitude: -75.745783]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.395734</value>
</Data>
<Data name="longitude">
<value>-75.745783</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.745783,45.395734,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Dominion Arboretum</name>
<description><![CDATA[latitude: 45.391174<br>longitude: -75.704042]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.391174</value>
</Data>
<Data name="longitude">
<value>-75.704042</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.704042,45.391174,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>BiTe This</name>
<description><![CDATA[latitude: 45.395077<br>longitude: -75.747579]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.395077</value>
</Data>
<Data name="longitude">
<value>-75.747579</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.747579,45.395077,0
</coordinates>
</Point>
</Placemark>
</Document>
</kml>
`;#map {
height: 650px;
width: 100%;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<div id="map"></div>(1) markerclustererplus の個々のアイコンをカスタマイズするにはどうすればよいですか? 編集: アイコンのカスタマイズを、markerclusterer の配列のマーカーが作成される場所に移動しました。これにより、個々のマーカー アイコンがカスタマイズされているように見えますが、geoxml3 解析からのマーカーが残っています。最初に表示されないようにする必要があると思います。場合？
̶(̶2̶)̶ ̶I̶s̶ ̶t̶h̶e̶r̶e̶ ̶a̶ ̶w̶a̶y̶ ̶t̶o̶ ̶c̶r̶e̶a̶t̶e̶ ̶t̶h̶e̶ ̶m̶a̶r̶k̶e̶r̶c̶l̶u̶s̶t̶e̶r̶e̶r̶p̶l̶u̶s̶ ̶a̶r̶r̶a̶y̶ ̶w̶i̶t̶h̶o̶u̶t̶ ̶u̶s̶i̶n̶g̶ ̶a̶ ̶c̶u̶s̶t̶o̶m̶ ̶c̶r̶e̶a̶t̶e̶M̶a̶r̶k̶e̶r̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶i̶n̶ ̶g̶e̶o̶x̶m̶l̶3̶ ̶p̶a̶r̶s̶e̶r̶?̶ edit: I have figured this out by creating an array of the markers and using the markerclusterer object's .addMarkers method. Fiddle と Snippet は、markerclustererplus を使用するように編集されました。
