1
votes

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

1

1 Answers

0
votes

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>