Ver Mensaje Individual
  #7 (permalink)  
Antiguo 25/03/2009, 16:30
Avatar de karlic0s
karlic0s
 
Fecha de Ingreso: abril-2007
Ubicación: Cartagena (Murcia)
Mensajes: 241
Antigüedad: 17 años
Puntos: 18
Respuesta: Insertar Coordenadas de google maps en mysql

Yo he encontrado un script bastante bueno y lo modifiqué a mi gusto, te pongo mi codigo y de ahi sacas conclusiones :P

Primero el javascript:

Esta funcion se encarga de copiar la dirección completa de tres campos: provincia, ciudad, calle en otro campo input

Código PHP:
<script type="text/javascript">
function 
copiar(frm) {
  
frm.address.value frm.provinciaList.value+' '+frm.localidadList.value+' '+frm.t3.value;
}
</script> 
Aquí el script de googlemaps (cambia las keys):

Código PHP:
<!-- localhost -->
<!-- <
script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true
    &amp;key=ABQIAAAAlnCuVAz3joudtuBZyyjeGBQ7dS0Aaw1_Q1fdUKG1GXi9hqLEUhTsO6DjXuhO2pK4n6nDQ_d5DrVN_Q"
    
type="text/javascript"></script> -->
<!-- servidor -->

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true
    &amp;key=ABQIAAAAlnCuVAz3joudtuBZyyjeGBQ7dS0Aaw1_Q1fdUKG1GXi9hqLEUhTsO6DjXuhO2pK4n6nDQ_d5DrVN_Q"
    type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    // Inicialización de variables.
    var map      = null;
    var geocoder = null;

    function load() {                                      // Abre LLAVE 1.
      if (GBrowserIsCompatible()) {                           // Abre LLAVE 2.
        map = new GMap2(document.getElementById("map"));

        map.setCenter(new GLatLng(40.229218,-4.240723), 5);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());

        geocoder = new GClientGeocoder();

        //---------------------------------//
        //   MARCADOR AL HACER CLICK
        //---------------------------------//
        GEvent.addListener(map, "click",
            function(marker, point) {
                  if (marker) {
                       null;
                      } else {
                      map.clearOverlays();
                    var marcador = new GMarker(point);
                    map.addOverlay(marcador);
                    //marcador.openInfoWindowHtml("<b><br>Coordenadas:<br></b>Latitud : "+point.y+"<br>Longitud : "+point.x+"<a href=http://www.mundivideo.com/fotos_pano.htm?lat="+point.y+"&lon="+point.x+"&mapa=3 TARGET=fijo><br><br>Fotografias</a>");
                    //marcador.openInfoWindowHtml("<b>Coordenadas:</b> "+point.y+","+point.x);
                    document.form_mapa.coordenadas.value = point.y+","+point.x;
                    }
              }
            );
        //---------------------------------//
        //   FIN MARCADOR AL HACER CLICK
        //---------------------------------//

      } // Cierra LLAVE 1.
    }   // Cierra LLAVE 2.

    //---------------------------------//
    //           GEOCODER
    //---------------------------------//
    function showAddress(address, zoom) {
        if (geocoder) {
            geocoder.getLatLng(address,
                  function(point) {
                    if (!point) {
                        alert(address + " no se ha encontrado, si esta dirección existe y no aparece en el mapa situa manualmente el punto en el mapa haciendo click donde este la ubicación dejando los campos del formulario correctamente");
                    } else {
                        map.setCenter(point, zoom);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        //marker.openInfoWindowHtml("<b>"+address+"</b><br>Coordenadas:<br>Latitud : "+point.y+"<br>Longitud : "+point.x+"<a href=http://www.mundivideo.com/fotos_pano.htm?lat="+point.y+"&lon="+point.x+"&mapa=3 TARGET=fijo><br><br>Fotografias</a>");
                        // marker.openInfoWindowHtml("<b>Coordenadas:</b> "+point.y+","+point.x);
                         document.form_mapa.coordenadas.value = point.y+","+point.x;
                       }
                   }
            );
          }}
    //---------------------------------//
    //     FIN DE GEOCODER
    //---------------------------------//

    //]]>
     </script>



      <script type="text/javascript" src="http://www.diariothc.com/wp-content/codes/animatedcollapse.js"></script>
      <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true
    &amp;key=ABQIAAAAlnCuVAz3joudtuBZyyjeGBQ7dS0Aaw1_Q1fdUKG1GXi9hqLEUhTsO6DjXuhO2pK4n6nDQ_d5DrVN_Q"
    type="text/javascript"></script> 
Y el codigo del body (recuerda <body onLoad="load();" onunload="GUnload();">) con los formularios:


Código PHP:
//abrimos form:

     
<body onLoad="load();"  onunload="GUnload();">

    <
form name="form_mapa" action="#" onsubmit=" showAddress(this.address.value, this.zoom.value=parseFloat(this.zoom.value)); return false">

// provincia
<select name="provinciaList" id="provinciaList" onChange="return provinciaListOnChange()" onclick="copiar(this.form)" />
<
option >Seleccione una provincia...</option>
<
option >Provincias...</option>        
</
select>

//localidades
<select name="localidadList" id="localidadList" onclick="copiar(this.form)" />
<
option >Seleccione una localidad...</option>
<
option >localidades...</option>
</
td>
</
select

//calle
<input id="t3" type=text name="t3" onkeyup="copiar(this.form)" />

//boton de situar en mapa una vez introducidos los datos:
<input class="situar" type="submit" value="Situar en mapa" />

//input que muestra la dirección completa que se ha escrito en los tres formularios de antes y con el primer script se han trasladado a este formulario:

<input type="hidden" name="address"  />

<
input type="hidden" size="1" name="zoom" value=15 />

//aqui se muetran las coordenadas una vez que se le da al boton de "situar en mapa":

<input type="text" id="coordenadas" name="coordenadas" value="" style="width: 400px;font-size: 10px;font-family: verdana;font-weight: bold;" />

//div del mapa:
<div id="map" style="width: 432px; height: 300px"></div>

//cerramos form:
</form>

</
body

Solo te queda coger con ajax el campo input coordenadas del primer formulario y mandarlo por ejemplo con post a otra pagina para que se guarden en la base de datos, espero que te sirva, saludos!!

Última edición por karlic0s; 25/03/2009 a las 16:48 Razón: editado, me faltaba: <body onLoad="load();" onunload="GUnload();">