Primeros pasos con la API v3 de Google Maps (Mapa y Marcador)

Alex Franco — Thu, 26 Aug 2010 22:12:44 +0000

Ya tengo un rato manejando la API JavaScript de Google Maps pero ahora con su cambio a la v3 hay cosas que cambiaron y hay que adaptarse, entonces se me ocurrió compartirles lo que vaya aprendiendo desde cero, de cualquier manera pueden leer si así lo desean, toda la documentación oficial de la API de Google Maps.

Lo que voy a intentar hacer es ir al grano del tema del post, para no dar tantas vueltas y quitar toda la paja que viene en la documentación… “Directo y a la cabeza” dicen por ahí.

Para iniciar será necesario y preferente que tengan un poco de conocimiento principalmente de JavaScript y jQuery, asímismo de HTML y un poco de CSS, igual unas pequeñas nociones de HTML5 nos servirán en publicaciones posteriores.

Para empezar hay que declarar nuestra aplicación como HTML5, sencillamente escribiendo el DOCTYPE así:

También para estos ejemplos es necesario incluir los scripts de jQuery, para este dirígete a su sitio oficial, descárgalo y agrega el script, y claro el más importante de estos ejemplos, el script de Google Maps, que para la v3 no es necesario generar una key como en la versión 2 se hacía, ahora solamente agregas el siguiente script:

Si puedes observar, al final del script dice sensor=set_to_true_or_false es para indicar si queremos que el sensor identifique la posición del usuario, debes indicar true o false según lo requiera tu aplicación.

NOTA: hay una pequeña discusión sobre la localización de los scripts, puedes ponerlos ya sea dentro del head o del body, pero muchos recomiendan que vayan antes de cerrar la etiqueta body, ya que evita que el contenido principal tarde en mostrarse, entonces… es tu decisión donde colocarlos, al final de cuentas para fines didácticos, funcionan igual en cualquier lado.

Dentro del body vamos a declarar un DIV que incluya su id y estilos para un ancho y alto donde queramos que se dibuje el mapa, debe ser algo como esto:

Ahora vamos con las opciones del mapa, primero declaremos la latitud y longitud donde queremos que aparezca nuestro mapa de esta manera:

var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)

Lo que hace esa línea de código, es que creamos una instancia de un objeto de la API de GMaps que guardará la latitud y longitud del mapa, marcador o sea lo que sea que queramos dibujar, así que recuérdenla bien para futuros usos.

Los valores pueden variar de la siguiente manera:

myLatitude es el valor del ángulo que parte del ecuador, puede variar de 90 a -90 de norte a sur respectivamente, siendo 0 el ecuador.
myLongitude es el valor que parte del meridiano de Greenwich, o sea a partir de Londres, Inglaterra, tomando valores que varian de -180 a 180 de este a oeste respectivamente siendo 0 en Londres.

TIP: Si quieres obtener la latitud y longitud específicos dirígete a Maps.Google.com y en los Labs, activa el marcador de latitud y longitud.

Ahora, vamos con las opciones del mapa, las vamos a declarar de la siguiente forma:

var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Fácil de entender, ¿no?, lo que se realiza con esto es que a myOptions se le adjuntan las opciones propias de despliegue del mapa, zoom, es el nivel de visión del mapa, el más bajo 1, el más alto puede variar, ya que en algunos lugares puede ser hasta de un nivel 25 (hasta donde he descubierto), ya dependerá de lo que quieras mostrar en tu aplicación; center, si claro, centra el mapa con la latitud y longitud que un paso antes hemos declarado con la variable myLatlng; mapTypeId es una variable que interpreta el tipo de mapa que se va a desplegar, los cuales pueden ser estos:

ROADMAP muestra el mapa normal, el que es en 2D, si no se declara nada, este es el tipo por default.
SATELLITE muestra las cuadros fotografiados de la superficie.
HYBRID muestra una combinación de cuadro fotográficos, y el mapa 2D con nombres de calles y demás sobrepuesto, es como sobrevolar la superficie con todo y direcciones.
TERRAIN muestra cuadros del relieve físico de la tierra, elevaciones, ríos, montañas, entre otros.

Lo que prosigue es crear una instancia que guarde, interprete y dibuje todas las opciones que hemos visto de un mapa, recuerden tener jQuery cargado para que les funcione este script:

var map = new google.maps.Map($("#map_canvas").get(0), myOptions);

Así creamos la instancia al mapa y le decimos que lo coloque en el DIV con el ID de map_canvas, así como las opciones que requiere el mapa para ser desplegado correctamente. La variable map nos servirá más delante para tener control sobre el mismo mapa, como dibujar marcadores, formas, líneas, etc., haciéndole referencia.

Por último vamos a colocar/dibujar un marcador, un pin, o como lo quieran llamar, es muy simple hacerlo:

var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hola Mundo"
  });

Estas son las opciones básicas y quizá mínimas para dibujar un marcador, para position usaremos la misma variable que usamos para centrar el mapa y colocar el marcador en el centro del mismo, map es la instancia del objeto del mapa sobre el que vamos a colocar el marcador, title es el tooltip del marcador (el que dice un texto cuando dejamos encima el puntero).

Entonces al final, el código lo colocamos en una función que llamaremos initialize, para poder llamarlo posteriormente en cualquier parte de nuestro sitio, que para el ejercicio lo haremos en cuanto se cargue el body, agregando en la etiqueta de apertura:

Aunque puedes llamar la función desde cualquier otro lado, ahora si nuestro documento con todo y el script debe verse algo semejante a esto:

Es todo por esta ocasión, ya tengo otros ejercicios listos, solamente falta desglozarlos, cualquier duda, ya saben cómo contactarme :D.

Enjoy this Life!!

Geolocalización con HTML5

Alex Franco — Thu, 08 Jul 2010 16:25:26 +0000

HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web. Pero el tema central de este post no es HTML5, sin embargo es la base de esto.

La Geolocalización es una de las características principales de HTML5, la cual empieza a tener un gran empuje en todos los ámbitos de la web, redes sociales y más.

Ya entramos un poco en la parte de la geolocalización con la API de Firefox, ahora veremos con solamente un poco de código cómo podremos obtener la ubicación de un usuario con HTML5, que en realidad estaremos usando la API de Geolocalización de la W3C (Consorcio World Wide Web), que es el organismo internacional que dicta lo estándares Web. Podremos observar que obtener la información de esta manera es aún más rápida.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    var options = { position: new google.maps.LatLng(lat, lng) }
    var marker = new google.maps.Marker(options);
    marker.setMap(map);
  });
}

Con el objeto navigator.geolocation es con el que detectamos si el navegador tiene las capacidades necesarias para detectar la Geolocalización.

El método navigator.geolocation.getCurrentPosition es el que hace la labor de recuperación de la ubicación del usuario mediante el objeto position que se envía a la función. Una vez que se ha llamado a este método, por medio de una función que permita su ejecución, el navegador nos preguntará si le permitimos usar la información de nuestra ubicación, lo hará de esta manera:

Las instrucciones position.coords.latitude y position.coords.longitude extraen la información de latitud y longitud correspondiente de la posición obtenida.

Las últimas 3 líneas del código son las que dibujan el mapa y nos colocan el pin en as coordenadas obtenidas, si quieres dibujar el mapa con estas instrucciones no olvides agregar el siguiente script dentro de las etiquetas head:

Ahora si a disfrutar de la Geolocalización con HTML5.

Enjoy this Life!!

HTML5 – Alejandro Franco

Primeros pasos con la API v3 de Google Maps (Mapa y Marcador)

Geolocalización con HTML5