Api google maps

franjgg · #1 (**permalink**) 11/04/2013, 02:53

Hola como estan,

Veran necesito usar el api de google maps para pasar una direccion y provincia y que me muestre el lugar me devuelva las coordenadas y si el lugar que muestra no es correcto se pueda arrastrar el icono para ponerlo donde sea correcto.

Una ultima cosa es guardar las cordenadas en una base de datos

Estado mirando en la api pero no encuentro codigos de ejemplo que me puedan ayudar para hacer esto.

A ver si alguien maneja un poquito esta api y me puede orientar un poquito, o conoce algun ejemplo.

Un saludo amigos

ipraetoriux · #2 (**permalink**) 11/04/2013, 03:18

...lo que necesitas es usar el objeto Geocode...en un input ingresas la direccion, la envias como parametro al objeto Geocode, y de ahi objtienes el lat y el lng. Luego creas una marca, la ubicas y le das la opcion true en dragabble...aca tienes una ejemplo clarito de lo que tienes que hacer http://gmaps-samples.googlecode.com/...legeocode.html

...luego para almacenarla en la base de datos, creas un evento al terminar el drag de la marca, o al situaar la marca con el resultado del geocode, luego envias la lat y la lng a la base de datos por medio de XMLHttpRequest..o sea AJAX, y listo..

franjgg · #3 (**permalink**) 11/04/2013, 03:25

Hola amigo ipratoriux gracias por tu atencion,

Como podria acceder al codigo del ejemplo que me has enviado?

Simplemente con la opcion de ver codigo desde el navegador?

O google lo ofrece en algun lugar?

He encontrado este ejemplo que es lo que necesito pero en lugar de pulsar el boton y que muestre la imagen, que la muestre directamente y se pueda desplazar y cambie las cordenadas.

http://gmaps-samples-v3.googlecode.c...getlatlng.html

Un saludo amigo

ipraetoriux · #4 (**permalink**) 11/04/2013, 03:53

aca tienes todo el codigo

Código HTML:

Ver original<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<style type="text/css">
  div#map {
    position: relative;
  }
 
  div#crosshair {
    position: absolute;
    top: 192px;
    height: 19px;
    width: 19px;
    left: 50%;
    margin-left: -8px;
    display: block;
    background: url(crosshair.gif);
    background-position: center center;
    background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  var geocoder;
  var centerChangedLast;
  var reverseGeocodedLast;
  var currentReverseGeocodeResponse;
 
  function initialize() {
    var latlng = new google.maps.LatLng(32.5468,-23.2031);
    var myOptions = {
      zoom: 2,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
 
 
    setupEvents();
    centerChanged();
  }
 
  function setupEvents() {
    reverseGeocodedLast = new Date();
    centerChangedLast = new Date();
 
    setInterval(function() {
      if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
        if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
          reverseGeocode();
      }
    }, 1000);
 
    google.maps.event.addListener(map, 'zoom_changed', function() {
      document.getElementById("zoom_level").innerHTML = map.getZoom();
    });
 
    google.maps.event.addListener(map, 'center_changed', centerChanged);
 
    google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
       map.setZoom(map.getZoom() + 1);
    });
 
  }
 
  function getCenterLatLngText() {
    return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
  }
 
  function centerChanged() {
    centerChangedLast = new Date();
    var latlng = getCenterLatLngText();
    document.getElementById('latlng').innerHTML = latlng;
    document.getElementById('formatedAddress').innerHTML = '';
    currentReverseGeocodeResponse = null;
  }
 
  function reverseGeocode() {
    reverseGeocodedLast = new Date();
    geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
  }
 
  function reverseGeocodeResult(results, status) {
    currentReverseGeocodeResponse = results;
    if(status == 'OK') {
      if(results.length == 0) {
        document.getElementById('formatedAddress').innerHTML = 'None';
      } else {
        document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
      }
    } else {
      document.getElementById('formatedAddress').innerHTML = 'Error';
    }
  }
 
 
  function geocode() {
    var address = document.getElementById("address").value;
    geocoder.geocode({
      'address': address,
      'partialmatch': true}, geocodeResult);
  }
 
  function geocodeResult(results, status) {
    if (status == 'OK' && results.length > 0) {
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  }
 
  function addMarkerAtCenter() {
    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map
    });
 
    var text = 'Lat/Lng: ' + getCenterLatLngText();
    if(currentReverseGeocodeResponse) {
      var addr = '';
      if(currentReverseGeocodeResponse.size == 0) {
        addr = 'None';
      } else {
        addr = currentReverseGeocodeResponse[0].formatted_address;
      }
      text = text + '<br>' + 'address: <br>' + addr;
    }
 
    var infowindow = new google.maps.InfoWindow({ content: text });
 
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }
 
