无法将KML文件渲染到Google地图中

Question

My Google map code

var myOptions = {
    center: {lat: 55.864237, lng: -4.251806},
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.SATELLITE
};

var map1 = new google.maps.Map(document.getElementById("map"), myOptions);

var geoXml = new geoXML3.parser({
    map: map1
});
var source = 'https://developers.google.com/kml/documentation/KML_Samples.kml';

geoXml.parse(source);

And the error i am getting is as follows:

Failed to load https://developers.google.com/kml/documentation/KML_Samples.kml : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:8080 ' is therefore not allowed access.

XML parse error Unable to retrieve https://developers.google.com/kml/documentation/KML_Samples.kml

Anyone knows how can i solve this issue?

Answer 1

GeoXml3 uses the browser's XmlHttpRequest object, which is subject to the same origin policy . You can't access https://developers.google.com from http://localhost:8080 (different origins).

To use GeoXml3, either copy that file to your server and access it through a relative URL or access it through a proxy on http://localhost:8080 .

example loading that URL through a proxy

example using the proxy property of GeoXml3

Another option would be to use the Google Maps Javascript API v3 KmlLayer , which accesses the KML from Google's servers and isn't subject to the same origin policy.