Getting javascript to work with WordPress for Google Earth (5 posts)

  1. mpeterson
    Posted 3 years ago #

    I am trying to incorporate the Google Earth plugin into my WordPress site. My WordPress site is http://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: http://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?


  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Have you reviewed Using_Javascript?

  3. mpeterson
    Posted 3 years ago #

    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.

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    I'm sorry but that page is about as "entry level" as it gets.

  5. mpeterson
    Posted 3 years ago #

    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="/http://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;
          // add a navigation control
          // 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);
            var la = ge.createLookAt('');
            la.set(42.77890, -106.08009, 3772, ge.ALTITUDE_RELATIVE_TO_GROUND,
                   -120, 68, 0);
          // fetch the KML
          var url = 'http://markspeterson.com/' +
          google.earth.fetchKml(ge, url, finished);
          document.getElementById('installed-plugin-version').innerHTML =
    function failureCallback(errorCode) {

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

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

Topic Closed

This topic has been closed to new replies.

About this Topic