Foros del Web » Creando para Internet » HTML »

GEO Location API - Text field

Estas en el tema de GEO Location API - Text field en el foro de HTML en Foros del Web. Buenas, Soy nuevo y estoy intentando con el GEO API location ubicar al usuario en un mapa y utilizar las coordenadas para realizar una busqueda, ...
  #1 (permalink)  
Antiguo 17/09/2014, 20:11
Avatar de guidoms7  
Fecha de Ingreso: marzo-2011
Mensajes: 31
Antigüedad: 13 años, 1 mes
Puntos: 0
GEO Location API - Text field

Buenas,

Soy nuevo y estoy intentando con el GEO API location ubicar al usuario en un mapa y utilizar las coordenadas para realizar una busqueda, si funciona y logra ubicar al usuario pero no me escribe las coordenadas en el campo de texto, no se si estoy haciendo algo mal.

Código HTML:
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>GPS</title>
    <style type="text/css">
    html{height:100%}body{font-family:sans-serif;background-color:#ffffff}#map-canvas{
	height:250px;
	width:300px
}
    </style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">var map=null;function showlocation(){navigator.geolocation.getCurrentPosition(callback);}
function callback(position){var lat=position.coords.latitude;var lon=position.coords.longitude;document.getElementById('latitude').innerHTML=lat;document.getElementById('longitude').innerHTML=lon;var latLong=new google.maps.LatLng(lat,lon);var marker=new google.maps.Marker({position:latLong});marker.setMap(map);map.setZoom(8);map.setCenter(marker.getPosition());}
google.maps.event.addDomListener(window,'load',initMap);function initMap(){var mapOptions={center:new google.maps.LatLng(0,0),zoom:1,mapTypeId:google.maps.MapTypeId.ROADMAP};map=new google.maps.Map(document.getElementById("map-canvas"),mapOptions);}</script>
  </head>
<body>
		<p>
		  <input type="button" value="Ubicarme" onclick="javascript:showlocation()"/>   
		  <br/>
		</p>
<p>
  <label for="latitude">Latitud:</label>
  <input name="latitude" type="text" id="latitude" readonly="readonly">
        </p>
        <p>
          <label for="longitude">Longitud: </label>
          <input name="longitude" type="text" id="longitude" readonly="readonly">
        </p>
    <div id="map-canvas"/>
