0

I need do embed a kml google earth map in my webpage. I followed this instructions, but the link to get the code to embed doesn't seem to be activated here.

I also tryed the followning code, but it shows a simple map without the informatons in the kml file

<head>
<title></title>
<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 }     
#google-map { height: 100% }     
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY-KEY&sensor=false"> 
</script> 
<script>
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(42.753633, 13.952404), 
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            scrollwheel: false
        }

        var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);

        var ctaLayer = new google.maps.KmlLayer({
            url: 'poligono1.kml'
        });

        ctaLayer.setMap(map);
    }       
    google.maps.event.addDomListener(window, 'load', initialize);
 </script>

 </head>
 <body onload="initialize()">

    <div id="google-map" class="google-map"></div>
 </body>

i put the kml file in the same folder of the webpage. Thanks in advance for helping me!!!

Improve this question
3

2 Answers 2

Reset to default
1

i tried the scaisEdge code, and it works fine. but in iis were missing the mime type, then i added the mime type, and now it works fine... thanks geocodezip!!!

Improve this answer
1
0

I think this sample from google developer could be useful 

<!DOCTYPE html>
    <html>
      <head>
        <style>
          #map-canvas {
            width: 500px;
            height: 400px;
          }
        </style>
         <script src="https://maps.googleapis.com/maps/api/js"></script>

      </head>
      <body>
        <div id="map-canvas"></div>


    <script>
    /**
     * @fileoverview Sample showing capturing a KML file click
     *   and displaying the contents in a side panel instead of
     *   an InfoWindow
     */

    var map;
    var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml';

    /**
     * Initializes the map and calls the function that creates polylines.
     */
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(-19.257753, 146.823688),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });
      loadKmlLayer(src, map);
    }

    /**
     * Adds a KMLLayer based on the URL passed. Clicking on a marker
     * results in the balloon content being loaded into the right-hand div.
     * @param {string} src A URL for a KML file.
     */
    function loadKmlLayer(src, map) {
      var kmlLayer = new google.maps.KmlLayer(src, {
        suppressInfoWindows: true,
        preserveViewport: false,
        map: map
      });
      google.maps.event.addListener(kmlLayer, 'click', function(event) {
        var content = event.featureData.infoWindowHtml;
        var testimonial = document.getElementById('capture');
        testimonial.innerHTML = content;
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </body>
    </html>
Improve this answer
1
  • How does the posted code do anything different from that in the question?
    – geocodezip
    Jun 10, 2015 at 21:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.