How to embed a kml or kmz file in my webpage

Question

How to embed a kml or kmz file in my webpage

7.4k views Asked by pasluc74669 At 13 September 2024 at 11:46

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

Original Q&A

There are 2 answers

**ScaisEdge** · Answer 1 · 2015-06-10 18:13:55

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>

**pasluc74669** · Answer 2 · 2015-06-11 04:23:03

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

TechQA.

How to embed a kml or kmz file in my webpage

There are 2 answers

Related Questions in GOOGLE-MAPS

Related Questions in GOOGLE-MAPS-API-3

Related Questions in MAPS

Related Questions in KML

Related Questions in GOOGLE-EARTH

Popular Questions

Popular Tags

Trending Questions