Click here to Skip to main content
15,030,062 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hello …. I am trying to make this “ruler” work …. All the necessary code is in place . I am not knowledgeable enough to Make the event Load with Javascript …. The button is there . The Code is there . It just wont fire . I Have Marked the area of the code that won’t fire . 1. I would like to enter address . 2. Hit the “ruler” button . And have the ruler execute to wherever the address is located . I Have enclose links to 1. A working example that is exactly what I am trying to achieve only it is in “google maps “ so the code does not work for “Google Earth “ . I Have also enclosed a Link to the “simple ruler “ api for google earth in which I have already coded in my example it just will not execute . I could really use a hand on this issue . I am struggling and have a deadline to achieve … Thank you in Advance . Eric


This is a link to a working Model .. However it is in Google maps . I need exactly this In "google Earth "

http://koti.mbnet.fi/ojalesa/exam/ruler.html[^]

This is a link to where i received my code that is in place and will not execute

http://earth-api-utility-library.googlecode.com/svn/trunk/extensions/examples/ruler.html[^]


This is My Project

HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <title>GEarthExtensions Samples - Simple Distance Ruler</title>
      <script src="http://www.google.com/jsapi?key=ABQIAAAAsc0UQXoo2BnAJLhtpWCJFBTgHOxFyKCf35LCvsI_n4URElrkIhS9MkSlm_0NZWgrKFkOsnd5rEK0Lg" type="text/javascript"></script>
      <script src="../dist/extensions.pack.js" type="text/javascript"></script>
      <script src="google/extensions-0.2.1.pack.js"></script>
    <script type="text/javascript">
    /* <![CDATA[ */

    var ge = null;
    var geocoder = null; // GClientGeocoder
    var gex = null;

    google.load('earth', '1');
google.load('maps', '3.6', {
    other_params: 'sensor=false&libraries=places'
});






function init() {
    google.earth.createInstance('map3d', function (object) {
        ge = object;
        ge.getWindow().setVisibility(true);
        geocoder = new window.google.maps.Geocoder();
        gex = new GEarthExtensions(ge);
        GeoSearch('map3d');
         ge.getWindow().setVisibility(true);
        ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO)
        ge.getNavigationControl().setStreetViewEnabled(true);
        ge.getTime().setHistoricalImageryEnabled(true);


    }, function (error) {
        alert("Error: " + error);
    });
}

google.setOnLoadCallback(init);

function GeoSearch(id, options) {
    id = id || '';
    options = options || {};
    var me = {},
    bbox = util.bbox(document.getElementById(id)),
        settings = (function () {
            var defaults = {};
            defaults.x = 10;
            defaults.y = 10;
            defaults.width = 400;
            defaults.height = 25;
            defaults.types = [];
            defaults.iframe = {
                frameBorder: 0,
                id: 'geosearch-shim',
                scrolling: 'no',
                //src: (navigator.userAgent.indexOf('MSIE 6')>=0)?'':'javascript:void(0);',
                src: 'about:blank',
                style: {
                    width: util.px(defaults.width),
                    height: util.px(defaults.height),
                    zIndex: 9,
                    position: 'absolute',
                    left: util.px(bbox.left, defaults.x),
                    top: util.px(bbox.top, defaults.y)
                }
            };
            defaults.submit = {
                type: 'button',
                id: 'geosearch-submit',
                className: 'geosearch-controls',
                value: '►',
                style: {
                    padding: '0 5px 0 5px',
                    cursor: 'pointer',
                    color: '#fff',
                    background: '#4d90fe',
                    height: util.px(defaults.height),
                    outline: 'none',
                    border: 0,
                    zIndex: 11,
                    position: 'absolute',
                    top: util.px(bbox.top, defaults.y)
                }
            };
            defaults.input = {
                type: 'text',
                id: 'geosearch-input',
                className: 'geosearch-controls',
                style: {
                    paddingLeft: '5px',
                    textOverflow: 'ellipsis',
                    width: util.px(defaults.width),
                    height: util.px(defaults.height),
                    display: 'block',
                    outline: 'none',
                    border: 0,
                    zIndex: 10,
                    position: 'absolute',
                    left: util.px(bbox.left, defaults.x),
                    top: util.px(bbox.top, defaults.y)
                }
            };

            return defaults;
        })();

    util.extend(settings, options);

    me.iframeShim = util.add('iframe', document.body, settings.iframe);
    me.input = util.add('input', document.body, settings.input);
    me.submit = util.add('input', document.body, settings.submit);

    var autocomplete = new google.maps.places.Autocomplete(me.input, {
            types: settings.types
        }),
        reset = function () {
            var offset = settings.width - me.submit.clientWidth;
            me.iframeShim.style.height = util.px(settings.height);
            me.submit.style.left = util.px(bbox.left, settings.x, offset);
            me.input.style.width = util.px(offset);
            me.submit.style.background = settings.submit.style.background;
            me.input.title = me.submit.title = '';
        };

    reset();

    util.listen(me.submit, 'click', function (evt) {
        reset();
        me.geocode(me.input.value);
        return false;
    });

    util.listen(me.input, 'blur', function (evt) { reset(); });
    //util.listen(me.input, 'focus', function (evt) { reset(); });

    util.listen(me.input, 'keydown', function (evt) {
        evt = window.event ? window.event : evt;
        reset();
        var pac = document.getElementsByClassName('pac-container')[0];
        if (pac) {
            me.iframeShim.style.height = util.px(settings.height, pac.clientHeight);
            pac.style.paddingRight = util.px(me.submit.clientWidth);
        }

        if (evt.keyCode == 13) { // enter
               reset();
            me.geocode(me.input.value);
        }

        return false;
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            me.submit.style.background = 'red';
            return;
        }

        me.submit.style.background = 'green';
        me.input.title = me.submit.title = 'OK';

        if (place.geometry.viewport) {
            gex.view.setToBoundsView(new geo.Bounds(
            place.geometry.viewport.getSouthWest(),
            place.geometry.viewport.getNorthEast()), {
                aspectRatio: 1.0
            });
        } else {
            // TODO: look at using the geocode result?
            place.geometry && gex.util.lookAt(place.geometry.location);
        }
    });

    me.geocode = function (address) {
        if ('string' != typeof address) return;
        me.input.value = address;
        geocoder.geocode({
            address: address
        }, function (results, status) {
            me.input.title = me.submit.title = status;
            if (status == google.maps.GeocoderStatus.OK) {
                if (!results[0].geometry) return;
                var viewport = results[0].geometry.viewport;
                gex.view.setToBoundsView(new geo.Bounds(
                viewport.getSouthWest(),
                viewport.getNorthEast()), {
                    aspectRatio: 1.0
                });
                me.submit.style.background = 'green';
            } else {
                me.submit.style.background = 'red';
            }
        });
    }

    return me;
}

