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 |
Google+
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.
//
Necesito consultar algunos puntos con la gente de GOOGLE MAP…
Primeramente se pueden agregar bases de datos asociadas a los planos geográficos de GOOGLE, así se podría generar un sistema de información geográfica.
Los planos para chile, cuando se podrán encontrar en forma de cartografía digital, es posible digitalizar esta información directamente en el plano geográfico…
Es posible anexar información GEO-referenciando esta información al plano de GOOGLE vía pinchar y pegar…
Será posible unir el plano de GOOGLE a bases de datos locales en tiempo real…
Estas y otras consultas me gustaría que me fueran respondidas por el personal de GOOGLE, pero lamentablemente no he podido encontrar el dirección de correos como para enviarlas…
Atentamente
Dagoberto Ruiz Lara
Dagoberto:
Si buscas mas información sobre la API, puedes consultar por ejemplo en el grupo de discusión de Google Maps en español .
Buen día, te hago una consulta: al insertar el mapa en nuestra web, cada vez que lo visualizan utiliza transferencia de nuestro sitio o es un servicio «gratuito» que utiliza la transferencia del servidor de google.?
Gracias!
Romina:
Cuando insertas el código en JavaScript para incrustar un mapa en tu web, el navegador o browser del visitante se conecta directamente con los servidores de Google.
La transferencia de los datos, es decir las imágenes hacia el navegador, se realiza directamente desde los servicores de Google. Aquí no se usa ninguna transferencia de datos desde tu sitio.
Hola,
Tengo una pregunta que creo que tiene que ser fácil pero no sé cómo hacerlo.
He incluido el código que indican en su web en mi página, y ahora necesitaría que el usuario que entra navegando por el mapa de google, pueda seleccionar un punto del mapa y se guarden las coordenadas asociadas a ese punto.
Saludos.
Raquel,
en las páginas de ayuda del API de Google Maps, puedes encontrar más informaciones sobre el particular.
En tu caso debes usar JavaSript para poder almacenar la posición elegida por el usuario.
nunca encuentro lo que busco en cuanto a tareas de mis hijos me cuesta trabajo encontrar la pagina apropiada
Claudia,
buscas información geográfica, puedes por ejemplo usar Google Earth, o Google Maps.
Si buscas otro tipo de información, puedes usar Wikipedia.
Estimados:
Quiza es un poco basica mi consulta, pero me ha tenido de cabeza durante varias horas tratando de solucionarla. No he podido darle las coordenadas para que me muestre una ciudad como punto central en el google maps. Esta ciudad es Calama, Chile. He tratado con las coordenadas en universal transversal de mercator (con y sin signos), en grados decimales y todas las otras posibilidades que me muestra el googleearth, pero siempre me aparece mi mapa ubicado en la antartida, kasagistan u otros lugares… plop
necesito ayuuuda!!!!
Saludos y gracias
Veo que en lugares como Estados unidos marco desde aqui hasta aqui y me establece una ruta perfecta en color morado y la distancia entre ambos puntos lo trato de hacer en mi pais (Costa Rica) y solo me pone unos numeros de latitudes. ejemplo No hemos podido calcular la distancia para dirigirte de 10.044585, -84.306335 a 10.100022,-83.982239 en coche.
Cesar:
La función de rutas «desde aquí» «hasta aquí» NO funciona en todos los países. Por el momento, ha sido habilitado para Estados Unidos, Europa, Australia y algunos otros países.
Lo MAS FACIL ES : te vas directamente a google map, buscas lo que quieres poner en tu web, Al lado del mapa te sale un enlace que pone: ENLAZAR CON ESA PAGINA, te sales dos codigos y copias el de abajo, lo pegas en tu web donde quieras y ya esta. Es cosa de dos minutos y no tienes que saber nada de HTML. Asi quedara en tu web: http://www.barcelonanights.net/mapa.html
Ahhh, lo puedes poner como opcion satelite o como calles.
Espero que os haya servido de ayuda!!!!
Hola quiero subir el mapa de mi ciudad a google maps, he buscado información y he visto que necesito editarlo primero en un programa llamado Google Maps Creator, para esto necesito los mapas en formato shapes, ya los tengo pero no los puedo abrir. No sé si me puedas ayudar, con todo te agradezco de antemano.
estimado, como puedo hacer un generador de geocode propio ? o integrar algun buscador de eso, en este momento ese esta siendo mi gran problema 🙂
de ante mano gracias
Hola me gustaria saber si se puede utilizar otra imagen como marca, por ejemplo un logo en vez de esa marca roja con el punto negro
Gracias
Ricardo,
Si, claro que se puede. Las instrucciones las encuentras en la API de Google Maps
hola gracias por el tutorial pero hay veces que en el mapa veo un icono que me dice un comentario como la direccion dime es parte de este sistema o es elemento aparte a este tutorial.
Gracias por cualquier ayuda.
Hola quisiera saber si es posible con la API poner el texto de ver el mapa mas grande, y como se podria poner el texto de como llegar hasta aqui y como llegar desde aqui que aparecen en la viñeta al copiar directamente el mapa de la web de google.
Se puede hacer que al clickar sobre una ciudad del mapa, se envie a mi codigo el nombre de esa ciudad, pueblo o coordenada?? Se podria mediante AJAX??
Muchas gracias
Muy bueno el documento.
Rápido y sencillo, no esperaba poner el mapa tan rapidamente, gracias.
Quiero poner fotos en el mapa de mi pueblo, Toltén de Chile, y no puedo, como se hace? ya subí las fotos, pero no puedo situarlas…HELPME!
hola mi problema es que ya tengo mi mapa, pero quisiera saber la instrucción para que cuando quiera mostrar los servicios de un bancos, un hotel o cualquier otro servicio me los muestre automáticamente, por que cuando entro a google maps y pongo el servicio que deseo en este caso restaurantes loc: «aqui las coordenadas del lugar que quieres que muestre el servicio», me los muetra pero como mando a llamar esa instrucción en el api de google maps…