Actualizamos los artículos sobre mapas de google para mostrar la integración de mapas con el API 2.
Seguramente ya conozcamos los Mapas de Google, un sistema que permite acceder a fotos de satélite de todo el mundo que ha tenido bastante éxito entre los Internautas. Si estamos leyendo este artículo hasta podremos saber que los Mapas de Google tienen un API a través de la cual podemos integrarlos como servicio en una página web. Esto permite que en una página web desarrollada por nosotros podamos colocar mapas y vistas satélite de distintos puntos del planeta, todo de manera gratuita.
Bueno, pues en DesarrolloWeb.com ya habíamos publicado un par de artículos sobre los Mapas de Google que explicaban las reglas más básicas para empezar a publicar mapas satélite en nuestro sitio.
Sin embargo, los artículos anteriores siguen siendo muy interesantes para leer, porque explican algunas cosas básicas como obtener una llave (Key) de Google, registrándonos en el sitio de Google Maps, para poder utilizar los mapas en nuestro sitio.
Ahora vamos a ver un código para crear un mapa conforme a las especificaciones del Google Maps API 2.
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//función para cargar un mapa de Google.
//Esta función se llama cuando la página se ha terminado de cargar. Evento onload
function load() {
//comprobamos si el navegador es compatible con los mapas de google
if (GBrowserIsCompatible()) {
//instanciamos un mapa con GMap, pasándole una referencia a la capa o <div> donde queremos mostrar el mapa
var map = new GMap2(document.getElementById("map"));
//centramos el mapa en una latitud y longitud deseadas
map.setCenter(new GLatLng(40.407,-3.68), 5);
//añadimos controles al mapa, para interacción con el usuario
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl()); ;
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
El código está comentado para una mejor comprensión. Ahora a dar unas explicaciones adicionales:
Primero, aunque esté más tarde en el código, vamos a ver lo que hay en el body de la página. Hay que ver que hemos definido un evento onload="load()", que sirve para llamar a la función que genera el mapa, una vez se ha terminado de cargar la página.
Dentro del cuerpo de la página nos fijamos en la etiqueta div donde se mostrará el mapa:
<div id="map" style="width: 615px; height: 400px"></div>
El tamaño definido con estilos a esta capa es importante, porque será el tamaño de visualización del mapa. El API de Google Maps reconocerá la anchura y altura del contenedor para mostrar un mapa justamente ocupando ese espacio.
Ahora nos fijamos en el código Javascript.
Primero se incluye la librería donde está el API Javascript para los mapas de Google.
<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#" type="text/javascript"></script>
Si nos fijamos, este código necesita que indiquemos nuestra propia Key del API de Google Maps, que hemos conseguido al registrarnos. La tendremos que poner sustituyendo el texto =#TU LLAVE GOOGLE MAPS#.
Luego podemos pasar a la función que genera el mapa, que se carga cuando se termina de mostrar la página (la llamamos por el evento onload).
Esa función está bastante comentada y además quiero dejar para artículos posteriores distintos pormenores de la generación de mapas, pero es muy importante llamar la atención sobre un punto crítico, que me dio un quebradero de cabeza cuando estaba probando los mapas, hasta que conseguí dar con el error. Se trata del método de la clase GMap2 setCenter():
setCenter() se tiene que invocar justo después de instanciar el mapa!!!
Si intentamos instanciar el mapa y hacer cosas antes de centrarlo no funcionará. Esto es algo que está muy claro en la documentación del API, pero que como es un poco larga de leer, es fácil que no nos percatemos.
En mis pruebas me falló porque intentaba ponerle un tipo de mapa (vista satélite) y luego lo centraba. El problema es que no sale ningún error específico y es difícil hallar el problema.
Bueno, pues en DesarrolloWeb.com ya habíamos publicado un par de artículos sobre los Mapas de Google que explicaban las reglas más básicas para empezar a publicar mapas satélite en nuestro sitio.
- Lo básico para empezar a desarrollar con Google Maps I
- Desarrollar con Google Maps II
Sin embargo, los artículos anteriores siguen siendo muy interesantes para leer, porque explican algunas cosas básicas como obtener una llave (Key) de Google, registrándonos en el sitio de Google Maps, para poder utilizar los mapas en nuestro sitio.
Ahora vamos a ver un código para crear un mapa conforme a las especificaciones del Google Maps API 2.
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//función para cargar un mapa de Google.
//Esta función se llama cuando la página se ha terminado de cargar. Evento onload
function load() {
//comprobamos si el navegador es compatible con los mapas de google
if (GBrowserIsCompatible()) {
//instanciamos un mapa con GMap, pasándole una referencia a la capa o <div> donde queremos mostrar el mapa
var map = new GMap2(document.getElementById("map"));
//centramos el mapa en una latitud y longitud deseadas
map.setCenter(new GLatLng(40.407,-3.68), 5);
//añadimos controles al mapa, para interacción con el usuario
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl()); ;
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
El código está comentado para una mejor comprensión. Ahora a dar unas explicaciones adicionales:
Primero, aunque esté más tarde en el código, vamos a ver lo que hay en el body de la página. Hay que ver que hemos definido un evento onload="load()", que sirve para llamar a la función que genera el mapa, una vez se ha terminado de cargar la página.
Dentro del cuerpo de la página nos fijamos en la etiqueta div donde se mostrará el mapa:
<div id="map" style="width: 615px; height: 400px"></div>
El tamaño definido con estilos a esta capa es importante, porque será el tamaño de visualización del mapa. El API de Google Maps reconocerá la anchura y altura del contenedor para mostrar un mapa justamente ocupando ese espacio.
Ahora nos fijamos en el código Javascript.
Primero se incluye la librería donde está el API Javascript para los mapas de Google.
<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#" type="text/javascript"></script>
Si nos fijamos, este código necesita que indiquemos nuestra propia Key del API de Google Maps, que hemos conseguido al registrarnos. La tendremos que poner sustituyendo el texto =#TU LLAVE GOOGLE MAPS#.
Luego podemos pasar a la función que genera el mapa, que se carga cuando se termina de mostrar la página (la llamamos por el evento onload).
Esa función está bastante comentada y además quiero dejar para artículos posteriores distintos pormenores de la generación de mapas, pero es muy importante llamar la atención sobre un punto crítico, que me dio un quebradero de cabeza cuando estaba probando los mapas, hasta que conseguí dar con el error. Se trata del método de la clase GMap2 setCenter():
setCenter() se tiene que invocar justo después de instanciar el mapa!!!
Si intentamos instanciar el mapa y hacer cosas antes de centrarlo no funcionará. Esto es algo que está muy claro en la documentación del API, pero que como es un poco larga de leer, es fácil que no nos percatemos.
En mis pruebas me falló porque intentaba ponerle un tipo de mapa (vista satélite) y luego lo centraba. El problema es que no sale ningún error específico y es difícil hallar el problema.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...