Unable to render KML file into google map

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 accesshttps://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.