Índice:
1.-Breve Introducción
2.-Inicializando un mapa
3.-Estableciendo puntos
4.-Eventos
5.-Eventos (pasando valores)
6.-Polígonos
7.-Líneas
1.-Breve Introducción
Mucha de la documentación que se encuentra en Internet con respecto a la API de Google Maps es sobre las versiones viejas, por lo que he decidido intentar hacer un conjunto de posts exclusivamente para la última versión.
Para empezar, oficialmente las versiones 1 y 2 se consideran obsoletas, por lo que viene bien aprender un poco acerca de la última versión. Por otro lado, una de las implementaciones nuevas de esta versión, es la adición de Google Street View.
Con las versiones viejas, primero de todo habia que obtener la clave API dependiendo del sitio web en donde quisieramos usar el código. Pero con esta nueva versión no es necesario, es todo mucho más sencillo.
2.-Inicializando un mapa
Lo primero de todo vamos a tratar de entender cómo funciona el “hola mundo de la api de GMaps”:
(1): Como podemos ver, la URL que cargamos es la siguiente: http://maps.google.com/maps/api/js?sensor=false. Aquí simplemente quería explicar qué significa el parámetro sensor, que puede tomar valores de true y false. Este sensor se pone en true cuando el dispositivo sobre el cual se espera que se cargue esta página dispone de un localizador (como un GPS) encargado de determinar la localización del usuario. Como estamos haciendo pruebas sobre un ordenador (que no dispone de GPS) lo tengo puesto en false.
(2): Aquí simplemente decir que creamos una variable llamada coordenadas en la que establecemos el punto céntrico en donde queremos que se centre nuestro mapa. Para obtener las coordenadas, simplemente nos movemos con el Google Maps a un punto, y le damos al botón de enlazar para obtener las coordenadas en los parámetros que se pasan en la URL, como en la siguiente imagen.
(3): Este valor es la cantidad de zoom que queremos aplicar a nuestro mapa. Normalmente va desde el valor 0 al 19. Este valor depende de la zona y del tipo de mapa empleado.
(4): Establecemos el centro, que es la variable coordenadas anteriormente definida.
(5): Aquí elegimos el tipo de mapa que queremos usar:
- ROADMAP: mapa callejero con el nombre de las calles y demás.
- SATELLITE: mapa satélite con ningún nombre puesto.
- HYBRID: mapa híbrido, satélite con los nombres
- TERRAIN: mapa físico con algunos nombres
(6): Creamos el mapa. Nos tenemos que dar cuenta de que usamos el identificador mapa para luego posteriormente usarlo.
Ahora nos vamos con la parte HTML del asunto:
Como podemos ver, creamos un div con el identificador anteriormente usado, y establecemos mediante CSS que ocupe toda la pantalla del navegador.
Ahora, juntamos todo el código fuente, y nos deberia quedar algo así:
3.-Estableciendo puntos
En este apartado aprenderemos como establecer puntos dentro de lo que es el mapa. Para este ejemplo, seguiremos usando el código anterior, por lo que, el siguiente código irá a continuación del código Javascript anterior (dentro de la función de iniciar)
var coordenadas = new google.maps.LatLng(37.680000,-1.669407);
//Establecemos las coordenadas del punto
var marker = new google.maps.Marker({ //opciones
position: coordenadas,
//Decimos que la posición es la de la variable 'coordenadas'
map: map,
//Nombre del mapa
title:"Hola Mundo!"
//Titulo (visible cuando colocamos el ratón sobre el punto)
});
¿Sencillo verdad? Y el resultado es el siguiente:
4.-Eventos
Los eventos son acciones que se toman tras la realización de otra. Con el siguiente ejemplo lo veremos muy claro. Trataremos dos eventos: el cambio de zoom, y el “click” en una marca.
var map;
function iniciar() {
var coordenadas= new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: coordenadas,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mapa"), myOptions);
//Hasta aquí es igual que antes
google.maps.event.addListener(map, 'zoom_changed', function() {
setTimeout(moveToDarwin, 3000);
});
//(1) Primer evento
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
}); //Esto ya lo vimos antes, creamos una marca o punto
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
});
//(2) Segundo evento
}
function moveToDarwin() {
var darwin = new google.maps.LatLng(-12.461334, 130.841904);
map.setCenter(darwin);
}
//Función que se encarga de centrar el mapa en esas coordenadas
Antes de entrar en cada evento particular, podemos destacar las características comunes. Un evento tiene 3 parámetros: el primero hace referencia al objeto que estamos tratando (un mapa o una marca en estos ejemplos). El segundo hace referencia al nombre interno del evento que tiene que ocurrir (que cambie el zoom o que se clickee). El último parámetro simplemente es el accionamiento de una función.
(1): El primer evento se acciona cuando cambiamos el zoom (ya sea para acercar o disminuir), y cuando esto ocurre, al cabo de 3000 ms se acciona la función moveToDarwin que establece el centro en otro sitio.
(2): Este evento se acciona cuando se clickea en la marca, y una vez esto, se establece que el zoom deba de ser 8.
5.-Eventos (pasando valores)
A veces, a la hora de esperar a que se realice un evento, este evento realizado puede transmitir información que nos sea útil. En los ejemplos anteriores no nos valia de nada transmitir información. En uno de los eventos anteriores, simplemente al hacer click en un sitio, estableciamos de zoom 8, y en el otro, simplemente nos moviamos a unas coordenadas predeterminadas.
En el siguiente ejemplo vamos a hacer que cada vez que pinchemos en el mapa, establezcamos una marca. Para esto, a la hora de pinchar, tenemos que transmitir la información de cuando pinchamos (las coordenadas) a la función que se encargará de crear esa marca.
(1): Como podemos ver aquí, transmitimos las coordenadas. event.latLng hace referencia a las coordenadas que queremos transmitir y que posteriormente usaremos para crear la marca.
6.-Polígonos
Simplemente pondré un script de cómo se hacen polígonos. Es realmente fácil y muy intuitivo. El siguiente polígono da como resultado la traza del triángulo de las bermudas:
7.-Líneas
Funcionan casi igual que los polígonos.. solo que tienen algunas opciones distintas y el nombre de la función (como es obvio..) también cambia. Código de ejemplo:
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
Para la gente que se quiera adentrar y profundizar en este mundillo, teneis una referencia justo aquí de los métodos, valores que devuelven, tipos y propiedades, publicado por Google. Viene una cantidad ingente de información de la cual es imposible resumir, pero al venir en completo castellano, será fácil encontrar cosas que queramos adaptar a nuestro uso por parte de la API de Google Maps.
Saludos, lipman