Search code examples
google-earthgoogle-earth-plugin

Multiple KML w/ Google Earth Plugin/API Limitation?


So, I'm building a web application using the Google Earth Plugin and API. However, I'm running into an issue with trying to display more than one KML file; only the last file given loads up. I'm using the process KmlNetworkLink to display everything.

The desktop application allows this, so I'm not sure if this is just a limitation on the API or not. Does anyone know if this is a limitation?

Thanks in advance.

The documentation I am looking at: https://developers.google.com/earth/documentation/kml


Solution

  • EDIT: OP here. After working on this project for a few weeks, I've learned how to properly set up multiple KML tracks with the Google Earth plugin. I've revised my earlier answer (now shown below) to include a much cleaner and abstracted version of code. Hope this helps someone. Also (not listed here), it is possible store all of your KML locations in a single JSON and loop through it while calling createView() if needed.

    <!DOCTYPE html>
    <html>
        <head>
            <title>Google Earth API Display</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <style>
                body, html {
                    margin: 0;
                    padding: 0;
                    height: 100%;
                    width: 100%;
                }
                #earthDisplay {
                    height: 100%;
                    width: 100%;
                }
            </style>
        </head>
        <body>
    
            <div id="earthDisplay"></div>
    
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
    
            /**
             * ================================================================== 
             *  Global Variables and Statements
             * ==================================================================
             */
    
            var ge;
            google.load("earth", "1", {"other_params": "false"});
            google.setOnLoadCallback(init);
    
            /**
             * ================================================================== 
             *  Functions
             * ==================================================================
             */
    
            function init()
            {
                google.earth.createInstance('earthDisplay', initCB, failureCB);
            }
    
            function initCB(instance)
            {
                var kmlLocation = "insert/your/file/here.kml";
    
                ge = instance;
                ge.getWindow().setVisibility(true);
    
                createView(kmlLocation);  // This function can be called multiple times to load different views.
            }
    
            function createView(kmlLocation)
            {
                var href = kmlLocation;
                var link = ge.createLink('');
                var networkLink = ge.createNetworkLink('');
    
    
                link.setHref(href);
    
    
                networkLink.set(link, true, true); // Sets the link, refreshVisibility, and flyToView
    
    
                ge.getWindow().setVisibility(true);
    
                ge.getFeatures().appendChild(networkLink);
            }
    
            function failureCB(errorCode)
            {
                alert("There has been an error with the Google Earth API. Please check your console.");
                console.log("Error with Google Earth API: " + errorCode);
            }
    
        </script>
    </body>
    </html>