WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. mpeterson
    Member
    Posted 1 year 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?

    Thanks,
    Mark

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Have you reviewed Using_Javascript?

  3. mpeterson
    Member
    Posted 1 year 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
    Theme Diva & Forum Moderator
    Posted 1 year ago #

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

  5. mpeterson
    Member
    Posted 1 year 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;
          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 = 'http://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?

Topic Closed

This topic has been closed to new replies.

About this Topic