Como usar Google Maps en tu web - Parte I
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"> |
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 |
he utilizado tu codigo para poder poner marcas en mi mapa, y se carga todo, pero el mapa no se ve este es el codigo que he puesto en el , el resto esta bien yo utlizo este y se me ve en punto en el mapa, pero ahora me faltaria poner comerntarios.
//