Cultura digital, running y reflexiones personales con acento andaluz

Cómo poner un mapa de Google Maps en tu blog

El rey indiscutible en internet, pese a quien le pese, es Google. Lo ha conseguido, por méritos propios, con su filosofía y su forma de entender la red. La consecuencia directa de esto, es que, millones de personas utilicen sus servicios diariamente y estén al tanto de los nuevos programas y aplicaciones que la compañía lanza periódicamente generando una tremenda expectación.

Por ejemplo estos días no se ha parado de hablar de la materialización europea de Google Maps. Precisamente Google España ha presentado hoy, su recién inaugurado servicio en una rueda de prensa por su nueva directora Isabel Aguilera. (Por cierto que es la primera que Google ofrece en España)

En relación a este servicio, he estado curioseando un poco sobre la posibilidad de insertarlo en nuestra propia página y efectivamente esto es posible debido a que Google liberó hace un tiempo su API.

Para los que, como yo, no entienden mucho de programación, wikipedia nos dice que son las siglas de Application Programming Interface (Interfaz de Programación de Aplicaciones), una especie de método, para aprovechar sinergias entre varios programas. Por ejemplo, A, utiliza dentro de su sistema, el programa de B, gracias a que este le ha proporcionado un «how to», escrito en su API.

Así pues con esta API liberada, Google nos proporciona un sistema para que, a través de JavaScript insertado en nuestra página web, podamos utilizar estos mapas.

Vamos a verlo todo con un ejemplo práctico. Utilizaré la web que gestiono desde hace tres meses de la Semana Santa de Baena (Córdoba). Podría ser muy util para los lectores poner un mapa de la ciudad indicando los puntos principales.

Lo primero que hay que hacer es pedirle una clave a Google para poder utilizar esta API, aceptar sus normas e indicarle la URL en la que utilizaremos su programa.

contrato-api

Una vez aceptado y cumplimentado todo, nos aparecerá una página dándonos las gracias y tres cositas:

1. Nuestra Llave
2. La confirmación de la web para usar esa llave
3. Un ejemplo de inserción del código en una web. En este código aparecen los scripts necesarios para poner google maps en nuestro blog.

api

En ese código hay también elementos facilmente identificables como el tamaño del mapa o las coordenadas, que nos interesan para colocar el mapa de la zona que queremos, de la forma que queremos en nuestra web.

El paso siguiente es saber las coordenadas correctas de la zona. En el ejemplo de Baena, vamos a Google Maps, buscamos «Baena, Spain», acercamos el zoom y cuando tengamos la zona que queremos, le damos al botón «Enlazar esta página».

El resultado será una nueva web (ver imagen), en cuya url se encuentran estas coordenadas. En nuestro caso: 37.614322,-4.326459

Ahora ya sólo nos queda irnos a nuestra página y colocar los códigos correctamente, con estas nuevas coordenadas, con el tamaño proporcional del mapa que queramos y siguiendo el ejemplo de google.

Habrá que tener en cuenta, que parte del código va entre las etiquetas de la cabecera y el resto, en la anotación o parte del blog o web que quieran que aparezca el mapa. Ver imagen

El resultado, debería ser algo parecido a esto:

Ahora, prueben, experimenten, y comenten. Recuerden que tienen una sección dentro de la web de API, para ampliar información y donde están las preguntas frecuentes y solución de problemas.

Anterior

El container cumple 50 años

Siguiente

Dejadnos vivir, no nos comáis

  1. Muy buena explicación Raúl. Quizás algún día la use, pero por ahora no me sirve demasiado.

    Eso si, ahora Google Maps en España está muy bien hecho, me he sorprendido a como estaba hace unos meses.

  2. Pues yo quería usarlo en mi blog señalándo algunos sitios de interés de Reykjavik pero se ve que Islandia no es Europa (snif, snif) No sé porqué aún me sorprendo de estas cosas…

  3. A ver qué te parece la aplicación que hemos hecho para Bilbao, Bilbao.bi. Muy buena la explicación, por cierto.

  4. sbs

    La explicacion esta muy bien, pero se podría pasar la dirección (guardada en una base de datos) y que te devuelva las coordenadas, estas coordenadas guardarlas en una variable y luego ponerlas en el código donde correspondan???

  5. No te he entendido muy bien sbs. ¿Te refieres a esto ?

  6. sbs

    Hola te pongo un ejemplo:
    en un campo tengo guardad la calle: serrano 15, ciudad: madrid.
    quiero pasar esta dirección y que me devuelva las coordenadas (ej 40.34242, 50.234234). estas coordenadas las quiero guardar en dos variables longitud y latitud, poniendo estas dos variables en el código y que me enseñe el mapa. La questión está que el usuario no debería estar buscando las coordenadas para dar de alta una calle en la web.

  7. Cristina

    A mi no hay manera de que me salga.
    Al introducir el código html en mi blog (mediante la pesataña edición en html) al publicar, me dice que no acepta la target

    qué puede ser?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Funciona con WordPress & Tema de Anders Norén