为 google 地图样式加载外部 JSON 文件会中断后续的地图操作

Question

我从 this post on SO 那里学到了如何安全地为 google 地图加载外部 JSON 样式文件并通过使用回调函数避免竞争条件。但是，添加该代码似乎破坏了在添加该代码之前在地图上正常工作的所有后续操作。

这是一个演示问题的片段（注释掉 javascript 的第 6-39 行并取消注释第 41-49 行演示了除了样式之外的所有其他工作）。

添加基于回调的 JSON 地图样式如何破坏所有后续操作？

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>

Answer 1

问题似乎是在您创建新的 MarkerClusterer 时 map 对象尚未初始化。在日志中，您可以看到在创建地图之前解析了标记。您可以将该代码移动到 loadJSON() 函数中，以确保在添加标记之前创建地图。这是一个 simple sample JSBin，代码已移入该函数

代码：

<!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>

为 google 地图样式加载外部 JSON 文件会中断后续的地图操作

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

javascript

google-maps-api-3

geoxml3