Archivo de la categor铆a: javascript

Javascript – Obtener la distancia distancia en kil贸metros entre dos puntos dados por su latitud y longitud.

Como colof贸n a esta serie de posts sobre la api de google maps, y a pesar de no tener necesariamente que utilizar google maps para utilizar esta funci贸n 聽vamos a crear una funci贸n que nos permita conocer la distancia en kil贸metros entre dos puntos de un mapa.

Sin mas dilaciones a continuaci贸n os muestro la funci贸n en cuesti贸n:

/**
 * \fn getKilometros().
 *
 * \Description: Devuelve la distancia en kilomegtros entre dos puntos dados por su latitud y longitud
 *
 * \param (integer) lat1 : Latitud del punto 1
 * \param (integer) long1 : Longitud del punto 1
 * \param (integer) lat2 : Latitud del punto 2
 * \param (integer) long2 : Longitud del punto 2
 *
 * \return (integer) Distancia en kilometros
 *
 **/

 getKilometros = function(lat1,lon1,lat2,lon2)
 {
 rad = function(x) {return x*Math.PI/180;}
var R = 6378.137; //Radio de la tierra en km
 var dLat = rad( lat2 - lat1 );
 var dLong = rad( lon2 - lon1 );
var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(rad(lat1)) * Math.cos(rad(lat2)) * Math.sin(dLong/2) * Math.sin(dLong/2);
 var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
 var d = R * c;
return d.toFixed(3); //Retorna tres decimales
 }

Para utilizar esta funci贸n solo tenemos llamarla pasando como par谩metros la latitud del primer punto, la longitud del primer punto, la latitud del segundo punto y la longitud del segundo punto.

Esta funci贸n聽puede ser muy 煤til por ejemplo si tenemos varios puntos con sus coordenadas 聽que extraemos de una base de datos propia y queremos filtrar solo los que se encuentren a cierta distancia del punto que nos interesa, por ejemplo, los que se encuentren a 5 kil贸metros a la redonda 聽de las coordenadas actuales.En este caso podr铆amos recorrer un array con todos los puntos y preguntar por los que se encuentran a menos de 5 kil贸metros de la siguiente manera:

Imaginemos que tenemos un array A con varios puntos y sus coordenadas y queremos meter en el array B los puntos que se encuentran a menos de 5 kil贸metros de las coordenadas actuales, podr铆amos hacer algo como esto:

