Posted by: carloslone | October 9, 2007

Aprendiendo a Utilizar Google Maps (Primera Entrega)

Estimados Amig@s, es un gusto poder saludarles nuevamente. Quiero comentarles que he decidido comenzar a presentarles mis nuevos artículos en formato de series, esto con el fin de poder abarcar en mayor detalle los consejos o tecnologías que presento en los mismos.

Dejemos de perder más el tiempo en palabras y enfoquemonos en el tema. Hoy en día infinidad de aplicaciones surgen en el internet y uno de los temas que viene a ser la moda en los últimos días es el Web 2.0 y las RIA’s (Rich Internet Application), realmente no voy detallar sobre estos temas, pero si lo desean podemos hacer una serie de posts para hablar detalladamente de los mismos. Web 2.0 define en uno de sus principios la utilización del Internet no solo como un repositorio de información, sino como una plataforma COLABORATIVA, es decir esta enfocado al provisionamiento de información y funcionalidades a traves de servicios web (Web Services), ejemplo de esta nueva tendencia son muchos sitios colaborativos de comunidades como FaceBook, MySpace, entre otros o bien los blogs (Diarios Personales) de millones de personas con infinidad de temas, pero también esta la parte de los servicios y dentro de estos tenemos los servicios de mapas y geoposicionamiento como lo es Google Maps. Creo que muchos han tenido la oportunidad de haber visto o escuchado del programa Google Earth, el cual nos permite poder hacer un viaje virtual por todo el mundo por medio de imagenes satelitales de alta definición.  Pero también existe una versión web de este servicio y ésta es Google Maps, a traves de este servicio podemos ubicar direcciones, comercios o sitios turísticos muy conocidos alrededor del mundo.  Muchos nos hemos preguntado que tan complicado sería incluir este tipo de funcionalidad en nuestros sitios web, en esta serie de posts les mostraré como hacerlo.

Habilitando Google Maps

Para poder hacer uso de Google Maps debemos suscribirnos al mismo por medio de la creación de una cuenta (Aunque si ya usan gmail o el google reader pueden utilizar la misma). Para esto debemos ir a la siguiente dirección: http://www.google.com/apis/maps/signup.html, en este lugar debemos aceptar los términos de uso del servicio e indicar un url para generar una llave. IMPORTANTE: Google maps genera una llave única identificada por el url que le ingresemos y esta llave podra ser utilizada única y exclusivamente con este URL (Ejemplo: si yo tengo un website http://www.carloslone.com/Servicios/ y aca quiero agregar las paginas para mostrar los mapas entonces éste url debera ser utilizado para generar una llave única. Todas las páginas incluidas en este directorio podrán hacer uso de la llave, pero si cambiamos el directorio Servicios por otro nombre debemos generar una llave diferente). Para este ejemplo utilizaremos una dirección local, por lo que en la siguiente sección debemos tener cuidado de setear un numero de puerto fijo (si estamos utilizando el web server que viene con Visual Studio 2005), entonces con esta dirección debemos generar nuestra llave, en mi caso la dirección que registre fue la siguiente: http://localhost:16396/ArticuloGoogle/ en donde ArticuloGoogle es el nombre de mi proyecto. Todavía no generen su llave en Google Maps, en un momento completaremos esta tarea. Continuen leyendo …

Utilizando Google Maps desde ASP.NET

Ahora podemos proceder a crear un nuevo web site en Visual Studio. Como más adelante agregaremos más funcionalidad en los articulos de esta serie, comenzaremos con crear un nuevo ASP.NET AJAX Web Site

Nuevo Web Site ASP.NET AJAX

Una vez creado nuestro web site vamos a cambiar la propiedad “Use Dynamic Ports” para evitar que el web server cambie el puerto dinamicamente, se preguntarán por que?, recuerden que nuestra llave es única para un url, si el puerto cambia el url es distinto y esto puede ocasinarnos problemas. Para esto hacemos click sobre el proyecto y en el panel de propiedades modificamos la propiedad antes mencionada la seteamos a False y definimos un port number o bien utilizamos es que esta por omisión, veamos a continuación:

propieades 

