Mapas de Google API 2

  • Por
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. Pero estos dos artículos utilizaban una API que Google ha actualizado, por lo que se hacía necesaria una revisión para mostrar códigos de integración de Google Maps que sean compatibles con el API que se utiliza ahora.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Mar

09/1/2009
He seguido todos los pasos que indicais y sale todo correcto excepto en algunos ordenadores con Internet Explorer que sale un error de javascript: "GMap2 no definido"
Lo he comprobado y en los ordenadores que ocurre esto, el error da también en los propios ejemplos que google tiene con este API.

Gracias por vuestra web

Cesar

13/10/2009
mapa que no se actualiza
Hola.
Teniendo un mapa que funciona correctamente, he realizado una modificacion de coordenadas y de la direccion que se muestra, pero al cargar la pagina donde esta embebido, no se muestra la direccion/coordenadas actual, sino la anterior. Supongo que tira de mi cache, pero ¿Como puedo hacer para que se vea la informacion actual?
gracias

GUILLERMO

22/5/2014
PREGUNTAS SOBRE GOOGLE MAPS
Hola soy un aficioando a la programacion , por lo que hay muchos conociemientos de los que caresco y quizas pregunte cosas tontas. Si embargo soy muy entusiasta y gustaria aprender a programar aplicacione empleando tecnologia de gps en smartphones, por lo que me recaen las siguientes preguntas:

- Con el API que estas explicando una vez yo defina mis variables y mis puntos deseados, y requiera por ejemplo mostrar un rango o una distancia al rededor del punto deseado con un circulo, esto lo puedo hacer con el api que mencionas. Por ejemplo Dibujar un circulo con radio 5km sobre el mapa??.

- Que otras operaciones similares podria llegar a realizar con este API.

Gracias


- Es posible dibujar en la interfase grafica de google maps que estas explicacndo, una vez realice los calculos de las distancias

Alvaro11

22/5/2015
Problemilla
Hola, he seguido todos los pasos y no se porque no me aparece el mapa. este es mi código, a ver que podeis encontrarme que tenga mal :

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Mapas de Google</title>

<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyAveHDVksg1_mVVsGKWPPK6tMuwFeYdlBY" type="text/javascript"></script>


<script type="text/javascript">

//<![CDATA[
//funcion para cargar un mapa de Google.
//Esta funcio?n se llama cuando la pa?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, pasa?ndole una referencia a la capa o <div> donde queremos mostrar el mapa

var map = new GMap2(document.getElementById("map"));
//centramos el mapa donde queremos y con zoom
map.setCenter(new GLatLng(37.2141237,-7.4043413)3);


//decimos el tipo de mapa
map.setMapType(G_NORMAL_MAP);





//añadimos controles para el usuario

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());


}}

window.onload = load

//]]>


</script>




</head>


<body onload="load()" onunload="GUnload()">




<div id="map" style="width: 615px; heigth: 400px"> </div>











</body>
</html>