navigator.geolocation.getCurrentPosition(function(pos) {
 var lat = pos.coords.latitude;
 var lon = pos.coords.longitude;
 for (var i=0; i<A.length; i++)
 {
   if(parseInt(getKilometros(lat,lon,A[i].laitude,A[i].lon))<= 5
   {
     B.push(A[i]);
   }
 }
}

 

Esto es todo por ahora, espero que os haya servido de ayuda.

No dud茅is en dejar en los comentarios cualquier sugerencia.

脥ndice 聽 – 聽 <– Cap铆tulo Anterior聽 聽–聽聽Capitulo Siguiente –>

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 –>

Obtener Coordenadas a partir de una direcci贸n

En el anterior post vimos como obtener una direcci贸n a partir de unas coordenadas, en esta ocasi贸n vamos a realizar el proceso contrario.

Vamos a obtener unas coordenadas a partir de una direcci贸n en formato texto.

Una vez m谩s vamos a crear un ejemplo para ilustrar mejor como funciona y las posibilidades que ofrece.

En el ejemplo que os propongo vamos a mostrar un mapa y una caja de texto donde introduciremos la direcci贸n que deseamos buscar, al pulsar e el bot贸n el mapa se centrar谩 en esa direcci贸n mostrando en ella el marcador.

veamos el c贸digo que necesitamos para conseguir esto:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Obtener Coordenadas a partir de una direcci贸n</title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
<script>

mapa = {
 map : false,
 marker : false,

 initMap : function() {

 // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar.

 mapa.map = new google.maps.Map(document.getElementById('mapa'), {
   center: {lat: 43.2686751, lng: -2.9340005},
   scrollwheel: false,
   zoom: 14,
   zoomControl: true,
   rotateControl : false,
   mapTypeControl: true,
   streetViewControl: false,
 });

 // Creamos el marcador
 mapa.marker = new google.maps.Marker({
 position: {lat: 43.2686751, lng: -2.9340005},
 draggable: true
 });

 // Le asignamos el mapa a los marcadores.
  mapa.marker.setMap(mapa.map);

 },

// funci贸n que se ejecuta al pulsar el bot贸n buscar direcci贸n
getCoords : function()
{
  // Creamos el objeto geodecoder
 var geocoder = new google.maps.Geocoder();

 address = document.getElementById('search').value;
 if(address!='')
 {
  // Llamamos a la funci贸n geodecode pasandole la direcci贸n que hemos introducido en la caja de texto.
 geocoder.geocode({ 'address': address}, function(results, status)
 {
   if (status == 'OK')
   {
// Mostramos las coordenadas obtenidas en el p con id coordenadas
   document.getElementById("coordenadas").innerHTML='Coordenadas:   '+results[0].geometry.location.lat()+', '+results[0].geometry.location.lng();
// Posicionamos el marcador en las coordenadas obtenidas
   mapa.marker.setPosition(results[0].geometry.location);
// Centramos el mapa en las coordenadas obtenidas
   mapa.map.setCenter(mapa.marker.getPosition());
   agendaForm.showMapaEventForm();
   }
  });
 }
 }
}
</script>
</head>
<body onload="mapa.initMap()">
 <h1>Obtener Coordenadas a partir de una direcci贸n</h1>
 <div id="mapa" style="width: 450px; height: 350px;"> </div>
 <div><p id="coordenadas"></p></div>
 <input type="text" id="search"> <input type="button" value="Buscar Direcci贸n" onClick="mapa.getCoords()">
</body>
</html>

Como Podemos observar el proceso es muy parecido al mostrado en la entrada聽Obtener la direcci贸n a partir de unas coordenadas聽con la diferencia de que en esta ocasi贸n le pasamos a geodecoder como par谩metro la direcci贸n en lugar de las coordenadas, y en la funci贸n callback que le pasamos recibimos las coordenadas en聽results[0].geometry.location.

Como necesitamos tener acceso a la variable map, y a la variable marker desde la funci贸n getCoords y no es buena practica crear variables globales, hemos creado un objeto llamado mapa para proteger el espacio de nombres y dentro hemos definido las dos variables y las dos funciones. Como ya sabemos initMap se llama en el evento onload del body, y getCoords al pulsar el bot贸n de buscar, 聽como est谩n dentro del objeto mapa tenemos que a帽adirles mapa. por delante para ejecutarlas.

Con este sencillo c贸digo obtenemos un potente buscador utilizando la api de google maps.

脥ndice 聽 – 聽 <– Cap铆tulo Anterior聽 聽–聽聽Capitulo Siguiente –>

Obtener la direcci贸n a partir de unas coordenadas

En ocasiones puede ser interesante saber a que direcci贸n pertenecen unas coordenadas. Por ejemplo podemos estar programando una aplicaci贸n que recoge las coordenadas donde nos encontramos y nos interesa saber a que direcci贸n corresponde.

Para conseguir esto debemos echar mano de Google Maps Geodecoder.

Como siempre la mejor forma de verlo es con un ejemplo, as铆 que vamos a crear un mapa y a帽adirle un marcador arrastrable, 聽cuando se arrastre聽聽el marcador a una posici贸n recogemos las coordenadas donde esta situado el marcador y sacamos un alert con la direcci贸n.

El c贸digo completo ser铆a este:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Obtener Dirreci贸n</title>
<meta charset="utf-8" />
< script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
< script>
function initMap() {
 // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar.
 var map = new google.maps.Map(document.getElementById('mapa'), {
 center: {lat: 43.2686751, lng: -2.9340005},
 scrollwheel: false,
 zoom: 8,
 zoomControl: true,
 rotateControl : false,
 mapTypeControl: true,
 streetViewControl: false,
 });
 // Creamos el marcador
 var marker = new google.maps.Marker({
 position: {lat: 43.2686751, lng: -2.9340005},
 draggable: true
 });
 // Le asignamos el mapa a los marcadores.
 marker.setMap(map);
 // creamos el objeto geodecoder
 var geocoder = new google.maps.Geocoder();
// le asignamos una funcion al eventos dragend del marcado
 google.maps.event.addListener(marker, 'dragend', function() {
 geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 var address=results[0]['formatted_address'];
 alert(address);
 }
 });
});
}
</script>
</head>
<body onload="initMap()">
 <h1>Obtener Direcci贸n</h1>
 < div id="mapa" style="width: 450px; height: 350px;"> </div>
