How to add Google Earth KML file to html iframe?

html iframe kml google-earth

15,014

Solution 1

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>

Solution 2

It seems like you need to open the KML in another application or using a plugin. The browser does not know how to display the file in an iframe, so it simply downloads it.

From Google's KML Documentation: "Many applications display KML, including Google Earth, Google Maps, Google Maps for mobile, NASA WorldWind, ESRI ArcGIS Explorer, Adobe PhotoShop, AutoCAD, and Yahoo! Pipes."

I don't 100% understand what you are trying to do, so I can't be sure if this is what you are looking for, but this question might point you in the right direction: How to Embed KML files (Google Earth) into a website without the google gadget?

Solution 3

If you are OK to use Google Maps instead of Google Earth, you can do it by using KMLLayer as given here: https://developers.google.com/maps/tutorials/kml/

FYI: Google has deprecated Google Earth API - https://developers.google.com/earth/documentation/index

15,014

MadsterMaddness

Job: Software Engineer Favorite things to code: Android, iPhone and Glass apps.

Updated on June 04, 2022

Comments

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


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


```
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!
- Bijan over 9 years
  
  What are you trying to do? Display the contacts of your .kml file as plaintext?
- MadsterMaddness over 9 years
  
  I am trying to add my KML layer to my google earth that is displayed on the website.
- Bijan over 9 years
  
  Why are you using an iframe? You can just add satellites.kml as a new layer. See Here for how someone else did it
- vaso123 over 9 years
  
  i tried to do this before, and it doesn't work on localhost. when i uploaded to a server, and add src="http://someserver.com/my.kml" that workred. i do not know, is it your problem or not. what console says?
- vaso123 over 9 years
  
  and sorry, i forgot to mentioned, i've did it in google map api3. as i see, it's not that