我可以通过JS API从Google地图（再次）加载KML数据吗？

Question

I've been working on a little ember app for a while which loaded articles from a local newspapers API and presented it in a nice layout. As these articles are all about travel destinations, the navigation is based upon a big map with markers in the background of the page. Originally I started out with a leaflet map. Adding a marker for each article was no problem, as I knew their coordinates as they were saved with each article and accessable through the API.

It got more complicated when I realized that some authors embedded small Goolge maps into their copy with markers for nice sites, bars, etc. As I didn't want to have a Google map displayed over a leaflet map, I was searching for way to get the marker data from the Google maps and use it on my Leaflet one. The solution I ended up working with was pretty crazy but did what I was hoping for: I realized that an HTTP request to a Google map's embed url with the request parameter “output” set to “kml” got me an KML/XML file with all the data of the KML layer used with the map. To circumvent issues with cross-domain requests I requested the KML data indirectly through Yahoo's YQL service which kindly converted the data to JSON as well.

Everything was fine. Until it wasn't. Since implementing the recent changes to the API (especially regarding KML stuff), my requests return KMZ (zipped KML) data. Of course neither YQL conversion nor my Ember app can deal with the now binary data.

It doesn't seem there is any way to get my hands on the uncompressed data again. Is there at least a way to make my main map–which is now a Google map, too–load the kml layer from another map identified by an embed url? Any hint is welcome and really appreciated. Thanks!

Answer 1

Found the solution myself. Since Google is serving KML data only zipped (KMZ), there doesn't seem to be any way anymore to get the actual raw layer data to dynamically build a map from scratch while being able to access and manipulate each marker etc.

At least it is possible to load KML layers by changing the maps' embed urls to make the request deliver KMZ data.

For older embed urls with msid parameter use:

https://maps.google.com/maps/ms?ie=UTF8&msa=0&output=kml&msid= {MSID}

For recent embed urls with mid parameter use:

https://www.google.com/maps/d/u/0/kml?mid= {MID}

These urls then can be used to create a kmlLayer object using Google Map's JavaScript API like this:

// set up map
var map = new google.maps.Map(document.getElementById('map-canvas'),{ … });

// create kmlLayer object from URL
var kmlUrl = 'https://www.google.com/maps/d/u/0/kml?mid=zWcxp2-PLDWQ.k8l5tfHg76WQ';
var kmlLayer = new google.maps.KmlLayer({ url: kmlUrl });

// add layer to map
kmlLayer.setMap(map);

This will set the view and load all markers and overlays saved with your custom map identified by the url. So you can use every custom map you created with Google Maps as as KML/KMZ data source to define map views you can display–and switch between–on a single canvas using the JS API. Worked for my case.

Answer 2

You can use a KmlLayer

see this google developer sample

https://developers.google.com/maps/documentation/javascript/examples/layer-kml

Answer 3

Playing around with the MSID/MIDs and the google My maps I noticed that when you are asked to export a layer it gives you the option to receive a KML. With the MID link, or msid, which gives you a kmz, all you have to do is add &forcekml=1 to receive a kml.

Like so:

https://www.google.com/maps/d/u/0/kml?mid= {MID} &forcekml=1

Doesn't appear to want to load with omnivore however.