Pergunta

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!!

Foi útil?

Solução

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>
    

Outras dicas

google maps javascript API, KML layer, limit the KML size to 10MB. Over 10MB, you will get invalid document status on kmllayer object.

Your KML must first load to google KML service, than return back the tiled image to you. Therefore your KML size must less than 10MB.

https://developers.google.com/maps/documentation/javascript/kmllayer#restrictions

enter image description here

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top