why does the file load at latitude zero or longitude zero?

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>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top