Tutorial API google maps ¡hazte tu mapa!

últimamente no he estado muy blogger, y es que he estado trasteando con el API de google maps, potentisimo por cierto, y me he montado una pequeña aplicación buscador/agregador de eventos -cutre, sin arreglar, ni calendario integrado, y sin esos efectos 2.0 que tanto nos molan- pero lo que realmente quería era probarlo, aunque en breve tendréis una versión pro de lo mismo con mas colorines, buscador y toda la web social, ya lo publicaré.

Así que aprovechando que se mas o menos trabajar con el API os voy a dar los básicos para que trasteéis lo que queráis en vuestra casa.

Primero lo oficial: http://www.google.com/apis/maps/documentation/ este es el sitio de google para aprender a manejar cosillas, cualquier duda hay que os vais: tiene ejemplos de todo.

Para empezar a trabajar con un mapa primero tenéis que poseer una clave para vuestra web (debe de ser una comprobación en cliente de la web y el código, pq es rapidísimo) que se consigue metiendo la dirección de la web que va a contener el mapa (o de localhost si tenéis instalado un servidor en vuestra casa, que también vale) aquí: http://www.google.com/apis/maps/signup.html

Después de esto y para ver el primer mapa hacéis un html donde se incluya el archivo que hace que esto funcione, asique al principio de la pagina colocáis un script type="text/javascript" indicando esto:

src="http://maps.google.com/maps?file=api&v=1&key=AQUI_TU_CLAVE"

para incluir el archivo que hace que esto funcione :P

Después en el cuerpo/body de la pagina definís una capa/div con estos parametros:

id="map" style="width: 500px; height: 400px"

Lo importante es que el id sea "map", ya que luego se va a buscar ese nombre para meter un mapa.

Ya solo queda un paso para que se cargue: dentro de etiquetas javascript se crea el objeto mapa y se le da la orden de obtener para que se calcule, algo como esto:

var map = new GMap(document.getElementById("map"));
map.setMapType(map.getMapTypes()[2]);
map.addControl(new GMapTypeControl()); // esto es para el control de satelite, hibrido, mapa.
map.addControl(new GLargeMapControl()); // y esto para el zoom y el control que esta encima

Felicidades habéis hecho vuestro primer hola mundo con Gmaps!!

Ahora unas funciones de interés, a lo rápido, así como 'aprende a usar Gmaps en 3 minutos':

Estas funciones se ponen en un javascript como el de antes, es mas pueden estar justo debajo del anterior o en uno externo o dentro de funciones que se ejecuten cuando un usuario de le a un botón.

• centrar el mapa en un punto:

  map.recenterOrPanToLatLng(new GPoint(-8.7288818359375, 43.89206418807337));

• poner una ventana de informacion en el mapa:

  map.openInfoWindow( (-8.7288818359375, 42.89206418807337) , document.createTextNode("Se alquila"));

• Colocar un marcador estandar en el mapa:

  var punto = new GPoint(-9.7288818359375, 43.89206418807337); //crea una variable punto
  var marcador = new GMarker(punto); //creo un marcador asociado a ese punto
  map.addOverlay(marcador); // hago que se superponga en el mapa

• hacer que un marcador tenga una ventana con el contenido de la variable html (y formato html) al pulsarse:

  GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });

• una función que te mueve el mapa al sitio donde le digas (si, si y no solo con nombres de ciudades, sino con sitios :P):
  

  function buscarSitio(nombreSitio){
  var geocoder = new GClientGeocoder();
  geocoder.getLatLng(nombreSitio, function(point) {
  if (!point) { alert(nombreSitio + " no se ha encontrado el sitio");
  } else {map.setCenter(point, 15);} } );
  }

Bueno, y ya esta bien por hoy que esto no es un blog tecnologico y nos sobresaturamos, para continuar con el tema si os ha interesado aqui teneis una serie de links muy muy interesantes.

Animaros a probarlo es muy sencillo!!