¿Cómo guardar una ubicación de Google Maps?

DarkKing · #1 (**permalink**) 07/04/2011, 05:52

Muy buenas,
He buscado esto, pero me imagino que no lo suficientemente bien, porque no he dado con la respuesta.

Lo que quiero conseguir es mostrar un pequeño recuadro con un mapa de Google Maps en una página y que al hacer click en un lugar de éste, se quede marcado y obtenga las coordenadas (por ejemplo, añadirlas a un input).

Luego lo que querría es mostrar también un pequeño mapa que se sitúe en las coordenadas que le paso yo como parámetro.

Gracias!

abimaelrc · #2 (**permalink**) 07/04/2011, 07:01

Me perdí un poco en lo que deseas hacer. Pero, según lo que entendí, lo que mencionas se logra con el evento addListener. Algo así

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>test</title>
    <style>
    *{ margin: 0; padding: 0; }
    html, body, #map{
        width: 100%;
        height: 100%;
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
    <script type="text/javascript">
    window.onload = function(){
        var options = {
            zoom: 9
            , center: new google.maps.LatLng(18.2, -66.5)
            , mapTypeId: google.maps.MapTypeId.ROADMAP
        };
     
        var map = new google.maps.Map(document.getElementById('map'), options);
 
        google.maps.event.addListener(map, 'click', function(e){
            alert(e.latLng);
        });
    };
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

DarkKing · #3 (**permalink**) 07/04/2011, 07:12

Hola abimaelrc

¿Eso es para mostrar un mapa dadas la latitud y longitud?
¡Gracias! Es parte de lo que necesitaba.

Pero también necesito que al hacer click en una parte del mapa, obtener las coordenadas y se añadan en un input text.

abimaelrc · #4 (**permalink**) 07/04/2011, 07:16

Eso ya es javascript. Solo es cuestión de crear un campo con el atributo id y usar document.getElementById e insertar lo que deseas.

DarkKing · #5 (**permalink**) 07/04/2011, 07:27

¿Hay algún código de ejemplo?
Porque no sé cual es la ID del nodo que contiene la latitud y longitud.
Tampoco sé cómo se hace para capturarlo cuando el usuario hace click en el mapa.

abimaelrc · #6 (**permalink**) 07/04/2011, 07:33

Pero si te lo estoy demostrando, hazle click al mapa para que veas

anacona16 · #7 (**permalink**) 07/04/2011, 07:44

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>test</title>
    <style>
    *{ margin: 0; padding: 0; }
    html, body, #map{
        width: 100%;
        height: 100%;
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
    <script type="text/javascript">
    window.onload = function(){
        var options = {
            zoom: 9
            , center: new google.maps.LatLng(18.2, -66.5)
            , mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    *
        var map = new google.maps.Map(document.getElementById('map'), options);
 
        google.maps.event.addListener(map, 'click', function(e){
            alert(e.latLng);
document.getElementById('datos').value = e.latLng;
        });
    };
    </script>
</head>
<body>
    <div id="map"></div>
<input name="map" type="text" id="datos" />
</body>
</html>

Como te dice abimaelrc es la forma correcta solo debes agregar el input y el evento que agrega la informacion, pruba con el codigo que he completado, el parte de abajo despues del mapa esta el input con las coordenadas.

JavierB · #8 (**permalink**) 07/04/2011, 08:35

Hola, DarkKing

Muevo tu tema al foro de APIs y Servicios desde Javascript.

Saludos,

DarkKing · #9 (**permalink**) 07/04/2011, 14:04

Muchas gracias JavierB y abimaelrc.
Vuestras respuestas son justo lo que buscaba.
¡Problema resuelto!