emax79 Posted June 22, 2014 Share Posted June 22, 2014 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 Link to comment Share on other sites More sharing options...
L8V2L Posted July 2, 2014 Share Posted July 2, 2014 With this much detail, you'll do better going to stack overflow site to get help with this. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now