Foros del Web » Programando para Internet » PHP »

Coordenadas de Google Maps

Estas en el tema de Coordenadas de Google Maps en el foro de PHP en Foros del Web. Hola que tal, un cliente me pidio hacer un directorio de servicios para su web site en donde los que quieran inscribirse llenen un formulario ...
  #1 (permalink)  
Antiguo 09/06/2011, 13:30
 
Fecha de Ingreso: agosto-2006
Mensajes: 9
Antigüedad: 17 años, 7 meses
Puntos: 0
Coordenadas de Google Maps

Hola que tal, un cliente me pidio hacer un directorio de servicios para su web site en donde los que quieran inscribirse llenen un formulario con su nombre, dirección, nombre del negocio etc. esto se gurda en una base de datos la cual ya esta y todo, pero el problema surgio cuando me pidio que se agregara un mapa de Google Maps y que detectara automaticamente el lugar cercano al negocio con la geolocalización para que detecte el lugar de donde aproximadamente se esta registrando la persona, hasta ahi ya puede resolverlo.

Aqui comienza mi problema, luego, quiere que se agregue un marcador draggable con el cual el cliente marque su posición exacta de su negocio y que las coordenadas las envie a otro campo para poder guardarlas en la base de datos.

Alguien me puede decir en donde puedo encontrar algun ejemplo o manual en donde pueda ver como se hace esto y pues mejor aun si alguien sabe como se hace esto ultimo, le agradeciaria que me diera el tip.

Muchas gracias, espero puedan ayudarme.
  #2 (permalink)  
Antiguo 09/06/2011, 13:42
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 14 años, 10 meses
Puntos: 1517
Respuesta: Coordenadas de Google Maps

Trata este http://www.maestrosdelweb.com/guias/

Edito:
Es algo bien sencillo, algo así
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.     <title>test</title>
  5.     <style>
  6.     *{ margin: 0; padding: 0; }
  7.     html, body, #map{
  8.         width: 100%;
  9.         height: 100%;
  10.     }
  11.     </style>
  12.     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
  13.     <script type="text/javascript">
  14.     window.onload = function(){
  15.         var options = {
  16.             zoom: 9
  17.             , center: new google.maps.LatLng(18.2, -66.5)
  18.             , mapTypeId: google.maps.MapTypeId.ROADMAP
  19.         };
  20.  
  21.         var map = new google.maps.Map(document.getElementById('map'), options);
  22.  
  23.         var marker = new google.maps.Marker({
  24.             position: map.getCenter()
  25.             , map: map
  26.             , title: 'Muéveme'
  27.             , draggable: true
  28.         });
  29.  
  30.         google.maps.event.addListener(marker, 'dragend', function(e){
  31.             alert(e.latLng);
  32.         });
  33.     };
  34.     </script>
  35. </head>
  36.     <div id="map"></div>
  37. </body>
  38. </html>
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos

Última edición por abimaelrc; 09/06/2011 a las 13:52
  #3 (permalink)  
Antiguo 09/06/2011, 18:40
 
Fecha de Ingreso: agosto-2006
Mensajes: 9
Antigüedad: 17 años, 7 meses
Puntos: 0
Respuesta: Coordenadas de Google Maps

Gracias abimaelrc:

