Ver Mensaje Individual
  #4 (permalink)  
Antiguo 28/09/2012, 02:02
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Seleccionar Ubicacion API Google Maps

Cita:
Iniciado por deywibkiss Ver Mensaje
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
  1. <!DOCTYPE html>
  2.     <head>
  3.     <meta charset="utf-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  5.     <title>Google Maps  Weater Layer</title>
  6. <style type="text/css">
  7.   html { height: 100% }
  8.   body { height: 100%; margin: 0px; padding: 0px }
  9.   #map_canvas { height: 100% }
  10.     <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;libraries=weather&amp;language=es"></script>
  11.     <script type="text/javascript">
  12. <!-- //
  13.      var map;
  14.      var geocoder;
  15.      var infoWindow;
  16.      var marker;
  17. window.onload = function () {
  18.  var latLng = new google.maps.LatLng(43.268846,-2.934834);
  19.  var opciones = {
  20.    center: latLng,
  21.    zoom: 5,
  22.    mapTypeId: google.maps.MapTypeId.HYBRID
  23.  };
  24.  var map = new google.maps.Map(document.getElementById('map_canvas'), opciones);
  25.         geocoder = new google.maps.Geocoder();
  26.        infowindow = new google.maps.InfoWindow();
  27.        
  28.         google.maps.event.addListener(map, 'click', function(event) {
  29.          geocoder.geocode(
  30.              {'latLng': event.latLng},
  31.              function(results, status) {
  32.                if (status == google.maps.GeocoderStatus.OK) {
  33.                  if (results[0]) {
  34.                     document.getElementById('direccion').value = results[0].formatted_address;
  35.                     document.getElementById('coordenadas').value = results[0].geometry.location;
  36.                    if (marker) {
  37.                      marker.setPosition(event.latLng);
  38.                    } else {
  39.                      marker = new google.maps.Marker({
  40.                         position: event.latLng,
  41.                         map: map});
  42.                    }
  43.                    infowindow.setContent(results[0].formatted_address+'<br/> Coordenadas: '+results[0].geometry.location);
  44.                    infowindow.open(map, marker);
  45.                  } else {
  46.                    document.getElementById('geocoding').innerHTML =
  47.                        'No se encontraron resultados';
  48.                  }
  49.                } else {
  50.                  document.getElementById('geocoding').innerHTML =
  51.                      'Geocodificación  ha fallado debido a: ' + status;
  52.                }
  53.              });
  54.        });
  55.  
  56. }
  57. // -->
  58.   </head>
  59.   <body>
  60.               Dirección de destino: <input type="text" id="direccion" size="60" value="" />
  61.               <br/>
  62.               Coordenadas: <input type="text" id="coordenadas" size="30" value="" />
  63.               <br/>
  64.               <span id="geocoding"></span>
  65.     <div id="map_canvas" style="width:100%; height:90%"></div>
  66.   </body>
  67. </html>