Archivo de la etiqueta: buscar

Api javascript de Google Maps – Buscar lugares cercanos

En este apartado del tutorial sobre la Api javascript v3 de Google Maps vamos a ver como podemos buscar lugares cercanos de interés.

Por ejemplo podemos buscar las cafeter√≠as,farmacias, etc que se encuentren cercanas al lugar donde nos encontramos. Para ello usaremos el servicio de b√ļsqueda de Google Maps.

Lo primero que tenemos que tener en cuenta es que¬†cuando a√Īadamos el javascript de google maps tenemos que indicarle en la url que vamos a utilizar la librer√≠a places de la siguiente manera:

< script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places"></script>

Una vez m√°s vamos a mostrar con un ejemplo como funciona.
Vamos a crear un mapa centrado en las coordenadas actuales y en el mostraremos marcadores con las cafeterías que se encuentren en un radio de 5000 metros alrededor del punto donde nos encontramos. Al pinchar sobre un marcador se abrirá un infowíndow con el nombre de la cafetería.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Obtener lugares cercanos</title>
<meta charset="utf-8" />
< script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places"></script>
< script>
 var map;
 var infowindow;

 function initMap()
 {
 // Creamos un mapa con las coordenadas actuales
   navigator.geolocation.getCurrentPosition(function(pos) {

   lat = pos.coords.latitude;
   lon = pos.coords.longitude;

   var myLatlng = new google.maps.LatLng(lat, lon);

   var mapOptions = {
     center: myLatlng,
     zoom: 14,
     mapTypeId: google.maps.MapTypeId.SATELLITE
   };

   map = new google.maps.Map(document.getElementById("mapa"),  mapOptions);

   // Creamos el infowindow
   infowindow = new google.maps.InfoWindow();

   // Especificamos la localización, el radio y el tipo de lugares que queremos obtener
   var request = {
     location: myLatlng,
     radius: 5000,
     types: ['cafe']
   };

   // Creamos el servicio PlaceService y enviamos la petición.
   var service = new google.maps.places.PlacesService(map);

   service.nearbySearch(request, function(results, status) {
     if (status === google.maps.places.PlacesServiceStatus.OK) {
       for (var i = 0; i < results.length; i++) {
         crearMarcador(results[i]);
       }
     }
   });
 });
}

 function crearMarcador(place)
 {
   // Creamos un marcador
   var marker = new google.maps.Marker({
     map: map,
     position: place.geometry.location
   });

 // Asignamos el evento click del marcador
   google.maps.event.addListener(marker, 'click', function() {
     infowindow.setContent(place.name);
     infowindow.open(map, this);
   });
   }
</script>
</head>
<body onload="initMap()">
 <h1>obtener lugares cercanos</h1>
 < div id="mapa" style="width: 450px; height: 350px;"> </div>
</body>
</html>

Analicemos el código:

En el evento onload del body llamamos a la función initMap. En esta función recogemos lar coordenadas actuales con navigator.geolocation.getCurrentPosition tal y como vimos en los posts anteriores.

Con las coordenadas obtenidas generamos el mapa centrado en la posición donde nos encontramos.

Creamos ¬†tambi√©n un infowindow, que es una especie de “bocadillo” que se muestra en el mapa. Lo utilizaremos para mostrar el nombre de la cafeter√≠a correspondiente cuando pinchemos sobre un marcador.

Despu√©s creamos el objeto resquest con los par√°metros de la b√ļsqueda:

En location indicamos las coordenadas donde va a buscar, en este caso le pasamos las actuales que hemos almacenado en la variable myLatlng.

En radius indicamos el radio en metros a partir de nuestra posición en la que se va a buscar, en este caso le hemos indicado 5000 metros.

Por √ļltimo en types le pasamos un array con los tipos de b√ļsqueda que queremos hacer, en este caso ‘cafe’.