Presionemos F5 y con esto correra nuestra pagina default. Ahora si asegurense de copiar el url que les aparece en en su navegador omitiendo el nombre de la pagina principal, en mi caso http://localhost:16396/ArticuloGoogle/ , esta dirección debemos utilizarla en el sitio de Google Maps para generar nuestra llave. Su llave es un hash generado por el servicio de Google Maps, podría verse así:

ABQIAAAAQGgIBhjsnwSLy6MCAbznPxQNO3Owz74IgfCzvuiTT7N8mY0sihRQsD9oi
TRq9308_77aRTHiTgVhxw

ahora debemos proceder a abrir la pagina Default.aspx y eliminemos todo el contenido de la misma, incluyendo el script manager que aparece ya habilitado.

Primero debemos agregar una referencia al Script de Google Maps teniendo el cuidado de incluir nuestra llave en el parametro key:

<script type=”text/javascript” src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAQGgIBhjsnwSLy6MCAbznPxQNO3Owz74IgfC
zvuiTT7N8mY0sihRQsD9oiTRq9308_77aRTHiTgVhxw
“></script>

luego debemos de incluir una función para inicializar el mapa:

Click Para Ampliar la imagen

Veamos a detalle lo que significa el codigo de la imagen, en primer lugar utilizamos la función GBrowserIsCompatible() esta función la provee el API de Google Maps (El Javascript al que hicimos referencia), Luego instanciamos un objeto de tipo GMap2 pasandole como argumento el contenedor de nuestro mapa (Adelante veremos la definicion del contenedor). GMap2 representa el mapa que estamos cargando. Finalmente utilizamos la función setCenter para ubicar el mapa en una posición por eso instanciamos un objeto GLatLng, el cual representa la latitud y longitud en donde queremos posicionar nuestra navegación en el mapa. Si quieren saber mas detalle de estas funciones vean el API en la siguiente dirección: http://www.google.com/apis/maps/documentation/index.html.

El siguiente paso sera agregar el contenedor de nuestro mapa e invocar a la función load para que carge el mismo:

Click para ampliar imagen

Como vemos el contenedor es un elemento div con id=”map”, si recuerdan en la imagen anterior inicializabamos nuestro mapa de esta forma new GMap2(document.getElementById(“map”)) en este caso enviamos como argumento el contenedor “map”. Observemos también que en el tag body agregamos dos keys, onload y onunload, estas se invocan al cargar y salir de la pagina. Noten que en onload invocamos el metodo load() que inicializa nuestro mapa.

Presionamos F5 para ejecutar nuestra página y si no hemos cometido errores entonces podremos ver nuestro mapa en la pagina:

mapa

Les dejo una copia del proyecto para que lo puedan ver, solo recuerden que deben utilizar su propio key para que funcione correctamente.

Proyecto: Google Maps 1

En la proxima entrega veremos como comenzar a utilizar el API para poder interactuar con nuestro mapa. Hasta la proxima !

Carlos A. Lone

Etiquetas de Technorati: , ,

Etiquetas de del.icio.us: , ,

About these ads

Responses

  1. Carlos disculpa la pregunta, pocas veces he usado googlemaps….. ya tiene el servicio para la ciudad de Guatemala?

  2. Dante, fijate que este servicio tiene casi la misma funcionalidad de Google Earth, si buscas guate en el mapa si lo tienen, lo que no he visto es si la imagen satelital llega a detalle en la ciudad, sería de probarlo.

    Saludos,

    Carlos A. Lone

  3. Dante, ya hice la prueba y si pude ver calles y la ciudad con el google maps, osea que la ciudad de guatemala si esta disponible, ahora si queres ver otros departamentos alli si no llega, pero la capital si esta.

  4. [...] a Utilizar Google Maps (Segunda Entrega) En la primera entrega de esta serie tuvimos la oportunidad de poder aprender los conceptos bsicos para poder habilitar [...]

  5. [...] tercera entrega del articulo "Aprendiendo a utilizar Google Maps" pueden siempre ver la primer y segunda [...]

  6. [...] tercera entrega del articulo "Aprendiendo a utilizar Google Maps" pueden siempre ver la primer y segunda [...]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: