Archivos 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: “Petició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