Search code examples
phpgoogle-maps-api-3overlaykmlkmz

Google Maps API V3 KML layer does not show up


I followed many tutorials online but have not been successful in trying to get a google map window on my site with a desired KML overlay on it. My code is below:

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>

<script>
function initialize()
{
var mapOptions = {
    center: new google.maps.LatLng(38,-79.5),
    zoom:3,
    mapTypeId: google.maps.MapTypeId.TERRAIN
 }
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var overlay = new google.maps.KmlLayer('https://doc-08-4g-       docs.googleusercontent.com/docs/securesc/ckoh7mm1pf9l58sknv61gkpp19v37j15/r3rh37mucb8nscl1r37disrlcom7i93t/1372536000000/00236509183910004089/00236509183910004089/0B-qVNYv_qM5vNy1ZbzJYVUgtTjA?h=16653014193614665626&e=download');

overlay.setMap(map);
}
</script>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>

I dont understand the script src and why it's needed but I found it in the tutorials so i included it. As of now my KMZ and not KML file is in google drive which is open for the public and i have used the download link. This does not work even when I use KML files from examples in the internet.Am I missing something? Please Help!!


Solution

  • There are 3 issues I see:

    1. the initialize function is never called
    2. the map has no size
    3. the KML is not valid (returns status INVALID_DOCUMENT)

      <!DOCTYPE html>
      <html>
      <head>
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
      </script>
      
      <script>
      function initialize()
      {
      var mapOptions = {
          center: new google.maps.LatLng(38,-79.5),
          zoom:3,
          mapTypeId: google.maps.MapTypeId.TERRAIN
       }
      var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
      var overlay = new google.maps.KmlLayer('https://doc-08-4g-docs.googleusercontent.com/docs/securesc/ckoh7mm1pf9l58sknv61gkpp19v37j15/r3rh37mucb8nscl1r37disrlcom7i93t/1372536000000/00236509183910004089/00236509183910004089/0B-qVNYv_qM5vNy1ZbzJYVUgtTjA?h=16653014193614665626&e=download');
      
      overlay.setMap(map);
      google.maps.event.addListener(overlay,'status_changed',function(){
        document.getElementById('status').innerHTML = overlay.getStatus();
      });
        }
      google.maps.event.addDomListener(window,'load', initialize);
      </script>
      </head>
      <body>
      <div id="googleMap" style="height:500px;width:600px;"></div>
      <div id="status"></div>
      </body>
      </html>