Search code examples
google-mapskml

KML layer not loading


I'm trying to load a simple KML layer on a Google Map. I cannot make it work for a specific layer, while, at the same time, other similar KML layers load fine. Here is the minimal version of the code: https://jsfiddle.net/eundas/0fhqmocv/4/ Why does this not work? Is it something with my code or with the structure of the KML? I would appreciated any light on this.

var map;
var options = {
  zoom: 5,
  center: new google.maps.LatLng(-33.5, -70),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scaleControl: true
};
map = new google.maps.Map(document.getElementById("mapcanvas"), options);

var Coquimbo4204Layer = new google.maps.KmlLayer({
    url: 'https://drive.google.com/uc?export=download&id=1bCBH784phTY_wK0WZiAbbDRlXb1dJsv7'
});
google.maps.event.addListener(Coquimbo4204Layer, 'status_changed', function() {
console.log(Coquimbo4204Layer.getStatus());
})
Coquimbo4204Layer.setMap(map);

Solution

  • With the posted code, I get FETCH_ERROR, which according to the documentation means: The document could not be fetched.

    It works if the url is http: rather than https: (that seems to be an issue with Google Drive).

    Related questions:

    proof of concept fiddle

    screenshot of working map

    code snippet:

    var map;
    var options = {
      zoom: 5,
      center: new google.maps.LatLng(-33.5, -70),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scaleControl: true
    };
    map = new google.maps.Map(document.getElementById("mapcanvas"), options);
    
    var Coquimbo4204Layer = new google.maps.KmlLayer({
        // url: 'https://drive.google.com/uc?export=download&id=1bCBH784phTY_wK0WZiAbbDRlXb1dJsv7'
        url: 'http://drive.google.com/uc?export=download&id=1bCBH784phTY_wK0WZiAbbDRlXb1dJsv7'
    });
    google.maps.event.addListener(Coquimbo4204Layer, 'status_changed', function() {
    console.log(Coquimbo4204Layer.getStatus());
    })
    Coquimbo4204Layer.setMap(map);
    #mapcanvas {
      height: 500px;
      width: 500px;
      background: blue;
      margin: 0px;
      padding: 0px;
    }
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    <div id="mapcanvas">CANVAS</div>