Seleccionar Ubicacion API Google Maps

deywibkiss · #1 (**permalink**) 26/09/2012, 12:12

Hola a todos. Tengo un dilema, necesito saber cómo hacer para que un usuario pueda interactuar con el mapa de google maps, seleccionar una ubicacion y que luego me retorne el valor en coordenadas o en direccion para guardarlo en mi BD.

Ya cargo el mapa, lo centro y le doy otros atributos, pero no sé como habilitar la opcion para que el usuario escoja y setee una ubicacion. Gracias.

#2 (**permalink**) 26/09/2012, 13:46

Puedes hacerlo de dos formas:

1.- Pidiendo al usuario que te facilite la ubicación (puedes ver el tema buscador de google maps desarrollado en forosdelweb).

2.- Mediante el estándar W3C Geolocation integrada a Google Maps. (ver la docmentación, código y ejemplo AQUI). Requiere la autorización del usuario para mostrar su posición.

En cualquiera de los dos casos recoges los datos de tu interés y los trasladas a una base de datos o creas un XML.

Una síntesis del proceso lo explicaba en php cuando usar api google maps

deywibkiss · #3 (**permalink**) 27/09/2012, 21:58

creo que no me hice entender....

El problema no es convertir una ubicacion desde la BD hacia el mapa, ya manejo bien el geocoder y lo puedo hacer.

Lo que necesito es lo siguiente:

cargar un mapa de google maps

mostrarlo al usuario

que el usuario de click sobre el mapa y las coordenadas del punto recogerlas para despues guardar esas coordenadas en mi BD.

No necesito detectar la ubicacion del usuario... necesito que el usuario elija cualquier punto del mapa y yo guardar ese valor en mi BD

#4 (**permalink**) 28/09/2012, 02:02

Cita:

Iniciado por deywibkiss

creo que no me hice entender....

El problema no es convertir una ubicacion desde la BD hacia el mapa, ya manejo bien el geocoder y lo puedo hacer.

Lo que necesito es lo siguiente:

cargar un mapa de google maps

mostrarlo al usuario

que el usuario de click sobre el mapa y las coordenadas del punto recogerlas para despues guardar esas coordenadas en mi BD.

No necesito detectar la ubicacion del usuario... necesito que el usuario elija cualquier punto del mapa y yo guardar ese valor en mi BD

¿Lo que quieres es algo como ESTO ?

Los datos te los he dejado encima del mapa para que los recojas mediante un pequeño form a enviar o mediante ajax.

El código completo es éste:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Google Maps  Weater Layer</title>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;libraries=weather&amp;language=es"></script>
    <script type="text/javascript">
<!-- //
      var map;
      var geocoder;
      var infoWindow;
      var marker;
window.onload = function () {
  var latLng = new google.maps.LatLng(43.268846,-2.934834);
  var opciones = {
    center: latLng,
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), opciones);
        geocoder = new google.maps.Geocoder();
        infowindow = new google.maps.InfoWindow();
        
        google.maps.event.addListener(map, 'click', function(event) {
          geocoder.geocode(
              {'latLng': event.latLng},
              function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                  if (results[0]) {
                    document.getElementById('direccion').value = results[0].formatted_address;
                    document.getElementById('coordenadas').value = results[0].geometry.location;
                    if (marker) {
                      marker.setPosition(event.latLng);
                    } else {
                      marker = new google.maps.Marker({
                         position: event.latLng,
                         map: map});
                    }
                    infowindow.setContent(results[0].formatted_address+'<br/> Coordenadas: '+results[0].geometry.location);
                    infowindow.open(map, marker);
                  } else {
                    document.getElementById('geocoding').innerHTML =
                        'No se encontraron resultados';
                  }
                } else {
                  document.getElementById('geocoding').innerHTML =
                      'Geocodificación  ha fallado debido a: ' + status;
                }
              });
        });
  
}
// -->
</script>
  </head>
  <body>
              Dirección de destino: <input type="text" id="direccion" size="60" value="" />
              <br/>
              Coordenadas: <input type="text" id="coordenadas" size="30" value="" />
              <br/>
              <span id="geocoding"></span>
    <div id="map_canvas" style="width:100%; height:90%"></div>
  </body>
</html>

deywibkiss · #5 (**permalink**) 02/10/2012, 10:43

Gracias Sensei has dado con lo que pedia, muchas gracias de verdad....

federic · #6 (**permalink**) 18/10/2012, 04:04

Hola, gracias por la aportación. Esto es lo que realmente estoy buscando, pero he copiado el código y no me funciona.
¿Podrías decirme si he de cambiar algo?
Lo que pasa es que no aparece el mapa
Gracias

federic · #7 (**permalink**) 18/10/2012, 04:07

Solucionado, gracias