<p>
<script pagespeed_no_defer="">//<![CDATA[
(function(){var e=encodeURIComponent,f=window,h=document,m="width",n="documentElement",p="height",q="length",r="prototype",s="body",t="&",u="&ci=",w="&n=",x="&rd=",y=",",z="?",A="Content-Type",B="Microsoft.XMLHTTP",C="Msxml2.XMLHTTP",D="POST",E="application/x-www-form-urlencoded",F="img",G="input",H="load",I="oh=",J="on",K="pagespeed_url_hash",L="url=",M=function(a,c,d){if(a.addEventListener)a.addEventListener(c,d,!1);else if(a.attachEvent)a.attachEvent(J+c,d);else{var b=a[J+c];a[J+c]=function(){d.call(this);b&&b.call(this)}}};f.pagespeed=f.pagespeed||{};var N=f.pagespeed,O=function(a,c,d,b,g){this.d=a;this.f=c;this.g=d;this.a=g;this.c={height:f.innerHeight||h[n].clientHeight||h[s].clientHeight,width:f.innerWidth||h[n].clientWidth||h[s].clientWidth};this.e=b;this.b={}};O[r].j=function(a){a=a.getBoundingClientRect();return{top:a.top+(void 0!==f.pageYOffset?f.pageYOffset:(h[n]||h[s].parentNode||h[s]).scrollTop),left:a.left+(void 0!==f.pageXOffset?f.pageXOffset:(h[n]||h[s].parentNode||h[s]).scrollLeft)}};O[r].i=function(a){if(0>=a.offsetWidth&&0>=a.offsetHeight)return!1;a=this.j(a);var c=a.top.toString()+y+a.left.toString();if(this.b.hasOwnProperty(c))return!1;this.b[c]=!0;return a.top<=this.c[p]&&a.left<=this.c[m]};O[r].l=function(){for(var a=[F,G],c=[],d={},b=0;b<a[q];++b)for(var g=h.getElementsByTagName(a[b]),k=0;k<g[q];++k){var v=g[k].getAttribute(K);v&&g[k].getBoundingClientRect&&this.i(g[k])&&!(v in d)&&(c.push(v),d[v]=!0)}b=!1;a=I+this.g;this.a&&(a+=w+this.a);if(0!=c[q]){a+=u+e(c[0]);for(b=1;b<c[q];++b){d=y+e(c[b]);if(131072<a[q]+d[q])break;a+=d}b=!0}this.e&&(d=x+e(JSON.stringify(this.h())),131072>=a[q]+d[q]&&(a+=d),b=!0);N.criticalImagesBeaconData=a;if(b){var c=this.d,b=this.f,l;if(f.XMLHttpRequest)l=new XMLHttpRequest;else if(f.ActiveXObject)try{l=new ActiveXObject(C)}catch(P){try{l=new ActiveXObject(B)}catch(Q){}}l&&(l.open(D,c+(-1==c.indexOf(z)?z:t)+L+e(b)),l.setRequestHeader(A,E),l.send(a))}};O[r].h=function(){for(var a={},c=h.getElementsByTagName(F),d=0;d<c[q];++d){var b=c[d],g=b.getAttribute(K);if("undefined"==typeof b.naturalWidth||"undefined"==typeof b.naturalHeight||"undefined"==typeof g)break;if("undefined"==typeof a[b.src]&&0<b[m]&&0<b[p]&&0<b.naturalWidth&&0<b.naturalHeight||"undefined"!=typeof a[b.src]&&b[m]>=a[b.src].n&&b[p]>=a[b.src].m)a[g]={renderedWidth:b[m],renderedHeight:b[p],originalWidth:b.naturalWidth,originalHeight:b.naturalHeight}}return a};N.k=function(a,c,d,b,g){var k=new O(a,c,d,b,g);M(f,H,function(){f.setTimeout(function(){k.l()},0)})};N.criticalImagesBeaconInit=N.k;})();pagespeed.criticalImagesBeaconInit('/mod_pagespeed_beacon','http://viralpatel.net/blogs/demo/js/html5-geolocation-example/html5-geolocation-google-map.html','WyQ3C4mRrQ',false,'NZYLEzb0oms');
//]]></script></p>
</body>
</html> 
Con firebug si logro ver que escribe la coordenada pero no la logro ver fuera de firebug.

[URL="http://escalantecorporation.com/gps.html"]http://escalantecorporation.com/gps.html[/URL]

Que puedo hacer para que funcione?

saludos y muchas gracias,
__________________
Costa Rica WOW!!
  #2 (permalink)  
Antiguo 18/09/2014, 12:54
 
Fecha de Ingreso: abril-2014
Mensajes: 12
Antigüedad: 10 años
Puntos: 0
Respuesta: GEO Location API - Text field

crea esta funcion :

function actualizartext(latLng)
{

jQuery('#latitude').val(latLng.lat());
jQuery('#longitude').val(latLng.lng());

}

prueba eso y llama a la función "actualizartext();"
  #3 (permalink)  
Antiguo 18/09/2014, 20:19
Avatar de guidoms7  
Fecha de Ingreso: marzo-2011
Mensajes: 31
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: GEO Location API - Text field

En qué momento llamo esa función con el botón de ubicarme?

Saludos,
__________________
Costa Rica WOW!!
  #4 (permalink)  
Antiguo 19/09/2014, 15:29
Avatar de guidoms7  
Fecha de Ingreso: marzo-2011
Mensajes: 31
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: GEO Location API - Text field

Intente lo que me dijiste, agregue esa funcion y la llame de esta forma:

Código HTML:
 <input type="button" value="Ubicarme" onclick="javascript:showlocation(); actualizartext()"/> 
Pero no me funciono continua sin mostrar el valor en el text field.

algo mas que pueda intentar?

Saludos,
__________________
Costa Rica WOW!!
  #5 (permalink)  
Antiguo 19/09/2014, 15:51
Avatar de guidoms7  
Fecha de Ingreso: marzo-2011
Mensajes: 31
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: GEO Location API - Text field

El problema era el innerHTML, lo cambie por value y logro funcionar en caso de que alguien encuentre el mismo problema.
__________________
Costa Rica WOW!!

Etiquetas: api, field, geo, html5, location, text
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:40.