KML layer not loading - google-maps

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:
The KML file included in google drive that does not recognize
KML not shown when loaded with javascript API to google maps
proof of concept fiddle
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>

Related

Remove non-KML item from KMZ archive displayed on Google Map

I am loading a KMZ on a Google Map using google.maps.KmlLayer. The KMZ contains a KML layer and some image files. I would like to display only the KML file on my map, but the image files are added as well.
Is there any way to remove non-KML elements (like a PNG file) from a KMZ archive displayed using google.maps.KmlLayer? I can't seem to find the PNGs as elements in the DOM, otherwise I'd just hide or remove them that way.
One possible solution might be to download the KMZ to the server, extract only the KML file, and add that to the map. But I'd like to try to keep this on the client-side if possible.
Here is an example of a KMZ archive that includes two PNG files (in this case, I'd only want to remove one of them, legend.png):
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {
lat: 41.876,
lng: -87.624
}
});
}
initMap();
var kmlUrl = 'https://www.weather.gov/source/crh/shapefiles/wwa.kmz';
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map" style="min-width: 800px; min-height: 660px"></div>
Per the documentation there is a KmlOptions property that disables the display of ScreenOverlays:
screenOverlays
Type: boolean
Whether to render the screen overlays. Default true.
Setting it to true removes that legend.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {
lat: 41.876,
lng: -87.624
}
});
}
initMap();
var kmlUrl = 'https://www.weather.gov/source/crh/shapefiles/wwa.kmz';
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map,
screenOverlays: false
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

Creating simple Google maps with multiple markers to website

I created google map with multiple markers to my website with "Google My Maps" tool and my code looks like this:
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1PdcME79x-maD5xuiVEi4C777aL4" width="640" height="480"></iframe>
It was really quick and simple without any code writting but what I don't like is the header bar which is showing the name and share button. Can I somehow hide this bar? Thank you.
You can get the link to the KML from that "MyMap":
http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4
And use that to populate a KmlLayer in a Google Maps Javascript API v3 map:
var kmlLayer = new google.maps.KmlLayer({
url: "http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4",
map:map
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var kmlLayer = new google.maps.KmlLayer({
url: "https://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4",
map: map
});
google.maps.event.addListener(kmlLayer, 'status_changed', function() {
document.getElementById('status').innerHTML = kmlLayer.getStatus();
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
<div id="status"></div>

KMZ exported from google maps is not showing some placemarks

We have this map:
https://www.google.com/maps/d/viewer?mid=z3MgxTVp8WWA.kbMeY2NPElcE
It can be exported into KMZ, by clicking "Download KML":
But when I try to embed this map on my own Google Maps, or even open in Google Earth, some placemarks are not displayed:
It there any way to fix this issue?
I see that problem with the KmlLayer renderer for the Google Maps Javascript API v3:
fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var kmlLayer = new google.maps.KmlLayer({
url: "http://www.google.com/maps/d/kml?&mid=1JwCy1i6rn9ailO2MPxPj-XxX0EY&lid=z3MgxTVp8WWA.kUnMLigc_WOw",
map: map
});
google.maps.event.addListener(kmlLayer, 'status_changed', function() {
document.getElementById('status').innerHTML = kmlLayer.getStatus();
})
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="status"></div>
<div id="map_canvas"></div>
Seems like an issue in Google's KML renderer. If I download your KML and render it with the third party library geoxml3 (disclaimer, I currently maintain that library), it displays OK.
redered with geoxml3 (but there is a performance hit due to the native rendering/lack of tile based rendering).
Note that I couldn't use the KMZ file directly, there seem to be character encoding issues with the zipped KML when rendered by geoxml3.

Geo-location added to standard custom google map

I am trying to add geo-location to a custom public google map, I can't manage to get it to work. For example here is a custom public google map.
Lets say I wanted to add geo-targeting to that map. I have the following on the site which is directly off the google maps API website:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
as well as the following which I just changed '.getElementsById' to '.getElementsByClassName':
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementsByClassName('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Then I call for the map which is in a lightbox:
<h2 class="dis">Where can I<br />get Rumble?</h2>
It displays the map fine, and asks to geo-target but I assume the reason its not working on this map is because its not included in the API.
I was hoping someone had a solution for this.
This is not an API based map. You can display the KML from that map on an API based map
Then use your geolocation code to center the map (depending on the ordering, you might need to use the preserveViewport:true option on the KmlLayer). Relevant code below, see the documenation for more examples and information.
This is in your existing page (leave your version)
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
Add this to display the data from your "custom map":
var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=202458571791405992786.0004b9061a3fcd9461d42");
kmlLayer.setMap(map);

Add and Remove KML overlay to a Google Map from external link

I'm trying to emulate this functionality
https://maps.google.com/maps?q=http://en.wikipedia.org/w/index.php%3Ftitle%3DTemplate:Attached_KML/N_postcode_area%26action%3Draw
I want to be able to add and remove a postcode region from an external link / checkbox. I have the KML file loading correctly using this code but I have no idea how to attach the external event listener / handler.
function initialize() {
var london = new google.maps.LatLng(51.522416,-0.11673);
var mapOptions = {
zoom: 11,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'path/to/kml',
suppressInfoWindows: true
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
I've tried looking in the ctaLayer object to get the individual nodes from the KML file but they dont seem to be there.