buscador de google maps

maximendez88 · #1 (**permalink**) 17/09/2012, 12:16

buenas... soy nuevo en esto de google maps... me gustaria saber si alguien sabe alguna forma de poner el buscador de ciudades de google maps en mi web... espero que alguien me tire un cable.....

#2 (**permalink**) 17/09/2012, 15:32

No entiendo lo que quieres exactamente: ¿Buscador de ciudades o buscador de direcciones?

Puedes ver la geocodificación inversa de google maps (geocoder).

Tienes la documentación de referencia a la API V3 AQUI

maximendez88 · #3 (**permalink**) 17/09/2012, 15:56

me refiero a ese buscador....

ArturoGallegos · #4 (**permalink**) 17/09/2012, 16:00

checate este link ami me ayudo muchísimo el código que tiene de muestra es totalmente funcional solo agrégale lo que te haga falta, en el link que te dejo @txemaarbulo encontraras todo lo relacionado para completarlo a tus necesidades

http://www.masquewordpress.com/como-...ocoder-api-v3/

maximendez88 · #5 (**permalink**) 18/09/2012, 11:57

bueno gracias por las respuestas... investigando he logrado hacer el mapa, e insertarle un marcador en el cual se despliega la latitud y la longitud en un cartel que sale arriba del marcador.... mi problema ahora es que necesito que la latitud y la longitud se muestren por separado en los inputs de abajo...

. el ejemplo que me pasaron aqui va bien pero no logro que la latitud y la longitud se muestren en inputs separados...abajo del mapa.... alguien sabe como lograr hacer esto? aca va mi codigo para ver si alguien me da una mano

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Trip Minded - Add Site</title>





    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyA07VHJApYzXc3uJgFEk4l04KaSABLyaVA"
      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() {
            });
     
             
	      GEvent.trigger(marker, "click");
            }    marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              
          }
        );
      }
    }
	
	
	

	
    </script>


</head>

  <body onLoad="initialize()" onUnload="GUnload()">





<center>



<form action="#" onSubmit="showAddress(this.address.value); return false">

<table width="800" border="1">
  <tr>
    <th width="267" scope="row">&nbsp;</th>
    <td width="225"><div align="center"><strong class="s">Add Sites for your Circuit</strong></div></td>
    <td width="286">&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Select your Destiny:</th>
    <td><input type="text" style="width:500px" name="address" value="Select your destiny" /></td>
    <td> <input type="submit" value="Add Site!" /></td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td><div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Latitud:</th>
    <td><input type="text" name="x" style="width:500px;" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Longitud:</th>
    <td><input type="text" name="y" style="width:500px;" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>



</form>




</center>




</body>
</html>

maximendez88 · #6 (**permalink**) 18/09/2012, 12:56

bueno me autorespondo... lo he logradoo!!!!

aqui va mi codigo espero que le sea de utilidad a alguien

Código HTML:

 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyA07VHJApYzXc3uJgFEk4l04KaSABLyaVA"
      type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;
	var lat=null;
	var long=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() {
                
				 document.getElementById('lat').value=marker.getPoint().lat();
                 document.getElementById('long').value=marker.getPoint().lng();
              });
              GEvent.addListener(marker, "click", function() {
                
				 document.getElementById('lat').value=marker.getPoint().lat();
                 document.getElementById('long').value=marker.getPoint().lng();
              });
			  
			  
			  
			  
	      GEvent.trigger(marker, "click");
            }
          }
        );
      }
    }
    </script>

#7 (**permalink**) 18/09/2012, 13:52

Cita:

Iniciado por maximendez88

bueno me autorespondo... lo he logradoo!!!!

Es lo importante cuando tratamos de investigar. No obstante, quiero recordarte algo: lo estaba preparando cuando he visto tus logros:

- Por una parte utilizas la V2 del API de Google. Te recomiendo la V=3 que no requiere KEY y la versión 2 está en desuso y dejará de tener asistencia en 2013.

- Verás que el lenguaje es sensiblemente diferente, pero, personalmente después de haber mudado los códigos de una a otra versión, hasta diría que se entienden mejor, lo cual redunda en posibilidades de manipulación.

He tomado un ejemplo del enlace que te envié (a la izquierda, entre otras cosas tienes toda una sección de ejemplos para muchos efectos y cosas). Tan solo he modificado ligeramente el código (tanto HTML como Javascript) para darte los resultados de Latitud y Longitud.

Van en HTML5. El ejemplo original es ESTE.

El código que te había preparado y creo te será útil (lo merece tu esfuerzo) es:

Código HTML:

Ver original<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style type="text/css">   
  html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 
#map_canvas {
  height: 100%;
}
 
@media print {
  html, body {
    height: auto;
  }
 
  #map_canvas {
    height: 650px;
  }
}
</style>   
    <script>
      var geocoder;
      var map;
      function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      }
 
      function codeAddress() {
        geocoder = new google.maps.Geocoder();
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            document.getElementById('x').innerHTML = results[0].geometry.location.lat().toFixed(6);
            document.getElementById('y').innerHTML = results[0].geometry.location.lng().toFixed(6);
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    <div>
      <input id="address" type="textbox" value="Sydney, NSW" />
      <br />
      Latitud: <span id="x"></span>
      <br />
      Longitud: <span id="y"></span>
      <br />
      <input type="button" value="Localizar" onclick="codeAddress()">
    </div>
    <div id="map_canvas" style="height:90%;"></div>
  </body>
</html>

Claro está que el cuadro del mapa lo modificas a placer con CSS.

Saludos y éxitos

maximendez88 · #8 (**permalink**) 21/09/2012, 13:19

muchas gracias... he migrado ya a google maps v3.... muchas gracias el ejemplo me fue de mucha utilidad