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);
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:
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>