javascriptmarkerclusterergeoxml3

markerclusterer overrides custom individual geoxml3 marker icon


I have successfully customized the marker icon for a geoxml3 parser, however, introducing markerclustererplus overrides the customized individual icon. I have found information about changing the cluster icons but not about the individual icon used by markerclustererplus.

I've also lost the click functionality that displays an infowindow(?) when a marker is clicked. I tried adding a click listener but it doesn't produce the same popup result as the default behaviour that geoxml3 produces.

Working fiddle: 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) How can I customize the markerclustererplus individual icon? edit: I moved the icon customization to where the marker is created for the array for markerclusterer and that seems to customize the individual marker icon, however, there are residual markers from the geoxml3 parsing I think I need to prevent from being displayed in the first case?

̶(̶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 and Snippet edited to use markerclustererplus now.


Solution

  • MarkerClusterer doesn't change the markers. Your code is using the default icon for the markers you are adding to the MarkerClusterer. Your createMarker function (from your fiddle, not your code snippet), doesn't set the icon property of the marker, which means it creates a marker with the default icon:

    createMarker:function(placemark){
      var marker = new google.maps.Marker({position:placemark.latlng});
      markerClusterer.addMarker(marker);
    },
    

    corrected createMarker function (uses the correct icon):

    createMarker: function(placemark) {
      var marker = new google.maps.Marker({
        position: placemark.latlng,
        icon: {
          url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png", // url
          scaledSize: new google.maps.Size(48, 48) // scaled size
        }
      });
      markerClusterer.addMarker(marker);
    },
    

    proof of concept fiddle

    enter image description here

    code snippet:

    var map;
    var myParser;
    var markerClusterer;
    
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: 45.4,
          lng: -75.7
        },
        zoom: 14
      });
      var infowindow = new google.maps.InfoWindow();
      markerClusterer = new MarkerClusterer(map, [], {imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"});
      myParser = new geoXML3.parser({
        map: map,
        zoom: false,
        singleInfowindow: true,
        infoWindow: infowindow,
        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 = myParser.createMarker(placemark);
          markerClusterer.addMarker(marker);
          return marker;
        },
        afterParse: useData
      });
      myParser.parseKmlString(file2kml);
    
      function useData(docs) {
        console.log("parsed " + docs[0].placemarks.length + " placemarks");
      }
    }
    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>
    `;
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      padding: 0px;
      margin: 0px;
    }
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    <script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
    <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
    <div id="map"></div>