</body>
</html>

Como vemos, despu茅s de crear el mapa y a帽adirle el marcador creamos el objeto geodecoder.

var geocoder = new google.maps.Geocoder();

Despu茅s al marcador le asignamos la funci贸n que se ejecutara en el evento dragend, es decir, cuando se suelte el marcador despu茅s de arrastrarlo.
Dentro de esta funci贸n geodecoder.geodecode()聽pasandole como primer par谩metro un objeto con las coordenadas, en este caso las del marcador{‘latLng’: marker.getPosition()}, y聽como segundo parametro una funci贸n callback anonima que recibe como parametros results y status.

Si聽status es igual a聽google.maps.GeocoderStatus.OK, es decir, 聽se ha recibido correctamente la direcci贸n mostramos la direcci贸n que se encuentra en results[0][‘formatted_address’]

La estructura completa del objeto que recibimos seria esta:

{
 "results": [ {
 "types": street_address,
 "formatted_address": "Etorbidea Abandoibarra, 2, 48001 Bilbo, Bizkaia, Espa帽a",
 "address_components": [ {
 "long_name": "2",
 "short_name": "2",
 "types": street_number
 }, {
 "long_name": "Etorbidea Abandoibarra",
 "short_name": "Etorbidea Abandoibarra",
 "types": route
 }, {
 "long_name": "Bilbo",
 "short_name": "Bilbo",
 "types": [ "locality", "political" ]
 }, {
 "long_name": "Bizkaia",
 "short_name": "BI",
 "types": [ "administrative_area_level_2", "political" ]
 }, {
 "long_name": "Euskadi",
 "short_name": "PV",
 "types": [ "administrative_area_level_1", "political" ]
 }, {
 "long_name": "Espa帽a",
 "short_name": "ES",
 "types": [ "country", "political" ]
 }, {
 "long_name": "48001",
 "short_name": "48001",
 "types": postal_code
 } ],
 "geometry": {
 "location": {
 "lat": 43.26861,
 "lng": -2.934380000000033
 },
 "location_type": "ROOFTOP",
 "viewport": {
 "southwest": {
 "lat": 43.26726101970851,
 "lng": -2.9357289802915147
 },
 "northeast": {
 "lat": 43.26995898029151,
 "lng": -2.933031019708551
 }
 }
 }
 } ]
}

En address_components聽podemos encontrar todos los elementos que componen la direcci贸n por separado.

Para facilitar la obtenci贸n de un elemento de la direcci贸n podemos construir una funci贸n como esta:

function getAddressComponent(address,component)
{
 var components = address[0]['address_components'];

 for (var i in components)
 {
 if(components[i]['types'].indexOf(component)>-1)
 {
 return components[i]['long_name'];
 }
 }
 return false;
}

Como primer par谩metro pasaremos la variable results que recibimos en la funci贸n聽geocoder.geocode(),聽y como segundo par谩metro el componente que queremos extraer.

Por ejemplo si queremos mostrar el c贸digo postal llamar铆amos a la funci贸n de la siguiente manera:

alert(getAddressComponent(results,postal_code));

Para m谩s informaci贸n sobre c贸mo crear mapas:

Mostrar un mapa interactivo de Google Maps

Para saber m谩s sobre como crear marcadores:

A帽adir marcadores a Google Maps

脥ndice 聽 – 聽 <– Cap铆tulo Anterior聽 聽–聽聽Capitulo Siguiente –>

A帽adir marcadores a Google Maps

En este post vamos a ver como a帽adir marcadores a un mapa de Google Maps.

