Javascript Google earth api

Question

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 21-Jun-14 19:40pm

emax79

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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