Foros del Web » Programando para Internet » Javascript » Frameworks JS »

buscador de google maps

Estas en el tema de buscador de google maps en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/09/2012, 12:16
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 3
Exclamación buscador de google maps

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)  
Antiguo 17/09/2012, 15:32
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: buscador de google maps

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
  #3 (permalink)  
Antiguo 17/09/2012, 15:56
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 3
Respuesta: buscador de google maps




me refiero a ese buscador....
  #4 (permalink)  
Antiguo 17/09/2012, 16:00
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: buscador de google maps

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/
  #5 (permalink)  
Antiguo 18/09/2012, 11:57
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 3
Sonrisa Respuesta: buscador de google maps

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> 
  #6 (permalink)  
Antiguo 18/09/2012, 12:56
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 3
Respuesta: buscador de google maps

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)  
Antiguo 18/09/2012, 13:52
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: buscador de google maps

Cita:
Iniciado por maximendez88 Ver Mensaje
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
  1. <!DOCTYPE html>
  2.   <head>
  3.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  4.     <meta charset="utf-8">
  5.     <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
  6.     <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  7. <style type="text/css">  
  8.   html, body {
  9.   height: 100%;
  10.   margin: 0;
  11.   padding: 0;
  12. }
  13.  
  14. #map_canvas {
  15.   height: 100%;
  16. }
  17.  
  18. @media print {
  19.   html, body {
  20.     height: auto;
  21.   }
  22.  
  23.   #map_canvas {
  24.     height: 650px;
  25.   }
  26. }
  27. </style>  
  28.     <script>
  29.       var geocoder;
  30.       var map;
  31.       function initialize() {
  32.         var latlng = new google.maps.LatLng(-34.397, 150.644);
  33.         var mapOptions = {
  34.           zoom: 8,
  35.           center: latlng,
  36.           mapTypeId: google.maps.MapTypeId.ROADMAP
  37.         }
  38.         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  39.       }
  40.  
  41.       function codeAddress() {
  42.         geocoder = new google.maps.Geocoder();
  43.         var address = document.getElementById('address').value;
  44.         geocoder.geocode( { 'address': address}, function(results, status) {
  45.           if (status == google.maps.GeocoderStatus.OK) {
  46.             document.getElementById('x').innerHTML = results[0].geometry.location.lat().toFixed(6);
  47.             document.getElementById('y').innerHTML = results[0].geometry.location.lng().toFixed(6);
  48.             map.setCenter(results[0].geometry.location);
  49.             var marker = new google.maps.Marker({
  50.                 map: map,
  51.                 position: results[0].geometry.location
  52.             });
  53.           } else {
  54.             alert('Geocode was not successful for the following reason: ' + status);
  55.           }
  56.         });
  57.       }
  58.     </script>
  59.   </head>
  60.   <body onload="initialize()">
  61.     <div>
  62.       <input id="address" type="textbox" value="Sydney, NSW" />
  63.       <br />
  64.       Latitud: <span id="x"></span>
  65.       <br />
  66.       Longitud: <span id="y"></span>
  67.       <br />
  68.       <input type="button" value="Localizar" onclick="codeAddress()">
  69.     </div>
  70.     <div id="map_canvas" style="height:90%;"></div>
  71.   </body>
  72. </html>
Claro está que el cuadro del mapa lo modificas a placer con CSS.

Saludos y éxitos
  #8 (permalink)  
Antiguo 21/09/2012, 13:19
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 3
Respuesta: buscador de google maps

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

Etiquetas: google, maps, buscadores
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 16:14.