Para ello debemos crear un mapa como vimos en la entrada聽Mostrar un mapa interactivo de Google Maps. Despu茅s debemos crear un marcador y asignarselo al mapa que hemos creado.

Como siempre vamos a ver esto m谩s claro con un ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>A帽adir Marcadores</title>
<meta charset="utf-8" />
<script type="text/javascript" src="//maps.google.com/maps/api/js"></script>
<script>
function initMap() {
 // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar.
 var map = new google.maps.Map(document.getElementById('mapa'), {
 center: {lat: 43.2686751, lng: -2.9340005},
 scrollwheel: false,
 zoom: 8,
 zoomControl: true,
 rotateControl : false,
 mapTypeControl: true,
 streetViewControl: false,
 });
 // Creamos dos marcadores.
 var marker1 = new google.maps.Marker({
 position: {lat: 43.2686751, lng: -2.9340005},
 draggable: false
 });
 // a este marcador le a帽adimos un icono personalizado
 var marker2 = new google.maps.Marker({
 position: {lat: 42.8286751, lng: -3.0990005},
 icon: "https://reviblog.net/wp-content/uploads/2017/03/marcador.png",
 draggable: false
 });
// Le asignamos el mapa a los marcadores.
marker1.setMap(map);
 marker2.setMap(map);
}
</script>
</head>
<body onload="initMap()">
 <h1>A帽adir Marcadores</h1>
 <div id="mapa" style="width: 450px; height: 350px;"> </div>
</body>
</html>

Primero creamos un mapa de la forma que ya vimos anteriormente y despu茅s creamos dos marcadores.

Para crear un marcador creamos un objeto google.maps.Marker y le pasamos un objeto con las opciones.

En las opciones debemos indicarle la posici贸n, en este caso le hemos indicado:

position: {lat: 43.0586751, lng: -2.9990005},

Opcionalmente le podemos indicar un icono personalizado, para ello con el par谩metro聽icon聽le indicamos la url del icono que queremos que aparezca, si no le a帽adimos el par谩metro icon usara el icono por defecto de google maps. El icono puede ser una imagen que est茅 alojada en tu servidor o que se encuentre en cualquier url accesible. Si no eres muy bueno dise帽ando tus propios iconos aqu铆 puedes encontrar muchos iconos para utilizar en tus mapas.

Tambien le hemos indicado draggable a false. Esto significa que el marcador no se puede arrastrar, en este caso no seria necesario ya que por defecto聽si no se indica es false.

Si ponemos draggable a true, podemos observar como podemos arrastrar el marcador.

Podemos manejar聽el evento dragend que se lanza cuando se ha terminado de arrastrar el marcador para recoger por ejemplo las coordenadas en las que se ha quedado el marcador:

Para manejar los eventos del mapa utilizamos聽google.maps.event.addListener. Como primer par谩metro indicamos el objeto al que vamos聽controlar el evento, como segundo el tipo de evento que vamos a “escuchar”, y como tercer par谩metro la funci贸n que se va ejecutar cuando el evento se producca.

Por ejemplo si queremos que cuando se termine de arrastrar un marcador nos muestre un alert con las coordenadas donde se ha quedado el marcador podemos hacer algo como esto, suponiendo que ya tenemos un marcador creado en la variable marker:

google.maps.event.addListener(marker, 'dragend', function() {
  alert('Latitud = '+marker.getPosition().lat()+ ', Longitud = '+marker.getPosition().lng());
});

Otros eventos que podemos controlar en un marcador son:

  • 'click'
  • 'dblclick'
  • 'mouseup'
  • 'mousedown'
  • 'mouseover'
  • 'mouseout'

Para saber m谩s sobre los eventos en los mapas de google maps puedes consultar la documentaci贸n de google: 聽https://developers.google.com/maps/documentation/javascript/events

脥ndice 聽 – 聽 <– Cap铆tulo Anterior聽 聽–聽聽Capitulo Siguiente –>

Obtener coordenadas actuales para mostrarlas en Google Maps

En esta entrada vamos a ver como obtener las coordenadas actuales donde nos encontramos para posteriormente mostrarlas en Google Maps.

