Getting javascript to work with WordPress for Google Earth

  • I am trying to incorporate the Google Earth plugin into my WordPress site. My WordPress site is https://www.coloradofiremaps.com. Currently I use the WP Google Maps plugin to display static markers, but I would like to go to the next step – 3D visualization of KML files.

    I was able to create a demo of the Google Earth Plugin at my personal site, which is here: https://www.markspeterson.com/Maps/GE_Test.html

    The problem seems to be how to incorporate the javascript into WordPress, I don’t know much (anything?) about coding, but could anyone help me out with how I might replace the maps on one of my coloradofiremaps.com pages with the Google Earth plugin shown in the demo page above?

    Thanks,
    Mark

Viewing 4 replies - 1 through 4 (of 4 total)

  • Have you reviewed Using_Javascript?

    Thread Starter mpeterson

    (@mpeterson)

    I have, but it’s a little over my head. I struggled for hours with getting the demo up & running, through nothing more than brute force coding.

    I was hoping perhaps someone would be nice enough to give me a little more ‘entry level’ guidance.

    I’m sorry but that page is about as “entry level” as it gets.

    Thread Starter mpeterson

    (@mpeterson)

    I’ve tried creating a standalone javascript (*.js) file with the following code, and uploading it to my sites under wp-content/scripts, but that didn’t seem to work.

    <script src="/https://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
    <script type="text/javascript">
    var ge;

    google.load("earth", "1");

    function init() {
      google.earth.createInstance('map3d', initCallback, failureCallback);
    }

    function initCallback(instance) {
      ge = instance;
      ge.getWindow().setVisibility(true);

      // add a navigation control
      ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

      // add some layers
      ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
      ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

      // in this sample we will attempt
      // to fetch a  KML file and show it

      function finished(object) {
        if (!object) {
          // wrap alerts in API callbacks and event handlers
          // in a setTimeout to prevent deadlock in some browsers
          setTimeout(function() {
            alert('Bad or null KML.');
          }, 0);
          return;
        }
        ge.getFeatures().appendChild(object);
        var la = ge.createLookAt('');
        la.set(42.77890, -106.08009, 3772, ge.ALTITUDE_RELATIVE_TO_GROUND,
               -120, 68, 0);
        ge.getView().setAbstractView(la);
      }

      // fetch the KML
      var url = 'https://markspeterson.com/' +
                'Maps/Sheepherder_Fire_09-13-2012_Final.kml';
      google.earth.fetchKml(ge, url, finished);

      document.getElementById('installed-plugin-version').innerHTML =
        ge.getPluginVersion().toString();
    }

function failureCallback(errorCode) {
    }
    </script>

    If I then try to call that from a page nothing happens. My call is by using:

    <script type="text/javascript" src="/coloradofiremaps.com/wp-content/scripts/my_java_script.js"></script>
<script type="text/javascript">
<!--
init();
//--></script>

<div id="map3d" style="width: 800px; height: 600px;"></div>
<br>
<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>
</center>

    Could someone perhaps give me a clue as to what I’m doing wrong, because I’m just not seeing it?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Getting javascript to work with WordPress for Google Earth’ is closed to new replies.