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,