</script>
</head>
<body onload="initialize()">
  Find Place: <input type="text" id="address"/><input type="button" value="Go" onclick="geocode()"><input type="button" value="Add Marker at Center" onclick="addMarkerAtCenter()"/>
  <div id="map">
    <div id="map_canvas" style="width:100%; height:400px"></div>
    <div id="crosshair"></div>
  </div>
 
  <table>
    <tr><td>Lat/Lng:</td><td><div id="latlng"></div></td></tr>
    <tr><td>Address:</td><td><div id="formatedAddress"></div></td></tr>
    <tr><td>Zoom Level</td><td><div id="zoom_level">2</div></td></tr>
  </table>
</body>
</html>

franjgg · #5 (**permalink**) 11/04/2013, 04:02

Muchas gracias por tu atencion amigo,

Eso es casi lo que necesitaba por completo es genial,

La unica cosa que necesito es cambiar que en lugar de pulsar el boton y salga la imagen con la flechita, se muestre directamente y se pueda arrastras para cambiar la direccion,

He encontrado esta funcion que creo que es la que hace que sea arrastrable, la he añadido al codigo que me has enviado pero parece que no anda.

Código Javascript:

Ver originalfunction initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    var center = new GLatLng(37.4419, -122.1419);
    map.setCenter(center, 13);
 
    var marker = new GMarker(center, {draggable: true});
 
    GEvent.addListener(marker, "dragstart", function() {
      map.closeInfoWindow();
    });
 
    GEvent.addListener(marker, "dragend", function() {
      marker.openInfoWindowHtml("Just bouncing along...");
    });
 
    map.addOverlay(marker);
 
  }
}

Un saludo y nuevo muchas gracias por tu atencion amigo

ipraetoriux · #6 (**permalink**) 11/04/2013, 04:16

...es que no te va a funcionar porque este código que me has puesto acá es de Google Maps API versión 2, y yo te puse la versión 3, tanto en el link como en el código que te pase...si te fijas el link que te mande...buscar por dirección, si encuentra la ubicación te muestra la marca, si le das click te muestra el lat y lng, y los podes arrastrar la marca...no es eso lo que necesitas?

franjgg · #7 (**permalink**) 11/04/2013, 04:30

UMM, si amigo lo que no se es como puedo pasar esa latitud y longitud a un campo de texto para poder guardarlos en una base de datos posteriormente al pulsar un submit

Un saludo amigo

franjgg · #8 (**permalink**) 11/04/2013, 06:04

Hola de nuevo amigo,

He conseguido cojer las coordenadas apartir del codigo que me has enviado, la unica cosa que me falta es que cuando movemos la marca las coordenadas no se actualizan,

A ver si puede echarme una manilla.

este es el codigo completo:

Código HTML:

Ver original<script src="http://maps.google.com/maps?file=api&v=2.x&key=AIzaSyB6aZ5WHW3WiTHExADSYls_fal7ez3o504" type="text/javascript"></script>
     <script src="http://maps.google.com/maps?file=api&v=2.x&key=AIzaSyB6aZ5WHW3WiTHExADSYls_fal7ez3o504" type="text/javascript"></script>
     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
      type="text/javascript"></script>
    <script type="text/javascript">
 
    var map = null;
    var geocoder = null;
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 1);
        map.setUIToDefault();
        geocoder = new GClientGeocoder();
      }
    }
 
 
 
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
 
              map.setCenter(point, 15);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);
              GEvent.addListener(marker, "dragend", function() {
                            
               if(document.getElementById('address').value != "") {
                  var address = document.getElementById('address').value;
                  geocoder.getLatLng(address, function(point) {
                    if (!point) {
                      alert(address + ' no encontrado');
                    } else {
                      document.getElementById('latitud').value = point.y;
                      document.getElementById('longitud').value = point.x;
                    }    
                    });}
 
              });
              GEvent.addListener(marker, "click", function() {
                            
               if(document.getElementById('address').value != "") {
                  var address = document.getElementById('address').value;
                  geocoder.getLatLng(address, function(point) {
                    if (!point) {
                      alert(address + ' no encontrado');
                    } else {
                      document.getElementById('latitud').value = point.y;
                      document.getElementById('longitud').value = point.x;
                    }    
                    });}
              });
          GEvent.trigger(marker, "click");
            }
          }
        );
      }
    }
        
    
        
    
    </script>
  </head>
 
  <body onload="initialize()" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
      <p>
        Enter an address, and then drag the marker to tweak the location.
        <br/>
        The latitude/longitude will appear in the infowindow after each geocode/drag.
      </p>
      <p>
        <input type="text" style="width:350px" name="address" id="address" value="1600 Amphitheatre Pky, Mountain View, CA" />
        <input type="submit" value="Go!"/>    <tr><td>Lat/Lng:</td><td><div id="latlng"></div></td></tr>
      </p>
      <div id="map_canvas" style="width: 600px; height: 400px"></div>
    <input name="latitud" type="text" id="latitud" size="45" />
    <input name="longitud" type="text" id="longitud" size="45" />                   
    </form>

Con esto ya podria enviar las coordenadas mediante un form y guardarlas en la base de datos.

Bueno un saludo amigo