javascriptgoogle-maps-api-3geoxml3

loading external JSON file for google map styling breaks subsequent map operations


I have learned from this post on SO how to safely load an external JSON styling file for google maps and avoid race conditions by using callback functions. However, the addition of that code seems to have broken all subsequent operations on the map that used to work before adding that code.

Here's a snippet that demonstrates the issue (commenting out lines 6-39 of the javascript and uncommenting lines 41-49 demonstrates everything else working except the styling).

How has adding the callback-based JSON map styling broken all the subsequent operations?

var map;
var myParser;
var markerClusterer;

function initMap() {
  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'https://api.myjson.com/bins/uvef2', true);
    const readyOK = 4;
    const responseOK = 200;
    xobj.onreadystatechange = function() {
      if (xobj.readyState === readyOK && xobj.status === responseOK) {
        callback(xobj.responseText);
      }
    };
    xobj.send(null);
  }
  var loaded_json;
  loadJSON(function(response) {
    loaded_json = JSON.parse(response);
 //   console.log("loaded json");
 //   console.log(loaded_json);
    var styledMapType = new google.maps.StyledMapType(loaded_json, {
      name: 'Map'
    });
    map = new google.maps.Map(document.getElementById('map'), {
      gestureHandling: 'greedy',
      center: {lat: 45.41, lng: -75.7},
      zoom: 14,
      mapTypeControlOptions: {
        mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map']
      }
    });
//    console.log("loaded map");
    map.mapTypes.set('styled_map', styledMapType);
    map.setMapTypeId('styled_map');
    console.log("styled_map set");
  });

/*   map = new google.maps.Map(document.getElementById('map'), {
    gestureHandling: 'greedy',
    center: {lat: 45.41, lng: -75.7},
    zoom: 14,
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map']
    }
  });
   */
	markerClusterer = new MarkerClusterer(map, [], {});
  myParser = new geoXML3.parser({
    map: map,
    zoom: false,
    markerOptions: {
      icon: {
        url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png", // url
        scaledSize: new google.maps.Size(32, 32) // 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 {
  height: 100%;
  ;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#map {
  height: 90%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>


Solution

  • The issue looks to be that the map object is not initialized yet when you create a new MarkerClusterer. In the log, you can see that the markers are parsed before the map is created. You could move that code into the loadJSON() function to ensure that the map is created before adding the markers. Here's a simple sample JSBin with the code moved into that function

    The code:

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Info windows</title>
        <style>
        html,
    body {
      height: 100%;
      ;
      width: 100%;
      padding: 0px;
      margin: 0px;
    }
    
    #map {
      height: 90%;
      width: 100%;
    }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
    <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
      <script>
    var map;
    var myParser;
    var markerClusterer;
    
    function initMap() {
      function loadJSON(callback) {
        var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open('GET', 'https://api.myjson.com/bins/uvef2', true);
        const readyOK = 4;
        const responseOK = 200;
        xobj.onreadystatechange = function() {
          if (xobj.readyState === readyOK && xobj.status === responseOK) {
            callback(xobj.responseText);
          }
        };
        xobj.send(null);
      }
      var loaded_json;
      loadJSON(function(response) {
        loaded_json = JSON.parse(response);
     //   console.log("loaded json");
     //   console.log(loaded_json);
        var styledMapType = new google.maps.StyledMapType(loaded_json, {
          name: 'Map'
        });
        map = new google.maps.Map(document.getElementById('map'), {
          gestureHandling: 'greedy',
          center: {lat: 45.41, lng: -75.7},
          zoom: 14,
          mapTypeControlOptions: {
            mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map']
          }
        });
    //    console.log("loaded map");
        map.mapTypes.set('styled_map', styledMapType);
        map.setMapTypeId('styled_map');
        console.log("styled_map set");
    
    
            markerClusterer = new MarkerClusterer(map, [], {});
      myParser = new geoXML3.parser({
        map: map,
        zoom: false,
        markerOptions: {
          icon: {
            url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png", // url
            scaledSize: new google.maps.Size(32, 32) // 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>
    `;
        </script>
      </head>
      <body>
        <div id="map"></div>
      </body>
    </html>