Archivo de la categoría: Know How

Como usar Google Maps en tu web – Parte IV

Know How

Después de que te he presentado en la tercera parte las funciones fundamentales para poder colocar marcas y etiquetas en los mapas, en esta sección te presento una lista de proyectos que usan la Maps API. Seguramente aquí vas a encontrar nuevas ideas para tus próximos proyectos.

  • Housingmaps es una página que con la ayuda de los clasificados de Cragilist permite localizar geográficamente inmuebles en venta o alquiler en todos los Estados Unidos y Canadá.
  • Ultimos terremotos es una página qee visualiza los últimos terremotos ocurridos en la tierra. En la etiqueta se muestra la magnitud, fecha y también presenta un enlace al Earthquake Hazards Program donde se dan todos los detalles del temblor.
  • Las camaras de trafico en Nueva York Esta página muestra todas las cámaras de trafico en NY como marcas en un mapa de Google Maps.
  • Google Maps Mania es un blog que colecciona sobre todo Google Maps y muestra los últimos proyectos que la gente esta haciendo con la Maps API.
  • Lista de proyectos en MapKi Lista de proyectos sorteados por categorias en el wiki de Google MapKi.
  • TecnoMaps (11.10.2005) Blog de Geoposicionamiento y sistemas de información geografica. Describe varios proyectos que usan Google Maps.
  • Google Earth Blog (22.10.2005) Blog con mucha información sobre el programa Google Earth.
  • Cool Google Maps (28.15.2005) Blog con una lista completa de diferentes sitios que usan Google Maps.

Si has encontrado otros proyectos interesantes, por favor avísanos colocando un comentario en el formulario de abajo.

Como usar Google Maps en tu web – Parte III

Know How
OJO

TODOS LOS EJEMPLOS EXPUESTOS AQUÍ FUNCIONAN CON LA API DE GOOGLE MAPS VERSIÓN 1. ACTUALMENTE YA SE ESTA USANDO LA VERSIÓN 2.x

En la segunda parte de este tutorial hemos visto como se pueden incorporar diferentes controles para posibilitar la navegación en el mapa. En esta tercera parte aprenderemos a colocar marcas en los mapas y también veremos la forma de etiquetar estas marcas.

4. Adicionar marcas
Copia el siguiente código y grábalo nuevamente en un archivo de texto, por ejemplo con el nombre mapa-04.html.


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Mi primer Mapa

Sube el archivo a tu web server, al directorio de los mapas que hemos usado anteriormente. Abre la URL, por ejempo: http://www.mi-dominio.com/mapas/mapa-04.html. El resultado debería ser el siguiente:


Mapa con marca

– Ver Live Test

Las nuevas funciones en este script son las siguientes:

La función GMarker() crea una marca en el punto que se le pasa como parámetro. Luego la función addOverlay() adiciona una marca al objeto mapa.

En la documentación de la Maps API se muestra como se puede cargar una lista de marcas mediante archivos XML.

5. Adicionar etiquetas
El siguiente paso es poner etiquetas a estas marcas que hemos generados en el mapa. Para esto copia nuevamente el código de abajo y grábalo por ejemplo en el archivo mapa-05.html


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Mi primer Mapa

Sube el archivo a tu web server, al directorio de los mapas que hemos usado anteriormente. Abre la URL, por ejempo: http://www.mi-dominio.com/mapas/mapa-05.html. El resultado debería ser el siguiente:


Mapa con marcas y etiquetas

Esta vez, el código se pone más complejo. Primeramente tenemos que definir una función


function createInfoMarker(point, address) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(address); } );
return marker;
}

La función createInfoMarker() genera una marca y le adiciona un listener de eventos del tipo clic, que abre la ventana con la etiqueta al hacer un clic en la marca.

Finalmente la marca generada con esta función es adicionada mediante addOverlay() al objeto mapa.

Después de que te he presentado las funciones fundamentales para poder colocar mapas en una página web, en la cuarta y ultima sección te presentare una serie de aplicaciones que usan la Maps API de Google. Analizando estos ejemplos seguramente vas ha encontrar rápidamente nuevas ideas para incorporar los mapas de Google en tu próximo proyecto.

Primera Parte Segunda Parte Tercera Parte Cuarta Parte

Como usar Google Maps en tu web – Parte II

Know How

En la primera parte de este tutorial hemos visto como se puede crear muy fácilmente un mapa usando la Maps API de Google.

3. Adición de controles
Ahora veremos como se pueden adicionar diferentes controles al mapa.

Copia el siguiente código y grábalo nuevamente en un archivo de texto, por ejemplo con el nombre mapa-02.html.


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Mi primer Mapa

