3

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!

Improve this question
5
  • What are you trying to do? Display the contacts of your .kml file as plaintext?
    – Bijan
    Oct 27, 2014 at 23:38
  • I am trying to add my KML layer to my google earth that is displayed on the website.
    – MadsterMaddness
    Oct 27, 2014 at 23:39
  • 1
    Why are you using an iframe? You can just add satellites.kml as a new layer. See Here for how someone else did it
    – Bijan
    Oct 27, 2014 at 23:42
  • 1
    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
    Oct 27, 2014 at 23:46
  • and sorry, i forgot to mentioned, i've did it in google map api3. as i see, it's not that
    – vaso123
    Oct 27, 2014 at 23:46

3 Answers 3

Reset to default
6

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>
Improve this answer
1

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?

Improve this answer
1

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

Improve this answer

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.