Foros del Web - Ver Mensaje Individual

musashi003 · #5 (**permalink**) 10/06/2011, 12:57

Muchas gracias por tu ayuda abimaelrc, ya pude hacer que funcione, dejo el codigo aqui como referencia, para alguien mas que lo necesite.

Muchas gracias.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin t&iacute;tulo</title>
 
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>
<script type="text/javascript">
function geolocalizar()
    {
        $("#status").text("Espera te estamos localizando...");
        navigator.geolocation.getCurrentPosition(mostrarMapa, errorMapa);
    }
    
    function mostrarMapa(posicion)
    {
        var lat = posicion.coords.latitude;
        var lon = posicion.coords.longitude;
        $("#status").text("Te encontramos! Estas en: " + lat + "," + lon);
        
        $("#mapa_canvas").css("height", "300px");
        $("#mapa_canvas").css("width", "400px");
        $("#mapa_canvas").css("margin", "left");
        var coordenada = new google.maps.LatLng(lat,lon);
        var opciones = {
            zoom: 16,
            center: coordenada,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }; 
        var mapa = new google.maps.Map(document.getElementById("mapa_canvas"), opciones);
        
        var opcionesChinche = {
            position: coordenada,
            map: mapa,
            title:"Ubicacion del establecimiento",
            draggable: true
        };
        
        var chinche = new google.maps.Marker(opcionesChinche);
        google.maps.event.addListener(chinche, 'drag', function(e){
        document.getElementById('localizar').value=e.latLng;
        });
            
    }
    
   function errorMapa(errorsh)
    {
        $("#status").text("Casi te encontramos, espera...");
    }
    
    $(document).ready(
      function ()
        {
            geolocalizar();
            
        }
    );
</script>
 
 
</head>
 
<body>
<input type="text" id="localizar" style="width:10;" />
<p id="status"></p>
<div id="mapa_canvas"></div>
 
</body>
</html>

[URL="http://dl.dropbox.com/u/15574377/index.html"]Ver mapa en funcionamiento[/URL]

Un saludo.