How to add Google Earth KML file to html iframe?

Basically, I am trying to add/show my KML file on my Google Earth div to my website. I call my file "satellites.kml".

<!-- html code starts...-->

 <p><iframe 
       name="myKMLEarth" 
       src="/getrack/satellites.kml"
       height="440" 
       width="100%" 
       frameborder="0" 
       scrolling="no">
 </iframe></p>

<!-- html code continues ...-->

When the page loads, it downloads my KML instead of opening it up in the iframe. Should I not use src to link to the KML file? Any advice would be appreciated! Thank you in advance!

Solution

You have to use the Google Maps JavaScript API https://developers.google.com/maps/documentation/javascript/reference?hl=es

You have to attach a google.maps.KmlLayer to a Map.

Put the API script in the <head>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>

Create a div like:

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

Then, use this JS code before </body>. Set your latitude, longitude and path to KML file.

<script>
    function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(YOUR_LAT,YOUR_LNG), //Set your latitude, longitude
          zoom: 19,
          mapTypeId: google.maps.MapTypeId.SATELLITE,
          scrollwheel: false
        }

        var map = new google.maps.Map(document.getElementById('google-map'), mapOptions); // get the div by id

        var ctaLayer = new google.maps.KmlLayer({
          url: 'PATH/TO/FILE.kml' // Set the KML file
        });

        // attach the layer to the map
        ctaLayer.setMap(map);
    }

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