Para ello haremos uso de las funciones de geolocalizaci贸n que tenemos disponibles en HTML5.

Por motivos de seguridad el usuario debe aceptar que se obtenga su posici贸n para poder obtener las coordenadas.

Para obtener las coordenadas utilizaremos el metodo navigator.geolocation.getCurrentPosition() y le pasaremos como par谩metro una funci贸n que a su vez revivir谩 un objeto con la informaci贸n de la posici贸n actual.

Veamos lo m谩s claro con un ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Obtener Coordenadas actuales</title>
<meta charset="utf-8" />
< script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
< script>
function initMap() {
 navigator.geolocation.getCurrentPosition(function(pos) {
   // Creamos un objeto mapa y lo situamos en coordenadas actuales
  var map = new google.maps.Map(document.getElementById('mapa'),
  {
    center: {lat: pos.coords.latitude, lng: pos.coords.longitude},
    scrollwheel: false,
    zoom: 8
   }
  );
 })
}
</script>
</head>
<body onload="initMap()">
 <h1>Obtener coordenadas Actuales</h1>
 < div id="mapa" style="width: 450px; height: 350px;"> </div>
</body>
</html>

Hay que tener en cuenta que la funci贸n getCurrentPosition es asincrona, por lo tanto todo lo que queramos se se ejecute una vez obtenida la posici贸n debemos incluirlo en la funci贸n callback que le pasamos como par谩metro.

Como podemos ver la funci贸n que recibe como par谩metro getCurrentPosition recibe a su vez el par谩metro pos.

En pos.coords.latitude recibimos la latitud de la localizaci贸n donde nos encontramos.

En pos.coords.longitude recibimos la longitud de la localizaci贸n donde nos encontramos.

Adem谩s de la latitud y la longitud tambi茅n podemos obtener las siguientes propiedades聽siempre que se encuentren disponibles:

Propiedad retorna
coords.latitude La latitud como un n煤mero decimal
coords.longitude La longitud como un n煤mero decimal
coords.accuracy La precisi贸n de la posici贸n
coords.altitude La altitud en metros por encima del nivel medio del mar
coords.altitudeAccuracy La precisi贸n de altitud de la posici贸n
coords.heading 聽Los聽聽grados en sentido horario desde el norte
coords.speed 聽La velocidad en metros por segundo
timestamp La fecha / hora de la respuesta

Si queremos centrar un mapa ya creado en unas las coordenadas actuales podemos utilizar la funci贸n setCenter().

map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));

脥ndice 聽 – 聽 <– Cap铆tulo Anterior聽 聽–聽聽Capitulo Siguiente –>

Mostrar un mapa interactivo de Google Maps

En esta entrada vamos a ver como a帽adir un mapa de Google maps, as铆 como a帽adirle marcadores y obtener las coordenadas actuales.

Lo primero que debemos hacer para utilizar la api de google maps es a帽adir el script a nuestro html para ello incluimos la siguiente linea:

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

Despu茅s debemos crear un div contenedor donde se incrustar谩 el mapa, debemos darle un id para poder asign谩rselo al mapa:

聽 < div id="mapa" style="width: 450px; height: 350px;"></div>

Por 煤ltimo creamos una funci贸n que deberemos llamar al inicio y crear谩 el objeto mapa que se mostrar谩 dentro del div:

var map = new google.maps.Map(document.getElementById('mapa'), {
 center: {lat: 43.2686751, lng: -2.9340005},
 scrollwheel: false,
 zoom: 8
 });

Como podemos observar a la hora de crear el objeto mapa聽le pasamos como primer par谩metro el elemento del DOM donde de insertar谩 el mapa, en este caso el div con id mapa.

Como segundo par谩metro (Opcional) le pasamos un objeto 聽con diferentes opciones, en este caso le indicamos las coordenadas donde queremos que aparezca centrado el mapa con la opci贸n center, desactivamos la rueda del rat贸n con scrollwhell a false y le asignamos el zoom a 8.

Veamos como quedar铆a nuestro c贸digo completo:

 <!DOCTYPE html>
