INSTITUTO DE ESTUDIOS PROFESIONALES DEL
GOLFO DE MXICO
CAMPUS SALINA CRUZ
TITULO:
Api javascript de Google Maps
ALUMNO:
RAL ACEVEDO AGUILAR.
NOMBRE DE LA MATERIA:
INTELIGENCIA ARTIFICIAL
NOMBRE DEL PROFESOR:
GUADALUPE MORALES MARTNEZ
CARRERA:
INGENIERA EN SISTEMAS COMPUTACIONALES.
SALINA CRUZ OAXACA, MAYO DEL 2016.
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 inters.
Por ejemplo podemos buscar las cafeteras,farmacias, etc que se encuentren cercanas
al lugar donde nos encontramos. Para ello usaremos el servicio de bsqueda de Google
Maps.
Lo primero que tenemos que tener en cuenta es que cuando aadamos el javascript de
google maps tenemos que indicarle en la url que vamos a utilizar la librera places de la
siguiente manera:
< script type="text/javascript" src="[Link]
libraries=places"></script>
Una vez ms 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 cafeteras que se encuentren en un radio de 5000 metros alrededor
del punto donde nos encontramos. Al pinchar sobre un marcador se abrir un
infowndow con el nombre de la cafetera.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Obtener lugares cercanos</title>
<meta charset="utf-8" />
< script type="text/javascript" src="[Link]
libraries=places"></script>
< script>
var map;
var infowindow;
function initMap()
{
// Creamos un mapa con las coordenadas actuales
[Link](function(pos) {
lat = [Link];
lon = [Link];
var myLatlng = new [Link](lat, lon);
var mapOptions = {
center: myLatlng,
zoom: 14,
mapTypeId: [Link]
};
map = new [Link]([Link]("mapamapOptions);
// Creamos el infowindow
infowindow = new [Link]();
// Especificamos la localizacin, 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 peticin.
var service = new [Link](map);
[Link](request, function(results, status) {
if (status === [Link]) {
for (var i = 0; i < [Link]; i++) {
crearMarcador(results[i]);
}
}
});
});
}
function crearMarcador(place)
{
// Creamos un marcador
var marker = new [Link]({
map: map,
position: [Link]
});
// Asignamos el evento click del marcador
[Link](marker, 'click', function() {
[Link]([Link]);
[Link](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 cdigo:
En el evento onload del body llamamos a la funcin initMap. En esta funcin recogemos
lar coordenadas actuales con [Link] tal y como vimos
en los posts anteriores.
Con las coordenadas obtenidas generamos el mapa centrado en la posicin donde nos
encontramos.
Creamos tambin un infowindow, que es una especie de bocadillo que se muestra en
el mapa. Lo utilizaremos para mostrar el nombre de la cafetera correspondiente cuando
pinchemos sobre un marcador.
Despus creamos el objeto resquest con los parmetros de la bsqueda:
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 posicin 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 bsqueda que queremos
hacer, en este caso cafe.
Puedes usar los siguientes valores en el filtro types para las bsquedas de sitios:
accounting
Contabilidad
airport
Aeropuerto
amusement_park
aquarium
Acuario
art_gallery
Galera de arte
atm
bakery
Panadera
bank
Banco
Parque de atracciones
Cajero automtico
bar
beauty_salon
Saln de belleza
bicycle_store
Tienda de bicicletas
book_store
Librera
bowling_alley
Bolera
bus_station
Estacin de autobuses
cafe
campground
Camping
car_dealer
Concesionario de coches
car_rental
Alquiler de coches
car_repair
Reparacin de coches
car_wash
Lavado de coches
casino
Casino
cemetery
Cementerio
church
Iglesia
city_hall
clothing_store
convenience_store
courthouse
dentist
department_store
doctor
Bar
Cafetera
Ayuntamiento
Tienda de ropa
Supermercado
Juzgado
Dentista
Grandes almacenes
Mdico
electrician
electronics_store
embassy
establishment
finance
fire_station
florist
food
funeral_home
Funeraria
furniture_store
Tienda de muebles
gas_station
general_contractor
grocery_or_supermarket
gym
hair_care
hardware_store
health
hindu_temple
home_goods_store
hospital
insurance_agency
jewelry_store
Electricista
Tienda de electrnica
Embajada
Establecimiento
Finanzas
Estacin de bomberos
Florista
Comida
Gasolinera
Contratista
Tienda de comestibles o supermercado
Gimnasio
Cuidado del cabello
Ferretera
Salud
Templo hind
Tienda de artculos para el hogar
Hospital
Agencia de seguros
Joyera
laundry
Lavandera
lawyer
Abogado
library
Biblioteca
liquor_store
local_government_office
locksmith
lodging
meal_delivery
Entrega de comidas
meal_takeaway
Comida para llevar
mosque
movie_rental
Alquiler de pelculas
movie_theater
Cine
moving_company
museum
night_club
painter
Pintor
park
Parque
parking
Aparcamiento
pet_store
Tienda de mascotas
pharmacy
Farmacia
physiotherapist
Fisioterapeuta
place_of_worship
Lugar de adoracin
Tienda de licores
Oficina del gobierno local
Cerrajero
Alojamiento
Mezquita
Empresa de mudanzas
Museo
Club nocturno
police
post_office
real_estate_agency
restaurant
roofing_contractor
rv_park
Parque de caravanas
school
Colegio
shoe_store
shopping_mall
spa
stadium
storage
Almacenaje
store
Tienda
subway_station
synagogue
taxi_stand
train_station
Estacin de tren
travel_agency
Agencia de viajes
university
veterinary_care
zoo
Polica
Oficina de correo
Agencia inmobiliaria
Restaurante
Contratista de tejados
Zapatera
Centro comercial
Spa
Estadio
Estacin de metro
Sinagoga
Parada de taxi
Universidad
Veterinario
Zoo
Despus creamos el servicio PlaceService:
var service = new [Link](map);
Y enviamos la peticin con [Link]() pasandole como primer parmetro
las opciones de busqueda de la variable request y como segundo una funcin callback
donde recibiremos los resultados de la bsqueda.
Dentro de esta funcin recorremos los resultados obtenidos que los recibimos en el
parmetro results y llamamos a la funcion crearMarcador().
En la funcin crear marcador creamos un nuevo marcador por cada lugar de la
bsqueda y le decimos que en el evento click asigne al infowindow que tenamos
creado el contenido con el nombre del lugar, en este caso de la cafetera, y acto
seguido abra el infowindow mostrando dicha informacin.
Los datos de un lugar que podemos recibir en una bsqueda son:
geometry
icon
id
name
place_id
reference
scope
types
vicinity
html_attributions
Si el lugar tiene fotos asignadas tambin podemos obtener la url de la foto indicandole
el tamao que queramos con la funcin getUrl. En el siguiente ejemplo sacamos un
alert con la url de la primera foto (en caso de tener) con un tamao 350350:
if([Link])
{
alert([Link][0].getUrl({'maxWidth': 350, 'maxHeight': 350}));
}
Si necesitamos obtener informacin extra sobre un lugar podemos
utilizar [Link]() pasandole como parmetros un objeto con el id del lugar
que hemos recibido de la bsqueda y como segundo parmetro una funcin donde
recibimos la informacin 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 bsqueda podemos
hacer una llamada a [Link] de la siguiente manera:
var service = new [Link](map);
[Link]({
placeId: place.place_id
}, function (placeDetails, status) {
if (status == [Link]) {
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 informacin puede sernos tiles para nuestro propsito.