Abusando de tu conocimiento en Google Maps como le haria para que un texto que tengo arriba del mapa que es el que da la latitud y longitud, cambie cada vez que muevo el puntero, ya que se queda con las coordenadas que detecta con la geolocalización, mira este es mi codigo, ya le agregue el draggable: true



Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5.  
  6. <script src="http://maps.google.com/maps/api/js?sensor=false">
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
  8. <script type="text/javascript">
  9. function geolocalizar()
  10.     {
  11.         $("#status").text("Espera te estamos localizando...");
  12.         navigator.geolocation.getCurrentPosition(mostrarMapa, errorMapa);
  13.     }
  14.    
  15.     function mostrarMapa(posicion)
  16.     {
  17.         var lat = posicion.coords.latitude;
  18.         var lon = posicion.coords.longitude;
  19.         $("#status").text("Te encontramos! Estas en: " + lat + "," + lon);
  20.        
  21.         $("#mapa_canvas").css("height", "300px");
  22.         $("#mapa_canvas").css("width", "400px");
  23.         $("#mapa_canvas").css("margin", "left");
  24.         var coordenada = new google.maps.LatLng(lat,lon);
  25.         var opciones = {
  26.             zoom: 16,
  27.             center: coordenada,
  28.             mapTypeId: google.maps.MapTypeId.ROADMAP
  29.         };
  30.         var mapa = new google.maps.Map(document.getElementById("mapa_canvas"), opciones);
  31.        
  32.         var opcionesChinche = {
  33.             position: coordenada,
  34.             map: mapa,
  35.             title:"Ubicacion del establecimiento",
  36.             draggable: true
  37.         };
  38.        
  39.         var chinche = new google.maps.Marker(opcionesChinche);
  40.            
  41.     }
  42.    
  43.    function errorMapa(errorsh)
  44.     {
  45.         $("#status").text("Casi te encontramos, espera...");
  46.     }
  47.    
  48.     $(document).ready(
  49.       function ()
  50.         {
  51.             geolocalizar();
  52.            
  53.         }
  54.     );
  55.  
  56.  
  57. </head>
  58.  
  59.  
  60. <p id="status"></p> //Aqui muestro los mensajes del estado (latitud y longitud)
  61. <div id="mapa_canvas"></div>
  62.  
  63. </body>
  64. </html>

Realmente tengo que meterme de lleno con la guia de la API de GMaps , aun soy algo novato en la programación.

Muchas gracias por la ayuda.
  #4 (permalink)  
Antiguo 09/06/2011, 21:38
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 14 años, 10 meses
Puntos: 1517
Respuesta: Coordenadas de Google Maps

Pero no veo que tengas para que cuando muevas el marcardor te muestre las nuevas coordenadas Solo es cuestión de darle un id al campo y luego usando document.getElementById('nombreDelCampo').value = e.latLng;
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #5 (permalink)  
Antiguo 10/06/2011, 12:57
 
Fecha de Ingreso: agosto-2006
Mensajes: 9
Antigüedad: 17 años, 7 meses
Puntos: 0
De acuerdo Respuesta: Coordenadas de Google Maps

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5.  
  6. <script src="http://maps.google.com/maps/api/js?sensor=false">
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
  8. <script type="text/javascript">
  9. function geolocalizar()
  10.     {
  11.         $("#status").text("Espera te estamos localizando...");
  12.         navigator.geolocation.getCurrentPosition(mostrarMapa, errorMapa);
  13.     }
  14.    
  15.     function mostrarMapa(posicion)
  16.     {
  17.         var lat = posicion.coords.latitude;
  18.         var lon = posicion.coords.longitude;
  19.         $("#status").text("Te encontramos! Estas en: " + lat + "," + lon);
  20.        
  21.         $("#mapa_canvas").css("height", "300px");
  22.         $("#mapa_canvas").css("width", "400px");
  23.         $("#mapa_canvas").css("margin", "left");
  24.         var coordenada = new google.maps.LatLng(lat,lon);
  25.         var opciones = {
  26.             zoom: 16,
  27.             center: coordenada,
  28.             mapTypeId: google.maps.MapTypeId.ROADMAP
  29.         };
  30.         var mapa = new google.maps.Map(document.getElementById("mapa_canvas"), opciones);
  31.        
  32.         var opcionesChinche = {
  33.             position: coordenada,
  34.             map: mapa,
  35.             title:"Ubicacion del establecimiento",
  36.             draggable: true
  37.         };
  38.        
  39.         var chinche = new google.maps.Marker(opcionesChinche);
  40.         google.maps.event.addListener(chinche, 'drag', function(e){
  41.         document.getElementById('localizar').value=e.latLng;
  42.         });
  43.            
  44.     }
  45.    
  46.    function errorMapa(errorsh)
  47.     {
  48.         $("#status").text("Casi te encontramos, espera...");
  49.     }
  50.    
  51.     $(document).ready(
  52.       function ()
  53.         {
  54.             geolocalizar();
  55.            
  56.         }
  57.     );
  58.  
  59.  
  60. </head>
  61.  
  62. <input type="text" id="localizar" style="width:10;" />
  63. <p id="status"></p>
  64. <div id="mapa_canvas"></div>
  65.  
  66. </body>
  67. </html>
[URL="http://dl.dropbox.com/u/15574377/index.html"]Ver mapa en funcionamiento[/URL]


Un saludo.

Última edición por musashi003; 10/06/2011 a las 13:02

Etiquetas: coordenadas, google, maps
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:00.