<html lang="es">
<head>
<title>Insertar Mapa</title>
<meta charset="utf-8" />
< script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
< script>
function initMap() {
 // Creamos un objeto mapa y especificamos el elemento DOM donde se va a mostrar.
 var map = new google.maps.Map(document.getElementById('mapa'), {
 center: {lat: 43.2686751, lng: -2.9340005},
 scrollwheel: false,
 zoom: 8
 });
}
</script>
</head>
<body onload="initMap()">
 <h1>Insertar Mapa</h1>
 < div id="mapa" style="width: 450px; height: 350px;"> </div>
</body>
</html>

En nuestro navegador se mostrar铆a el siguiente mapa:

Captura de pantalla_2016-01-04_13-14-39

En las opciones que le pasamos como par谩metro a la hora de crear el mapa podemos definir que se muestren o no poniendo a true o a false lo siguientes controles:

zoomControl: El control del zoom.
mapTypeControl: Seleccionar tipo de mapa.
scaleControl: El control de la escala.
streetViewControl: El control de streelView.
rotateControl: Control de rotaci贸n.

 

Ejemplo:

 var map = new google.maps.Map(document.getElementById('mapa'), {
 center: {lat: 43.2686751, lng: -2.9340005},
 scrollwheel: false,
 zoom: 8,
 zoomControl: true,
 rotateControl : false,
 mapTypeControl: true,
 streetViewControl: false,
 });

Para obtener m谩s informaci贸n acerca de los controles 聽podemos acudir a la documentacui贸n de google maps:聽https://developers.google.com/maps/articles/v321-controls

Para finalizar esta entrada comentaros que podemos centrar un mapa ya creado utilizando la funci贸n setCenter():

map.setCenter({lat: 37.3000, lng: -120.4833});

 

脥ndice 聽 – 聽 <– Cap铆tulo Anterior聽 聽–聽聽Capitulo Siguiente –>

Google Maps: Mostrar una imagen con un mapa est谩tico

Hola a todos, para comenzar con este mini tutorial sobre el uso de google maps vamos a empezar por lo m谩s 聽b谩sico, como mostrar un mapa聽est谩tico a modo de imagen para mostrar por ejemplo donde nos encontramos localizados.

Esta es la manera m谩s f谩cil de mostrar nuestra localizaci贸n aunque al ser est谩tico est谩 limitado a mostrar 煤nicamente una localizaci贸n sin que se pueda interactuar con el mapa.

Para ello simplemente tenemos que a帽adir a nuestro html un elemento imagen y en el atributo src poner la url a la api de google de la siguiente manera:

<img 聽src=”http://maps.googleapis.com/maps/api/staticmap?maptype=satellite&size=[Anchura]x[Altura]&markers=color:[color]|label:[letra]|[latitud,longitud]” />

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Mapa est谩tico</title>
<meta charset="utf-8" />
</head>
<body>
 <h1>Ejemplo de mapa est谩tico</h1>
 <img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=color:yellow|43.2686751,-2.9340005" />
</body>
</html>

En este ejemplo mostramos una imagen con un mapa est谩tico que muestra la localizaci贸n del museo聽Guggenheim de Bilbao.

Como podemos observar 聽en el atributo src de la etiqueta img ponemos la url聽http://maps.googleapis.com/maps/api/staticmap聽y le pasamos los parametros que definen como debe de ser la imagen de mapa.

Con el par谩metro maptype le indicamos el tipo de mapa que tiene que mostrar, hay cuatro tipos de mapas disponibles en la API de Google Maps:

  • roadmap: especifica una imagen de mapa de ruta est谩ndar, la que normalmente se muestra en la p谩gina web de Google Maps. Este es el tipo de mapa predeterminado.
  • satellite: 聽muestra im谩genes de sat茅lite de Google Earth
  • hybrid: muestra una mezcla de vistas normales y de sat茅lite
  • terrain: muestra un mapa f铆sico basado en informaci贸n del terreno.

Con el par谩metro center le indicamos las coordenadas latitud y longitud en las que deseamos que est茅 centrado el mapa.

