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