Códigos promocionales de tu App para iOS en la App Store

Hola a todos, hoy vengo a hablaros de los códigos promocionales para las apps de iOS.

Los códigos promocionales son códigos que permiten descargar gratuitamente nuestra aplicación cuando es de pago.

Normalmente se utilizan cuando queremos promocionar nuestra app y queremos que nos hagan una review en un blog o web especializada o cualquier otro canal donde normalmente nos van a pedir un código promocional si la app es de pago.

También puedes utilizarlo para regalarsela a un amigo, regalarlo en un sorteo… etc.

Cada código solo puede utilizarse una vez y si no se utiliza caduca a las 4 semanas de haberse generado.

A día de hoy apple permite generar 100 códigos gratuitos por cada app y se pueden utilizar en cualquier territorio donde se venda la app.

Aunque el proceso para crear códigos promocionales es muy sencillo, la primera vez que queremos generar uno puede que nos cueste un poco encontrar desde donde se accede.

Vamos a ver como crear esos códigos promocionales y también os explicaré cómo hay que usarlos en la App Store ya que si se lo queréis regalar a un familiar o amigo puede que les tengas que explicar cómo tienen que usarlo.

Bien, lo primero que tenemos que hacer es entrar en itunes connect: https://itunesconnect.apple.com

Nos pedirá nuestro usuario (Apple ID) y contraseña de nuestra cuenta de desarrollador de apple.

Una vez dentro tenemos que hacer click en Mis apps.

Seleccionamos la app de la que deseamos obtener códigos promocionales en caso de tener mas de una.

Ahora tenemos que seleccionar la pestaña Prestaciones:

Captura de pantalla 2016-08-03 a las 9.13.13

Ahora seleccionamos códigos promocionales en el menú de la izquierda (1).

Después debemos introducir el número de códigos que queremos obtener (2).

Por último pulsaremos sobre el botón Generar códigos (3).

Captura de pantalla 2016-08-03 a las 9.20.27

Se abrirá una ventana para que aceptemos las condiciones de uso, aceptamos las condiciones y pulsamos el botón Generar códigos.

Se abrirá una ventana con la lista de códigos generados que deberás copiar, dando la opción también de descargar esos códigos en un archivo .txt.

Hasta aquí hemos visto cómo generar los códigos promocionales como desarrolladores, ahora vamos a ver cómo se utilizan para descargar nuestra aplicación gratis en la app store como usuarios.

Bien, desde nuestro iPhone o dispositivo iOS debemos acceder a la aplicación App Store que tenemos instalada por defecto en el dispositivo.

Una vez dentro, tenemos que acceder a la sección Destacado.

Dentro de la sección destacado tenemos que desplazar la pantalla hacia abajo hasta llegar al final y veamos un botón que pone Canjear.

Ahora pulsamos el botón Canjear y nos aparecerá una pantalla como esta:

IMG_1780

Podemos introducir el código manualmente o utilizar la cámara para escanear.

Una vez introducido el código pulsamos en Canjear y la aplicación se instalará gratuitamente en nuestro dispositivo.

Como veis es un proceso bastante sencillo, pero como se suele decir una vez de visto todo el mundo es listo ;-P.

Un saludo

 

 

Whataplace!!!, mi nueva App.

Hola a todos,

Hoy me toca hacer un poco de publicidad, vengo a presentaros la última app que he desarrollado: Whataplace!!!.

Screenshot_2016-04-29-09-30-11

Whataplace te permite guardar un sitio para poder luego llegar a él.

Whataplace guarda automáticamente  las coordenadas y la dirección del sitio donde te encuentras y te permite de manera opcional seleccionar una categoría, una descripción y añadir una foto del lugar.

Screenshot_2016-04-29-09-35-07

Una aplicación clara es recordar por ejemplo donde hemos aparcado el coche, o si vemos un restaurante con un menú me nos apetece y queremos volver más tarde, una tienda donde hemos visto algo interesante o cualquier lugar al que queramos volver y recordar la dirección.

Yo soy bastante despistado y cuando estoy de viaje o en un sitio que no conozco me cuesta recordar el camino para volver un lugar determinado.

Whataplace te permite guardar tantos lugares como desees, pudiendo modificar su descripción, categoría y foto más tarde o eliminarlos si deseamos.

Después solo tenemos que seleccionar el sitio al que queremos volver y nos mostrará la ruta dándonos la opción de abrir el navegador gps de nuestro dispositivo con las coordenadas para llegar al lugar deseado.

Screenshot_2016-04-29-11-10-43

También podemos compartir nuestros lugares favoritos con nuestras amistade a través del correo electrónico, whatsapp, twitter, facebook, o cualquier otra red social que tengamos en nuestro móvil.

Puede servir por ejemplo para recomendar a alguien un lugar o para avisar a alguien de donde estamos exactamente para que vengan a buscarnos.

Pero todo esto es solo una parte de lo que ofrece Whataplace.

Whataplace cuenta además con un buscador donde podemos buscar lugares de interés cercanos a donde nos encontramos.Estos datos los obtenemos de Google Places.

Screenshot_2016-04-29-09-31-39

Esto es muy útil si por ejemplo nos encontramos de viaje y queremos buscar un Cajero automático, un restaurante, una farmacia… etc.

Screenshot_2016-04-29-09-31-58

Cuenta con una serie de búsquedas habituales ya predefinidas donde solo tienes que pulsar un botón para obtener un listado de los sitios que búscas, tienes también un buscador donde puedes escribir texto libre para buscar cosas que no aparezcan en los predefinidos como un veterinario o cualquier cosa que necesites en un momento dado.

Los lugares que encuentres mediante la búsqueda los puedes añadir también a tu lista de sitios para ir más tarde, compartirlo etc.

Screenshot_2016-04-29-09-32-53

Cuando entramos en la descripción de un lugar que hayamos buscado nos mostrará la web y el teléfono del sitio si está disponible, asi podemos con un click llamar al lugar para reservar una habitación en un hotel o hacer un pedido de comida rápida por ejemplo, y si cuenta con ello también mostrará el horario de apertura y cierre.

Screenshot_2016-04-29-12-24-38

Además muestra valoraciones de los usuarios del sitio, lo que puede ayudarnos a elegir el mejor sitio.

Resumiendo Whataplace cumple una doble función, recordar sitios a los que deseas regresar y buscar sitios de interés cercanos a donde te encuentras, por lo que es una herramienta muy útil cuando estás de viaje o un un lugar que no conoces muy bien.

La app se encuentra disponible gratuitamente para los dispositivos Android en  google Play: https://play.google.com/store/apps/details?id=com.edurevilla.whataplace

Y ya se encuentra tambien disponible para iOS por solo 0.99€ que no le descuadra el presupuesto a nadie😉 en la app store: https://itunes.apple.com/us/app/whataplace-place-finder/id1139108223?ls=1&mt=8

La app va evolucionando y mejorando en cada actualización,  me gustaría que la probaseis y me dejaseis en los comentarios vuestra opinión y sugerencias para mejorar en futuras versiones.

También me ayudais si probais y valorais la app en google play.

Muchas gracias.

Un saludo.

Como crear un archivo Zip y forzar su descarga en PHP

Hola a todos:

Hoy vamos a ver cómo podemos generar una archivo zip, añadirle los archivos que queramos y forzar su descarga con php.

Desde la versión 5.2.0 de PHP está disponible la clase  ZipArchive.

Para ilustrar su funcionamiento como siempre lo mejor es crear un pequeño ejemplo.

Vamos a crear un pequeño script que genere un archivo zip con dos archivos de imagen png, aunque se puede hacer con cualquier tipo de archivo. Una imagen se creará en la raiz de la carpeta comprimida y la otra en un directorio que crearemos dentro de esta carpeta.

Vayamos por partes:

Primero creamos la carpeta donde alojaremos  este pequeño ejemplo, por ejemplo podemos llamar prueba_zip a la carpeta.

Para este ejemplo vamos a descargar de internet (o copiar desde cualquier sitio) dos archivos, por ejemplo dos imagenes.

Copiamos los dos archivos en la carpeta prueba_zip, imaginemos que se llaman imagen1.png e imagen2.png.

Ahora debemos crear un archivo php que va a contener el código de ejemplo para crear un archivo.zip.

Vamos a llamarle index.php.

Editamos el archivo que acabamos de crear y copiamos en el el siguiente código:

<?php
// Creamos un instancia de la clase ZipArchive
 $zip = new ZipArchive();
// Creamos y abrimos un archivo zip temporal
 $zip->open("miarchivo.zip",ZipArchive::CREATE); 
 // Añadimos un directorio
 $dir = 'miDirectorio';
 $zip->addEmptyDir($dir);
 // Añadimos un archivo en la raid del zip.
 $zip->addFile("imagen1.jpg","mi_imagen1.jpg");
 //Añadimos un archivo dentro del directorio que hemos creado
 $zip->addFile("imagen2.jpg",$dir."/mi_imagen2.jpg"); 
 // Una vez añadido los archivos deseados cerramos el zip.
 $zip->close();
 // Creamos las cabezeras que forzaran la descarga del archivo como archivo zip.
 header("Content-type: application/octet-stream");
 header("Content-disposition: attachment; filename=miarchivo.zip");
 // leemos el archivo creado
 readfile('miarchivo.zip');
 // Por último eliminamos el archivo temporal creado
 unlink('miarchivo.zip');//Destruye el archivo temporal
?>

Aunque en los comentarios del propio código se explican los pasos vamos a verlos más detenidamente:

Primero creamos una instancia de la clase ZipArchive:

$zip = new ZipArchive();

Después creamos un archivo zip temporal que llamamos miarchivo.zip y que eliminaremos después de descargarlo.

$zip->open("miarchivo.zip",ZipArchive::CREATE);

Para indicarle que tiene que crearlo ya que no existe utilizamos el valor ZipArchive::CREATE.

Conviene recordar que tenemos que tener permisos de escritura en la carpeta para poder crear el archivo.

En este ejemplo vamos a crear dentro del archivo comprimido una carpeta a la que hemos llamado miDirectorio.

$zip->addEmptyDir('miDirectorio');

Como podemos observar con el método addEmptyDir creamos un directorio vacío dentro del archivo zip que acabamos de crear.

Después añadimos el archivo imagen1.jpg que hemos copiado en nuestra carpeta. Para ello utilizamos el método addFile.

El método addFile recibe como primer parámetro la ruta donde se encuentra el archivo que vamos a añadir, en este caso como se encuentra en la misma carpeta solo es necesario especificar el nombre del archivo.
El segundo parámetro es opcional y es la ruta final dentro del archivo zip y el nombre final que tendrá el archivo al comprimirlo, si no se especifica se creará en la raíz del archivo zip con el mismo nombre.

En este caso lo colocamos en la raíz del archivo zip por lo que solo especificamos su nombre final que en este caos es mi_imagen1.jpg.

$zip->addFile("imagen1.jpg","mi_imagen1.jpg");

Ahora vamos añadimos otro archivo, pero esta vez en lugar de crearlo en la raíz del zip le decimos que lo añada a la carpeta miDirectorio que hemos creado anteriormente:

 $zip->addFile("imagen2.jpg",$dir."/mi_imagen2.jpg");

Ahora solo nos queda cerrar el archivo zip que hemos creado:

 $zip->close();

Y forzar su descarga:

 header("Content-type: application/octet-stream");
 header("Content-disposition: attachment; filename=miarchivo.zip");
 // leemos el archivo creado
 readfile('comprimido.zip');

Para forzar su descarga creamos las cabeceras necesarias indicando que es un archivo de tipo zip y especificando su nombre, en este caso le hemos llamado miarchivo.zip, pero podéis poner el nombre que queráis.

Como último paso eliminamos el archivo zip temporal que hemos creado:

unlink('miarchivo.zip');//Destruye el archivo temporal

Y esto es todo.

Espero que os sirva de ayuda.

Un saludo.

Todo lo que debes saber sobre geolocalización y la api javascript de Google Maps para su uso en tu web o app.

Hola a todos:

He querido realizar un tutorial que recoja todos los elementos que entran en juego a la hora de trabajar con geolocalización en javascript, el uso de la api v3 de google maps y en definitiva todas las posibilidades que nos ofrece la geolocalización a la hora de utilizarla tanto en una web o en una app hibrida que utilice javascript en una webview como  apache cordova/phonegap, ionic, etc.

Como los post muy largos son aburridos de leer he decidido dividir este tutorial en varios capítulos en posts diferentes.

A lo largo de este contenido veremos como mostrar un mapa estático como una imagen, mostrar mapas dinámicos con marcadores, obtener las coordenadas actuales de nuestro dispositivo, obtener las coordenadas de un punto a partir de una dirección, obtener una dirección a partir de unas coordenadas, buscar lugares de interés cercanos al punto donde nos encontramos, aprenderemos a crear una función que calcule la distancia en kilometros entre dos puntos a partir de sus coordenadas. También he añadido un post antiguo donde muestro como abrir el mapa nativo de nuestro dispositivo para mostrar la ruta hasta un punto (Android, iOSm Windows Phone) formando una url concreta en función del sistema operativo que estemos utilizando.

A continuación pos pongo los links a cada uno de los capitulos que forman este tutorial dedicado a la geolocalización:

Al ser un tema extenso es posible que se hayan quedado algunas cosas en el tintero. No dudéis en dejar en los comentarios sugerencias para ampliar este tutorial con algún tema sobre geolocalización en javascript que no se haya tratado, o cualquier comentario que querais hacer al respecto.

Espero que os sea de utilidad.

Un saludo

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.

Un saludo

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