/* utilities */

var util = {
    add: function (a, b, c) {
        c = c || {};
        a = document.createElement(a);
        util.extend(a, c);
        b.appendChild(a);
        return a
    },
    extend: function (a, b) {
        for (var c in b) "object" === typeof b[c] && null !== b[c] && a[c] ? util.extend(a[c], b[c]) : a[c] = b[c]
    },
    listen: function (a, b, c) {
        a.addEventListener ? a.addEventListener(b, c, !1) : a.attachEvent && a.attachEvent("on" + b, c)
    },
    px: function () {
        for (var a = 0, b = 0; b < arguments.length; b++)
        a += parseInt(arguments[b]);
        return a + "px"
    },
    bbox: function (a) {
        for (var b = a.offsetLeft, c = a.offsetTop, d = a.offsetParent;
        d && d != document.body.parentNode;)
        isFinite(d.offsetLeft) && isFinite(d.offsetTop) && (b += d.offsetLeft, c += d.offsetTop), d = d.offsetParent;
        return {
            left: b,
            top: c,
            width: a.offsetWidth,
            height: a.offsetHeight
        }
    }


};




        //  This is the Portion That will not Load .............. Hope it helps



    google.setOnLoadCallback(function add() {
    google.earth.createInstance('map3d', function(pluginInstance) {
        ge = pluginInstance;

        gex = new GEarthExtensions(pluginInstance);


        gex.util.lookAt([1, 1], { range: 100000, tilt: 0});

        // create start and end placemark
        var rulerColor = '#fc0';

        var placemarkOptions = {
          style: {
            icon: {
              color: rulerColor,
              stockIcon: 'paddle/wht-stars',
              hotSpot: { left: '50%', bottom: 0 }
            }
          }
        };

        var startPlacemark = gex.dom.addPointPlacemark([0, -1], placemarkOptions);
        var endPlacemark = gex.dom.addPointPlacemark([0, 1], placemarkOptions);

        // create the distance updater function
        var _updateDistance = function() {
          document.getElementById('distance').innerHTML =
              '~' +
              (new geo.Point(startPlacemark.getGeometry()).distance(
                new geo.Point(endPlacemark.getGeometry())) / 22229.344).toFixed(1) +
              ' mi';
        };

        // create the line placemark
        var linePlacemark = gex.dom.addPlacemark({
          lineString: {
            path: [startPlacemark.getGeometry(),
                   endPlacemark.getGeometry()],
            altitudeMode: ge.ALTITUDE_CLAMP_TO_GROUND,
            tessellate: true
          },
          style: {
            line: { color: rulerColor, opacity: 0.5, width: 3 }
          }
        });

        // make them draggable
        var dragOptions = {
          bounce: false,
          dragCallback: function() {
            linePlacemark.setGeometry(
                gex.dom.buildLineString({
                  path: [startPlacemark.getGeometry(),
                         endPlacemark.getGeometry()],
                  altitudeMode: ge.ALTITUDE_CLAMP_TO_GROUND,
                  tessellate: true
                }));

            // update the distance on drag
            _updateDistance();
          }
        };

        // show start distance
        _updateDistance();

        gex.edit.makeDraggable(startPlacemark, dragOptions);
        gex.edit.makeDraggable(endPlacemark, dragOptions);

      }, function() {});
    });


    /*  */
    </script>
    </head>
    <body>


      <div id="map3d_container" style="width: 1000px; height: 500px;">
        <div id="map3d" style="height: 100%"></div>
        <input type="button" id="add" value="Ruler"  önclick="add()" style="width:150px;"
title="Insert Ruler">
      </div>
      <p>Distance: <span id="distance">N/A</span></p>
    </body>
    </html>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900