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