Why does this .kml file load at latitude zero/longitude zero?

I created this .kml file by hand, outlining an area in New Hampshire, US. It loads fine in Google MyMaps, but if I load it in Google Earth, it apparently gets placed at "Null Island" (latitude 0, longitude 0). What's wrong with the file?

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://earth.google.com/kml/2.0"> <Document>

<Placemark> 
 <LineString>
  <coordinates>
  -71.21122, 43.25277, 0.
  -71.20669, 43.24993, 0.
  -71.20720, 43.24918, 0.
  -71.20512, 43.24787, 0.
  -71.20566, 43.24733, 0.  
  -71.20576, 43.24718, 0.
  -71.20669, 43.24557, 0.
  -71.20763, 43.24572, 0.
  -71.20746, 43.24666, 0.
  -71.20855, 43.24638, 0.
  -71.20868, 43.24588, 0.
  -71.20961, 43.24596, 0.
  -71.21044, 43.24290, 0.
  -71.21673, 43.24390, 0.
  -71.21122, 43.25277, 0.
  </coordinates>
 </LineString>
</Placemark>

</Document> </kml>

Thank you

Solution

KML coordinates are longitude,latitude; no spaces allowed.

Your KML should be:

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://earth.google.com/kml/2.0"> <Document>

<Placemark> 
 <LineString>
  <coordinates>
  -71.21122,43.25277,0.
  -71.20669,43.24993,0.
  -71.20720,43.24918,0.
  -71.20512,43.24787,0.
  -71.20566,43.24733,0.  
  -71.20576,43.24718,0.
  -71.20669,43.24557,0.
  -71.20763,43.24572,0.
  -71.20746,43.24666,0.
  -71.20855,43.24638,0.
  -71.20868,43.24588,0.
  -71.20961,43.24596,0.
  -71.21044,43.24290,0.
  -71.21673,43.24390,0.
  -71.21122,43.25277,0.
  </coordinates>
 </LineString>
</Placemark>
</Document> </kml>

example displaying with the Google Maps Javascript API v3

code snippet:

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: {
      lat: 41.876,
      lng: -87.624
    },
  });
  const ctaLayer = new google.maps.KmlLayer({
    url: "http://www.geocodezip.com/geoxml3_test/kml/SO_20201106_removeSpaces.kml",
    map: map,
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>KML Layers</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>