Uploading a local .kml file using Google Maps?

Question

I created a hello world program to download a local kml file (borrowed from google docs):

var ctaLayer = new google.maps.KmlLayer("http://localhost:8080/kml/cta.kml"); 

This does not work (nothing loads).

However, when I change this line to:

  var ctaLayer = new google.maps.KmlLayer("http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml"); 

It loads properly. Both kml files are identical. What do I need to do to download it for maintenance? (I have tried both absolute and relative paths, and I know that the paths I use are correct ...)

I also added the correct mime type to the apps apps configuration file:

 <mime-mapping> <extension>kml</extension> <mime-type>application/vnd.google-earth.kml+xml</mime-type> </mime-mapping> <mime-mapping> <extension>kmz</extension> <mime-type>application/vnd.google-earth.kmz</mime-type> </mime-mapping> 

But it still does not load.

I found this in google docs :

The Google Maps API supports KML and GeoRSS data formats for displaying geographic information. These data formats are displayed on the map using a KmlLayer object whose constructor uses the URL of a public KML or GeoRSS file.

So, I guess what I'm trying to do is not possible without kml service from a public url ... unless someone can prove otherwise

Answer 1

KML cannot be accessed because it is located on your local computer and Google cannot access it because it does not know how to get to localhost: 8080

Answer 2

Unfortunately, you cannot use "localhost". You have two options:

• put kml in the public domain. (if Google cannot access it, it will not work)
• Use geoxml3, which basically does what Google does, but allows you to downlaod and host the parser JS file yourself. This will allow you to download KML LOCALHOST and parse it for you (objects accessible via JSON) ( http://code.google.com/p/geoxml3/ ).

Option # 1 may not be an option for those who work on protection contracts and process sensitive information, since kml is sent to Google in the background and displayed on the map.

Answer 3

This website display-kml.appspot.com requires that you copy / paste the entire KML file into the website. Alternatively, you can use Dropbox to host your KML file using your shared folder. The Dropbox public folder has a right-click context menu that allows you to copy the URL.

Update:

The appspot site has an unstable history. As of January 2019, the website is operational.

RECOMMENDATIONS:

1. http://display-kml.appspot.com/
2. https://www.dropbox.com/

Answer 4

Specifically, Google Maps KmlLayer is designed to let you send them your data. https://developers.google.com/maps/documentation/javascript/kml

Check out the next magazine.

 //console var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml'; var kmlLayer = new google.maps.KmlLayer(src, { suppressInfoWindows: true, preserveViewport: false, map: your_gmap_object }); 

Having created the Marker, the Polygon , they disassemble and render all the browser .

As you can see from the following weblog , the KmlLayer class sends the source URL to a Google server to parse it and (do something at the end) and send the parsed result back to your browser for rendering.

 //REQUEST from browser https://maps.googleapis.com/maps/api/js/KmlOverlayService.GetOverlays?1shttps%3A%2F%2Fdevelopers.google.com%2Fmaps%2Fdocumentation%2Fjavascript%2Fexamples%2Fkml%2Fwestcampus.kml&callback=_xdc_._lidt3k&key=AIzaSyBeLTP20qMgxsQFz1mwLlzNuhrS5xD_a_U&token=103685 //RESPONSE from google server /**/_xdc_._lidt3k && _xdc_._lidt3k( [0,"kml:cXOw0bjKUSmlnTN2l67v0Sai6WfXhSSWuyNaDD0mAzh6xfi2fYnBo78Y2Eg","|ks:;dc:tg;ts:51385071|kv:3|api:3",... ["KmlFile"],[[37.423017,-122.0927],[37.424194,-122.091498]],[["g74cf1503d602f2e5"],["g58e8cf8fd6da8d29"],["ge39d22e72437b02e"]],1,[["client","2"]],-21505,[["ks",";dc:tg;ts:51385071"],["kv","3"],["api","3"]]] ) 

As @capdragon mentioned above, it's better to parse KML yourself .

UPDATE

Here is the compact KML parser code. This is for google.maps Marker and Polygon only.

HTML

 <input type='file' accept=".kml,.kmz" onchange="fileChanged()"> 

script, I used typewriting, but it's almost the same with JavaScript

  file: any fileChanged(e) { this.file = e.target.files[0] this.parseDocument(this.file) } parseDocument(file) { let fileReader = new FileReader() fileReader.onload = async (e: any) => { let result = await this.extractGoogleCoords(e.target.result) //CREATE MARKER OR POLYGON WITH result here console.log(result) } fileReader.readAsText(file) } async extractGoogleCoords(plainText) { let parser = new DOMParser() let xmlDoc = parser.parseFromString(plainText, "text/xml") let googlePolygons = [] let googleMarkers = [] if (xmlDoc.documentElement.nodeName == "kml") { for (const item of xmlDoc.getElementsByTagName('Placemark') as any) { let placeMarkName = item.getElementsByTagName('name')[0].childNodes[0].nodeValue.trim() let polygons = item.getElementsByTagName('Polygon') let markers = item.getElementsByTagName('Point') /** POLYGONS PARSE **/ for (const polygon of polygons) { let coords = polygon.getElementsByTagName('coordinates')[0].childNodes[0].nodeValue.trim() let points = coords.split(" ") let googlePolygonsPaths = [] for (const point of points) { let coord = point.split(",") googlePolygonsPaths.push({ lat: +coord[1], lng: +coord[0] }) } googlePolygons.push(googlePolygonsPaths) } /** MARKER PARSE **/ for (const marker of markers) { var coords = marker.getElementsByTagName('coordinates')[0].childNodes[0].nodeValue.trim() let coord = coords.split(",") googleMarkers.push({ lat: +coord[1], lng: +coord[0] }) } } } else { throw "error while parsing" } return { markers: googleMarkers, polygons: googlePolygons } } 

exit

 markers: Array(3) 0: {lat: 37.42390182131783, lng: -122.0914977709329} ... polygons: Array(1) 0: Array(88) 0: {lat: -37.79825999283025, lng: 144.9165994157198} ...