Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Google earth Api

    Hi Professionals ... I am building a Application where i Want to measure the distance between Addresses . I have this awesome "ruler " example someone so Kindly Precoded for me ... I would like to combine it with the "Master" functions in order to be able to search for a address then measure with the ruller from one house to another . I have no experience in javascript . I have did my best efforts to combine the 2 functions into the "master " copy with no luck ... Could one of you kind professionals lead me to a solution ? I will also Include a link to a working "google maps " Perfect example of what i need to do in my master "google Earth " api Does anyone Know if I can Put the Javascript code from this working link i will attach into my "google Earth" api and will it run Properly.....I have already combined the functions from the "google Maps " link enclosed into the master ... The button is there and it functions ... The placemarks and ruler is not showing up.... thank you in advanced Eric

    Ruler


    Code:
    			<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 src="elabel.js" type="text/javascript"></script>
    			  
    			<script type="text/javascript">
    			google.load('earth', '1');
    			google.load('maps', '3.6', {
    				other_params: 'sensor=false&libraries=places'
    			});
    
    			var ge = null; // GEPlugin
    			var geocoder = null; // GClientGeocoder
    			var gex = null; // GEarthExtensions
    
    			function init() {
    				google.earth.createInstance('map3d', function (object) {
    					ge = object;
    					ge.getWindow().setVisibility(true);
    					ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO)
    					ge.getNavigationControl().setStreetViewEnabled(true); 
    					
    					
    					geocoder = new window.google.maps.Geocoder();
    					gex = new GEarthExtensions(ge);
    				ge.getTime().setHistoricalImageryEnabled(true);
    				
    					GeoSearch('map3d');
    				}, 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;
    			}
    			
    			function add()
    	{
    	  var marker1;
    	  var marker2;
    	  var label1;
    	  var label2;
    	  var button=0;
    	  var dist=0;
    	  var line;
    	  var poly;
    
    	  function measure(){
    		if(marker1&&marker2)
    		line = [marker1.getPoint(),marker2.getPoint()];
    		dist=marker1.getPoint().distanceFrom(marker2.getPoint());
    		dist=dist.toFixed(0)+"m";
    		if(parseInt(dist)>10000){dist=(parseInt(dist)/1000).toFixed(1)+"km";}
    		label1.setContents(dist);label2.setContents(dist);
    		label1.setPoint(marker1.getPoint());
    		label1.setContents(dist);
    		label2.setPoint(marker2.getPoint());
    		if(poly)map.removeOverlay(poly);
    		poly = new GPolyline(line,'#FFFF00', 8, 1)
    		map.addOverlay(poly);
    	  }
    
    	  document.getElementById("add").value="click on map";
    
    	  GEvent.addListener(map, 'click', function(overlay,pnt) 
    	  {
    	  if(pnt&&button==0)
    	  {
    		marker1 = new GMarker(pnt,{draggable: true});
    		map.addOverlay(marker1);
    		marker1.enableDragging();
    		label1=new ELabel(pnt, dist,"labelstyle",new GSize(2,20),60);
    		map.addOverlay(label1);
    		marker2 = new GMarker(pnt,{draggable: true});
    		map.addOverlay(marker2);
    		marker2.enableDragging();
    		label2=new ELabel(pnt, dist,"labelstyle",new GSize(2,20),60);
    		map.addOverlay(label2);
    	  }
    	  GEvent.addListener(marker1,"drag",function(){measure();});
    	  GEvent.addListener(marker1,"dblclick",function(){clr();});
    	  GEvent.addListener(marker2,"drag",function(){measure();});
    	  GEvent.addListener(marker2,"dblclick",function(){clr();});
    	  document.getElementById("add").value="You Have a Ruler";
    	  button++;
    	  });
    
    
    	  function clr(){
    		map.removeOverlay(poly);
    		map.removeOverlay(marker1);
    		map.removeOverlay(marker2);
    		map.removeOverlay(label1);
    		map.removeOverlay(label2);
    		button=0;
    		document.getElementById("add").value="New Ruler";
    		dist=0;
    		}
    	}
    
    			
    			/* 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
    					}
    				}
    		
    			};
    			</script>
    			</head>
    			<body>
    			<div id="map3d"></div>
    			<input type="button" id="add" value="Ruler" onclick="add()" style="width:150px;" 
    			 title="Insert Ruler">
    
    
    
    			</body>
    
    			</html>
    Here Link to Possible solution if the "Google Maps " Script doesnt work .
    GEarthExtensions Samples - Simple Distance Ruler


    I would Post it Thank you guys I'm in desperate need for a solution ....

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    is there some reason why you have to use the Earth API to do this? I only ask because all the functionality you are talking about is available in the google maps API, which is similar in many ways and doesn't require a browser plug-in (as earth did, last time I looked).

    By the way, GEvent is from the maps API v2 which is now deprecated, so any code you find that uses that is too old to be of any use and in fact should not work or at least is not guaranteed to keep working in the future. You could try updating it, but really it's just better to look for a more up to date example.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •