Aplicaciones con Google Maps y Twitter

En esta entrada voy a hablar sobre la API de Google Maps y de Twitter: conceptos básicos y cómo los he usado para crear mi aplicación, TweetPosicion, además de algunos errores que pueden surgir.

La aplicación está realizada sobre HTML5, CSS3 y JavaScript, con lo que la intregración de estas APIs será muy sencilla.

 Twitter

Nos permite crear botones para crear un tweet, seguir a una cuenta, mostrar un tweet o un Timeline de manera muy sencilla.

Una vez nos registramos con nuestra cuenta de Twitter podemos acceder a sus contenidos. Una vez que escogemos las diferentas opciones (tipo de botón, hacia qué página enlaza, menciones, Hashtag…) la misma página nos genera el código en la parte derecha de la página.

Pantallazo del proceso de creación.

Una vez tengamos esto podemos introducirlo en nuestro código.

Si queremos introducir más información en el tweet, como en mi caso las coordenadas, tendremos que hacer un paso más: “generar” el código del tweet con las coordenadas calculadas en la carga de la página y “en medio” de este código meter latitud y longitud, que nos llevarán al enlace con nuestra posición.

codigotweet

Pero, ¿cómo trabajamos con mapas y coordenadas? … con la API de Google Maps.

También con un funcionamiento muy sencillo y similar a la anterior. La mejor forma de comprobar su sencillez y utlidad es ver su sección de ejemplos, viendo qué ejemplo se ajusta más a nuestra necesidad y partir de él.

En mi caso uso el de geolocalización, que carga al hacerlo la página las coordenadas, que después uso en el tweet, con la función initialize() . Un ejemplo de geolocalización con HTML5 sería:

  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
         var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

       // funciones que trabajarán con  la posición: variables "pos"
  }

Una vez calculado esto dentro con JavaScript usamos HTML5 y CSS3 para mostrar el mapa generado y personalizarlo: en esta imagen podemos ver como inicializo con la geolocalización, generando mi mapa con sus variables y marcas para mi posición y que despues muestro con  <div id=”map_canvas” >  </div>.

Puedes ver la versión web aquí.

Una vez tengo las funcionalidades creo mi aplicación con PhoneGap: de ello hablo en entradas anteriores, Mi primera aplicación y Retocando mi primera aplicación con PhoneGap.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s