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!!

Etiquetas:

7 Comentarios a “Tutorial API google maps ¡hazte tu mapa!”

  1. # Anonymous Anónimo

    muy claro. muchas gracias  

  2. # Blogger txopo

    Ha sido mi pequeño homenaje a los tutoriales que dia a dia me salvan el culo en el curro  

  3. # Blogger Vito

    ya podremos entonces trazarnos las rutas de baretos de moda por la ciudad 8-)  

  4. # Blogger Unknown

    Hola,
    Necesito poner 2 mapas en la misma pagina web, pero no consigo que me funcione. Alguien me puede decir como o de algun tutorial , porque he estado buscando y encuentro poca cosa.

    Un saludo  

  5. # Blogger xpiderman

    Hola amigos! Tengo una interrogante: estoy creando un mapa en google maps y los mapas de algunos usuarios he visto que puedes crear una lista desplegable para asociar un grupo. Por ejemplo, si creo mi mapa MI CIUDAD, y quiero agrupar las gasolineras en una lista donde el usuario pueda hacer click en un simbolo de + para desplegar todas las gasolineras o un apartado para las escuelas por ejemplo... cómo se hace eso?

    gracias por sus respuestas.  

  6. # Blogger Juan Felipe

    Hola estoy mostrando la ventana de los marcadores al dar click sobre ellos, mostrando un titulo, una foto y una descripcion, lo que pasa es que algunas veces me muestra la ventana perfectamente y otras veces me muestra la foto y la descripcion por fuera de la ventana, el codigo es este

    GEvent.addListener(marker,"click", function(){
    var myHtml = "-b-"+dat[i]["nom"]+"-/b--br/-"+
    "-img src='imagenes/puntos_interes/imagenes/"+
    dat[i]["foto"]+"' width='200px'/--br/-"+
    "-div style='width:200px;'-"+dat[i]["des"]+"-/div--br/-";
    marker.openInfoWindowHtml(myHtml);
    });

    LOS CARACTERES MAYOR Y MENOR PARA ABRIR Y CERRAR ETIQUETAS LOS HE CAMBIADO POR EL CARACTER "-" PARA PODER PUBLICAR ESTE COMENTARIO

    Gracias por la ayuda  

  7. # Blogger huangxh
Publicar un comentario


Buscador de noticias

Últimos comentarios