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 link to a working model only its In google maps . Which I cant use . http://koti.mbnet.fi/ojalesa/exam/ruler.html
Here 's where i received my code that won't execute http://earth-api-utility-library.googlecode.com/svn/trunk/extensions/examples/ruler.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, { for (var c in "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" onclick="add()" style="width:150px;" title="Insert Ruler"> </div> <p><strong>Distance: </strong><span id="distance">N/A</span></p> </body> </html>
RulerX.html