Con el par谩metro zoom le indicamos el grado de zoom (aumento) a aplicar sobre el mapa.

Con el par谩metro size mostramos el tama帽o (anchura x altura) de la imagen.

Con el par谩metro markers聽definimos los marcadores. Podemos definir el color, la posici贸n (latitud,logitud). Las diferentes opciones聽que acepta el par谩metro markers deben ir separadas por el car谩cter pipe ‘|’. Ademas del color y de la posici贸n se puede definir una letra a modo de etiqueta con la opci贸n label, tambi茅n se puede definir el icono con la opcion icon por ejemplo聽ejemplo:

<img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon%26chld=cafe|43.2686751,-2.934000" />

Para terminar con el mapa est谩tico solo queda decir que podemos utilizar tantos marcadores como queramos a帽adiendo varios par谩metros markers por ejemplo:

 <img src="https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=43.2686751,-2.9340005&zoom=16&size=400x400&markers=icon:http://chart.apis.google.com/chart?chst=d_map_pin_icon|color:yellow|43.2686751,-2.9340005&markers=color:blue|43.2686751,-2.9320005" />

Si ejecutamos en un navegador el ejemplo anterior聽se mostrar谩 en el navegador una imagen como esta:

Captura de pantalla 2016-01-03 a las 21.20.07

脥ndice 聽 – 聽Capitulo Siguiente –>

 

Rutear peticiones en node.js

Hola a todos:

Hoy vamos a ver como rutear peticiones en node.js.

Para poder acceder a diferentes partes del c贸digo dependiendo de la petici贸n HTTP recibida, debemos obtener la url y los posibles par谩metros GET/POST.

Toda la informaci贸n sobre la petici贸n se encuentra en el objeto request que recibimos como par谩metro en la funci贸n onRequest.

Para extraer esta informaci贸n necesitamos utilizar el m贸dulo url para extraer la ruta y el m贸dulo querystring para obtener los par谩metros pasados por GET o por POST.

Vano a modificar el archivo server.js del post anterior y a帽adimos la obtenci贸n de la url

var http = require("http");
var url = require("url");

function start()
{
  function onRequest(request, response)
  {
    response.writeHead(200, {"Content-Type": "text/html"});
    var pathname = url.parse(request.url).pathname;
    var query = url.parse(request.url,true).query;
    var id = query.id;
    response.write("Petici贸n para " + pathname + " recibida con id="+id);
   response.end();
  }
  http.createServer(onRequest).listen(8888);
}
exports.start = start;

En la variable pathname obtenemos la ruta URL requerida, por lo que podemos tomar decisiones sobre lo que hacer en funci贸n de la ruta obtenida.

Por ejemplo si escribimos en la barra de direcciones del navegador http://localhost:8888/productos/gafas/?id=12 la variable pathname contendr谩 /productos/gafas/ , la variable id valdr谩 12 y en el navegador se mostrar谩 el siguiente mensaje: 鈥淧etici贸n para /productos/gafas/ recibida con id=12鈥.

De esta manera podemos tomar 聽decisiones en funci贸n de lo que recibimos como par谩metros en la url.

Crear nuestros propios m贸dulos en Node.js

Hola a todos:

En el post anterior vimos como instalar node.js y crear nuestro primer hola mundo. Hoy veremos como crear m贸dulos en nodejs.

Para crear un m贸dulo debemos generar una funci贸n, en este caso llamada inicio y despu茅s exportarla utilizando exports.nombre_modulo = nombre_funcion.

Por ejemplo podemos modificar el archivo server.js que vimos en el聽post anterior聽 para que sea un m贸dulo de la siguiente m谩nera:

var http = require("http");

function start(){
  function onRequest(request, response){
    response.writeHead(200, {"Content-Type":"text/html"});
    response.write("Hola Mundo");
    response.end();
}
http.createServer(onRequest).listen(8888);}

exports.start = start;

Y luego generamos un archivo llamado index.js y llamamos al m贸dulo que acabamos de crear de la siguiente manera:

var server = require("./server");
server.start();

 

Ahora podemos poner en marcha el servidor con nuestra web ejecutando directamente el archivo index.js:

node index.js