Puedes usar los siguientes valores en el filtro types para las b√ļsquedas de sitios:

  • accounting ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Contabilidad
  • airport ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Aeropuerto
  • amusement_park ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Parque de atracciones
  • aquarium ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Acuario
  • art_gallery ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Galer√≠a de arte
  • atm ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Cajero autom√°tico
  • bakery ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Panader√≠a
  • bank ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Banco
  • bar ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Bar
  • beauty_salon ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Sal√≥n de belleza
  • bicycle_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Tienda de bicicletas
  • book_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Librer√≠a
  • bowling_alley ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Bolera
  • bus_station ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Estaci√≥n de autobuses
  • cafe ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Cafeter√≠a
  • campground ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Camping
  • car_dealer ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Concesionario de coches
  • car_rental ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Alquiler de coches
  • car_repair ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Reparaci√≥n de coches
  • car_wash ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Lavado de coches
  • casino ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Casino
  • cemetery ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Cementerio
  • church ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Iglesia
  • city_hall ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†–¬†Ayuntamiento
  • clothing_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Tienda de ropa
  • convenience_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Supermercado
  • courthouse ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Juzgado
  • dentist ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Dentista
  • department_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Grandes almacenes
  • doctor ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– M√©dico
  • electrician ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Electricista
  • electronics_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Tienda de electr√≥nica
  • embassy ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Embajada
  • establishment ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Establecimiento
  • finance ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Finanzas
  • fire_station ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Estaci√≥n de bomberos
  • florist ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Florista
  • food ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Comida
  • funeral_home ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Funeraria
  • furniture_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Tienda de muebles
  • gas_station ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Gasolinera
  • general_contractor ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Contratista
  • grocery_or_supermarket ¬† ¬† ¬† ¬† ¬†– Tienda¬†de comestibles o supermercado
  • gym ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Gimnasio
  • hair_care ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Cuidado del cabello
  • hardware_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Ferreter√≠a
  • health ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Salud
  • hindu_temple ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Templo hind√ļ
  • home_goods_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Tienda de art√≠culos para el hogar
  • hospital ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Hospital
  • insurance_agency ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Agencia de seguros
  • jewelry_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Joyer√≠a
  • laundry ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– ¬†Lavander√≠a
  • lawyer ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– ¬†Abogado
  • library ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Biblioteca
  • liquor_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Tienda de licores
  • local_government_office ¬† ¬† ¬† ¬†– Oficina del gobierno local
  • locksmith ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Cerrajero
  • lodging ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Alojamiento
  • meal_delivery ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Entrega de comidas
  • meal_takeaway ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Comida para llevar
  • mosque ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Mezquita
  • movie_rental ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Alquiler de pel√≠culas
  • movie_theater ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Cine
  • moving_company ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Empresa de mudanzas
  • museum ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Museo
  • night_club ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† –¬†Club nocturno
  • painter ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Pintor
  • park ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Parque
  • parking ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Aparcamiento
  • pet_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Tienda de mascotas
  • pharmacy ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Farmacia
  • physiotherapist ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Fisioterapeuta
  • place_of_worship ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Lugar de adoraci√≥n
  • police ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Polic√≠a
  • post_office ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† –¬†Oficina de correo
  • real_estate_agency ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Agencia inmobiliaria
  • restaurant ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Restaurante
  • roofing_contractor ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Contratista de tejados
  • rv_park ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Parque de caravanas
  • school ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Colegio
  • shoe_store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Zapater√≠a
  • shopping_mall ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Centro comercial
  • spa ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Spa
  • stadium ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Estadio
  • storage ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Almacenaje
  • store ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Tienda
  • subway_station ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Estaci√≥n de metro
  • synagogue ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Sinagoga
  • taxi_stand ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Parada de taxi
  • train_station ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Estaci√≥n de tren
  • travel_agency ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† – Agencia de viajes
  • university ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†–¬†Universidad
  • veterinary_care ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†– Veterinario
  • zoo ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† –¬†Zoo

Después  creamos el servicio PlaceService:

var service = new google.maps.places.PlacesService(map);

Y¬†enviamos la petici√≥n con¬†service.nearbySearch() pasandole como primer par√°metro las opciones de busqueda de la variable request y como segundo una funci√≥n callback donde recibiremos los resultados de la b√ļsqueda.

Dentro de esta función recorremos los resultados obtenidos que los recibimos en el parámetro results y  llamamos a la funcion crearMarcador().

En la funci√≥n crear marcador creamos un nuevo marcador por cada lugar de la b√ļsqueda y le decimos que en el evento click asigne al infowindow que ten√≠amos creado ¬†el contenido con el nombre del lugar, en este caso de la cafeter√≠a, y acto seguido abra el infowindow mostrando dicha¬†informaci√≥n.

Los datos de un lugar que podemos recibir en una b√ļsqueda son:

  • geometry
  • icon
  • id
  • name
  • place_id
  • reference
  • scope
  • types
  • vicinity
  • html_attributions

Si el lugar tiene fotos asignadas tambi√©n podemos obtener la url de la foto indicandole el tama√Īo que queramos con la funci√≥n getUrl. En el siguiente ejemplo sacamos un alert con la url de la primera foto (en caso de tener) con un tama√Īo 350×350:

 if(place.photos)
 {
 alert(place.photos[0].getUrl({'maxWidth': 350, 'maxHeight': 350}));
 }

Si necesitamos obtener informaci√≥n extra sobre un¬†lugar podemos utilizar¬†service.getDetails()¬† pasandole como par√°metros un objeto con el id del lugar que hemos recibido de la b√ļsqueda y como segundo par√°metro una funci√≥n donde recibimos la informaci√≥n extra sobre un punto. Por ejemplo teniendo el id del lugar que lo tenemos en la propiedad place_id de cada lugar recibido en la b√ļsqueda podemos hacer una llamada a service.getDetails de la siguiente manera:

var service = new google.maps.places.PlacesService(map);
service.getDetails({
   placeId: place.place_id
 }, function (placeDetails, status) {
 if (status == google.maps.places.PlacesServiceStatus.OK) {
   alert('placeDetails.formatted_address');
 });

Los datos que podemos extraer de un sitio con getDetails son:

  • address_components
  • adr_address
  • formatted_address
  • formatted_phone_number
  • geometry
  • icon
  • id
  • international_phone_number
  • name
  • place_id
  • reference
  • scope
  • types
  • url
  • utc_offset
  • vicinity
  • html_attributions

Como ejercicio puede ser interesante sacar un alert de cada dato¬†recivido para ver que contiene y que informaci√≥n puede sernos √ļtiles para nuestro prop√≥sito.

Para saber mas sobre Places library puedes visitar la documentación de google en https://developers.google.com/maps/documentation/javascript/places

√ćndice ¬† – ¬† <– Cap√≠tulo Anterior¬† ¬†–¬†¬†Capitulo Siguiente –>