Here's my code:
<html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 500px; width: 500px; } </style> <title>Map Your Reps</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api /js?key={key}"></script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34, 92), zoom: 7 }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); var kmlUrl = "http://{HOST}/kml/file.kml"; var kmlOptions = { suppressInfoWindows: true, preserveViewport: false, map: map }; var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h1>Map</h1> <div id="map-canvas"/> </body></html> For some reason, the .kml file, though publicly accessible, is not getting loaded by the API.
I notice in the network tab of the developer tools in Chrome the following request:
https://maps.googleapis.com/maps/api/js/KmlOverlayService.GetOverlays?1shttp%3A%2F%2F{HOST}%2Fkml%2Ffile.kml&callback=_xdc_._9dx071&token=97074 The response is: /**/_xdc_._9dx071 && _xdc_._9dx071( [0,null,null,null,null,null,3,[["client","2"]]] )
When I load other KML files, this data structure represents the data from the file.
Some facts:
- My HTML file and my KML file are both on an Amazon EC2 instance and accessible publicly ... no passwords, HTTPS, or other tricky business
- My KML file is not compressed ... it's a real-life bonafide KML file
- My KML file validates on kmlvalidator.com
- My KML is 709K in size and includes polygons
- No error messages are generated, and nothing appears on the map ... except the map itself.
I'd appreciate any assistance I can get to figure out why this KML layer isn't loading.
Thanks!
