Archivo de la etiqueta: Mapas

Publicar mapas en WordPress II

 

En una entrada anterior vimos como publicar mapas usando el código HTML que nos proporciona Google Maps. En esta ocasión, vamos a utilizar shortcodes para evitar el inconveniente que supone re-escribir el código, ya que se pierde sí necesitamos reeditar el artículo o la página.

¿Qué es un shortcode?

Los shortcode son un código específico de WordPress, que nos  permiten integrar archivos o crear objetos con poco esfuerzo y sin utilizar plugins. De hecho existen repositorios de los Shorcodes más utilizados.

Los shortcode los introduciremos en la entrada o en la página donde queramos publicar el recurso, y para que todo funcione hay que realizar unos ajustes previos en el archivofunctions.php de nuestro tema activo.

Como publicar Google Maps en WordPress con shortcode

1 Añade el siguiente código al archivo functions.php

Lo primero que tenemos que hacer es crear la función que nos permita publicar un mapa, y para ello acudiremos al archivo functions.php del tema que estamos utilizando.

El archivo functions.php se encuentra dentro de la carpeta themes. Recuerda que tienes que modificar el archivo de tu tema activo.

Una vez abierto, el archivo functions.php, introducimos el siguiente código:

//Google Maps Shortcode
function fn_googleMaps($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $atts));return
'http://'.$src.'';
}
add_shortcode("googlemap", "fn_googleMaps");

Estos son los ajustes por defecto que tendrán los mapas que publiques, pero puedes cambiar el tamaño y dar uno que se adapte mejor al ancho de tu tema, modificando los valores en píxeles del ancho, width, y alto, height.

  • Sí usas un único mapa en tu sitio:

Si vas a usar un único mapa, puedes poner en el shortcode del archivo functions.php, la URLdel mapa que quieres publicar. Si vas a usar diferentes mapas hay que dejarlo en blanco.

  • Sí usas un mapa diferente o de diferente tamaño en cada página o post:

Si vas a usar mapas de Google Maps en diferentes páginas o entradas y con diferente tamaño, puedes modificar la URL y el tamaño de cada mapa directamente en el shortcode de cada página o post, por ejemplo:

[googlemap width="200" height="200" src="URL"]

En este caso sustituye “URL” por la url que genera Google tras la personalización, ojo debes copiarla completa.

Finalmente guarda los cambios del archivo functions.php.

2 Busca en Google Maps el mapa que quieres mostrar

Pon la dirección del mapa que te interese publicar en tu wordpress en Google Maps

Haz clic en Enlazar, sí quieres puedes Personalizar el mapa que vamos a insertar.

y en el apartado Copia este código HTML para incrustar el mapa en tu sitio web, como podemos ver en la imagen siguiente:

copia la dirección que genera Google Maps, en concreto la parte marcada en azul, es el código que va entre comillas (“) despues de SRC= y hasta EMBED.

Un ejemplo de la dirección URL que tienes que copiar:

“http://www.google.com/maps?f=q&source=s_q&hl=es&geocode=&q=Calle+de+Pedro+Cerbuna,+50009+Zaragoza,+Espa%C3%B1a&sll=41.639052,-0.887318&sspn=0.117642,0.244446&ie=UTF8&hq=&hnear=Calle+de+Pedro+Cerbuna,+50009+Zaragoza,+Arag%C3%B3n,+Espa%C3%B1a&ll=41.640467,-0.89739&spn=0.011225,0.018239&z=15&iwloc=A&output=embed”

3 Introduce el shortcode en el post o la página

Donde quieras que se muestre el mapa de Google Maps escribe el shortcode:

[googlemap src="URL"]

Sustituye la palabra URL por la url que acabas de copiar tras la personalización, debes copiarla completa. Es muy importante que el código de la URL sea el que lleva el “embed”, para que no te inserte la página completa del Google sino solamente el mapa.
No hay diferencia visual con respecto a publicar el mapa utilizando el código <iFrame> que nos proporciona Google Maps, pero nos evitamos el inconveniente de tener que volver a copiar el código del mapa, sí realizamos algún cambio en la entrada o página donde está publicado.

Demo:

Ver mapa más grande

Publicar mapas en WordPress I

Google Maps nos permite publicar mapas en nuestro blog, o página web, de una manera sencilla, ya que nos proporciona el código HTML necesario para insertarlo.

Como Publicar mapas en WordPress

1 Busca en Google Maps el mapa que quieres mostrar

En Google Maps pon la dirección y te aparecerá el mapa, que te interese insertar en tu WordPress

2 Haz clic en Enlazar

Al hacer click en la opción Enlazar, se abre una nueva ventana, y allí encontramos el código HTML, necesario para insertar el mapa en cualquier web.

Podemos cambiar el tamaño de la ventana del mapa y algunos detalles más, ya sea a mano o a través de las diferentes opciones, es muy sencillo y para ello haremos click en Personalizar y obtener vista previa del mapa que se va a insertar, como podemos ver en la siguiente imagen:

Cuando ya tengamos el mapa listo copiaremos el código HTML e iremos a WordPress

3 Introduce el código iFrame en el post o la página

Ya en WordPress introduciremos el código, que nos proporciona Google Maps utilizando eleditor HTML, en la entrada o página que queramos publicar el mapa.

De esta manera estamos insertando (embeber) como objeto el mapa de Google Maps, al igual que hacemos con vídeos y archivos flash. Pero hay un inconveniente, y es que sí necesitamos reeditar el artículo o la página perderemos el códigoteniendo que volver a introducirlo. Pero, como no podía ser de otro modo, WordPress tiene soluciones para casi todo y podemos sortear este inconveniente sin necesidad de plugins (particularmente no me gustan y los evito siempre que puedo), insertando el código mediante un shortcode. Lo veremos en el siguiente artículo.

Demo: