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
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>