Primeros con Google Maps

Google Maps se ha extendido entre los internautas muy rápidamente. Es una herramienta muy útil a la hora de encontrar sitios, lugares recomendados, pasear por alguna ciudad gracias al Street View (hace poco se publico en España para las ciudades de Madrid, Barcelona y otras más). Veamos como integrar un mapa dentro de nuestra página Web gracias a la potente API de Google Maps.

Obtener una API Map key para nuestro sitio Web

Para poder usar la API dentro de nuestro sitio Web debemos registrar el dominio en la API de Google Maps para obtener una llave válida y poder usar la API. Para ello usar este enlace: http://www.google.com/apis/maps/signup.html

Después de leer y aceptar el contrato de licencia y escribimos el  dominio en el cuadro de texto. Por ejemplo, para el caso debería escribir http://www.a2sistemas.com

Después solo queda pulsar el botón “Generate API Key”. Al pulsar el botón se cargará una página indicándonos cual es nuestra API Key y mas abajo un pequeño ejemplo de código para insertar en nuestra web. Es el Hello World de Google Maps.

Obtención de la API Key

Obtención de la API Key

Por cierto, debemos disponer una cuenta Google para usar este servicio. Si no dispones de cuenta Google, puedes crearte una siguendo el enlace: https://www.google.com/accounts/NewAccount

Hola Mundo de Goolge Maps

Veamos el siguiente código:

Google Maps JavaScript API Example<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIKEY"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
	var map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

El código anterior crea un mapa dentro de un DIV con id “map” de 500px con 300px, situando el centro del mapa en las coordenadas: 37.4419, -122.1419.

Recordad que hay que cambiar en la llamada del primer <script> el valor de “key=” por el de vuestro dominio. De lo contrario aparecerá un alert() informando de un error en la clave.

Puedes ver un ejemplo del código anterior aquí.

Cambiar el centro inicial del mapa

Para ello hay que modificar la siguiente linea:

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

setCenter es un método que nos permite indicar cuál será el centro inicial del mapa. Usando una latitud y una longitud. Para conocer estos datos de cualquier punto del planeta de forma exacta, usaremos también Google Maps. Para ello abrimos en nuestro navegador Web la dirección http://maps.google.es/ ahora buscamos la úbicación de la cuál deseamos obtener la latitud/longitud, para aseguranos de que la ubicación esté centrada, pulsando con el botón derecho del ratón seleccionamos la opción Centrar mapa aquí ahora pegamos el siguiente código Javascript en la barra de direcciones del navegador Web y pulsamos Intro:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Se abrirá un cuadro de diálogo con la latitud y longitud del centro del mapa. ¡Perfecto!

Añadir elementos de control

Para poder interactuar con el mapa, moverte por él, hacer zoom y cambiar el tipo de mapa, hay que insertar los controles para ello:

map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
  • GLargeMapControl -> Te pemite hacer zoom y moverte mediante botones por el mapa, además poder volver al centro inicial.
  • GScaleControl -> Añade una leyenda en la parte inferior izquierda con la escala del mapa.
  • GMapTyeControl -> Te permite cambiar entre los diferentes modos de ver un mapa.

Puedes visualizar un ejemplo aquí.

Añadir un punto en el centro del mapa

Ahora vamos a insertar un marcador en el mapa, justo en el centro inicial. Cuando se haga “click” al punto se centrará la vista al punto en cuestión. Además tendrá un globo con información. Se pueden añadir tantos puntos como se quieran y donde quieran. Pero para este caso vamos a añadir solo uno:

var punto = new GLatLng(41.548929,2.42609);
 
var marcador = new GMarker(punto);
 
GEvent.addListener(marcador, "click", function() {
     map.panTo(new GLatLng(41.548929,2.42609));
});
 
map.addOverlay(marcador);
 
marcador.openInfoWindowHtml("&lt;b&gt;Mi primer PUNTO&lt;/b&gt;");

Con la función GMarker creamos el marcador en el punto localizado por la variable punto.

Con GEvent, creamos un evento al hacer click en marcador, para este caso lo que hace el evento es ir a la posición ( map.panTo ) 41.548929,2.42609 y con openInfoWindowHtml abrimos una ventanita en forma de globo con información en formato Html.

Puedes ver el resultado aquí y también aquí

Más ayuda

Puedes obtener más ayuda e información con ejemplos en el sitio Web de la API de Google Maps. Toda la documentación sobre todo lo que puedes llegar a crear. Un ejemplo es la siguiente aplicacion: el tráfico maritimo y aéreo de España en tiempo real: http://www.atlantic-source.com/trafico-maritimo ¡Genial!

De momento eso es todo, en una futura entrega hablaremos de como cargar puntos geográficos dinámicamente desde una base de datos o vía un archivo XML.

Dejar un comentario

*