Sube el archivo a tu web server, al directorio de los mapas que hemos usado anteriormente. Abre la URL, por ejempo: http://www.mi-dominio.com/mapas/mapa-02.html. El resultado debería ser el siguiente:


Mapa con controles sencillos

– Ver Live Test

Bueno, ahora analicemos el nuevo código:

La función setMapType(G_HYBRID_TYPE) permite cambiar el tipo del mapa. En este caso, el mapa a sido cambiado a híbrido, es decir satelital y geográfico. Los posibles valores para esta función son: G_MAP_TYPE, G_SATELLITE_TYPE y G_HYBRID_TYPE.

La función GMapTypeControl() permite generar un control para los diferentes tipos de mapas. Y la función addControl() permite adicionar un control al objeto mapa. Este control se puede ver en la parte superior derecha del mapa.

La función GSmallMapControl() genera el pequeño control (arriba a la izquierda). Con este control se puede mover el mapa, así como también aumentar o disminuir el zoom, pero solamente 1 nivel.

Ahora remplaza en el código la función GSmallMapControl() por GLargeMapControl(). Entonces el resultado será el siguiente:


Mapa con controles largos

– Ver Live Test

Ahora aparece el control grande. Mediante este control se puede adicionalmente centrar el mapa y también saltar a cualquier nivel del zoom.

En la tercera parte de este tutorial, veremos como puedes colocar marcas y etiquetas en el mapa.

Si es que tienes alguna consulta o comentario sobre este tutorial, por favor deja tus comentarios en el formulario de abajo.

Primera Parte Segunda Parte Tercera Parte Cuarta Parte

Como usar Google Maps en tu web – Parte I

Know How

1. Introducción
El propósito de este tutorial es mostrar cuales son los pasos iniciales que se deben seguir para poder usar el servicio gratuito de mapas y fotos satelitales de Google (Google Maps) e incluirla en la propia web.

Ya existen muchas webs que están usando este servicio, por ejemplo sitios de inmobiliarias, sitios turisticos, etc. Al final de este tutorial presento una lista de aplicaciones que pueden inspirarte para tu próximo proyecto.

2. Inscripción para usar Google Maps API
El primer paso a seguir es la inscripción para poder usar el Google Maps API. El registro lo puedes hacer gratuitamente aqui.

Es muy importante indicar el directorio en tu web server desde donde se realizaran todos los requests a la API. Puedes colocar por ejemplo http://www.mi-dominio.com/mapas/.

Tambíen es importante no sobrepasar las 50.000 impresiones al dia. Caso contrario hay que contactarse con Google.

la Maps API es muy interesante pues esta usando una nueva metodología de programación llamada Ajax (Asynchronous JavaScript + XML) .

La documentacion de la Maps API, que esta solamente en ingles la puedes encontrar aqui.

2. Mi primer mapa
Copia el códico de abajo y grabalo, por ejemplo en el archivo de texto mapa-01.html. Con un editor de texto debes reemplazar la cadena API-KEY con la clave que has obtenido del paso anterior.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ahora sube el archivo mapa-01.html al directorio de tu servidor web (el que has registrado en la Maps API al inscribirte).Finalmente abre la url http://www.mi-dominio.com/mapas/mapa-01.html. El resultado que verás debería ser el siguiente:

Mi primer Mapa
– Ver Live test

Después de que ya has logrado el famoso Hello World con Google Maps, es importante analizar un poco el código.Lo más importante lo encuentras entre //< ![CDATA[ ... //]]> y son las 2 siguientes líneas:

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-68.127081,-16.511597), 15);

El primer comando genera un nuevo objeto llamado map de tipo ‘mapa’ y el segundo genera inicialmente un punto con la longitud -68.127081 y la latitud -16.511597. Con la función centerAndZoom se centra el mapa en el punto anteriormente mencionado y se le asigna un zoom de 15. El valor del zoom varia entre 1 y 21, donde 1 significa la mayor aproximación.

Si deseas mas informaciones sobre las funciones usadas puedes consultar la documentación de la Maps API.

Aquí se debe mencionar que Google Maps aun no tiene una función para obtener el geocode, es decir la latitud y longitud de un lugar predeterminado de la tierra. De todas maneras se puede usar el geocoder gratuito de worldKit.

En la segunda parte de este tutorial veremos como se pueden colocar diferentes controles al mapa para posibilitar la navegación, así como para poder aumentar o disminuir el zoom.

Si es que tienes alguna consulta o comentario sobre este tutorial, por favor deja tus comentarios en el formulario de abajo.

Primera Parte Segunda Parte Tercera Parte Cuarta Parte