Scribd Logo
Unggah

Selamat datang di Scribd!

  • API Javascript de Google Maps

    Diunggah oleh

    Raul Rulls Acevedo Aguilar
    75 tayangan11 halaman
    Este documento describe cómo buscar lugares cercanos en Google Maps utilizando la API de JavaScript. Explica cómo crear un mapa centrado en la ubicación actual del usuario y buscar cafeterías dentro de un radio de 5000 metros, marcando los resultados en el mapa. Al hacer clic en un marcador, se muestra el nombre de la cafetería en un infowindow.

    Deskripsi Asli:

    buenp

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Este documento describe cómo buscar lugares cercanos en Google Maps utilizando la API de JavaScript. Explica cómo crear un mapa centrado en la ubicación actual del usuario y buscar cafeterías dentro de un radio de 5000 metros, marcando los resultados en el mapa. Al hacer clic en un marcador, se muestra el nombre de la cafetería en un infowindow.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    75 tayangan11 halaman

    API Javascript de Google Maps

    Diunggah oleh

    Raul Rulls Acevedo Aguilar
    Este documento describe cómo buscar lugares cercanos en Google Maps utilizando la API de JavaScript. Explica cómo crear un mapa centrado en la ubicación actual del usuario y buscar cafeterías dentro de un radio de 5000 metros, marcando los resultados en el mapa. Al hacer clic en un marcador, se muestra el nombre de la cafetería en un infowindow.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 11

    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="https://maps.google.com/maps/api/js?
    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="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("mapamapOptions);
    // Creamos el infowindow
    infowindow = new google.maps.InfoWindow();
    // 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 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 cdigo:
    En el evento onload del body llamamos a la funcin initMap. En esta funcin 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 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 google.maps.places.PlacesService(map);


    Y enviamos la peticin con service.nearbySearch() 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(place.photos)
    {
    alert(place.photos[0].getUrl({'maxWidth': 350, 'maxHeight': 350}));
    }

    Si necesitamos obtener informacin extra sobre un lugar podemos


    utilizar service.getDetails() 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 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 informacin puede sernos tiles para nuestro propsito.

    Anda mungkin juga menyukai