Todotutoriales

Si ya lo has intentado, te habrás dado cuenta que al embeber como objeto los mapas de Google Maps, al igual que ocurre con vídeos y archivos flash, puedes perder el código al reeditar un post o una página. Sin embargo, en WordPress tenemos soluciones para casi todo: podemos sortear este inconveniente sin necesidad de plugins, insertando el código mediante un shortcode.

Se han publicado más tutoriales sobre esto, pero he encontrado un error en los que he visto  hasta ahora, seguramente heredado del tutorial original. Si copias la dirección simple que proporciona Google Maps en su pestaña “Enlazar”, tal como dicen, te encontrarás con la desagradable sorpresa de que en lugar de insertar el mapa, o el trozo de mapa que quieres, te insertará la página completa, con los menús de Google y todo. Esta es la forma de hacerlo correctamente:

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

El archivo functions.php lo encontrarás dentro de la carpeta de tu theme. Si no existe tendrás que crearlo. Estos serán los ajustes por defecto de tus mapas, cambia el tamaño al que prefieras, modificando los valores en píxeles del ancho (width) y el alto (height). Si vas a usar un único mapa, puedes poner también la url aquí (src). Si vas a usar diferentes mapas, déjalo así.

//Google Maps Shortcode
function fn_googleMaps($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $atts));
return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'"></iframe>';
}
add_shortcode("googlemap", "fn_googleMaps");

Busca en GoogleMaps el mapa que quieres mostrar

En http://maps.google.es/ pon la dirección y te aparecerá el mapa. Haz clic en “Enlazar” y después en “Personalizar y obtener vista previa del mapa que se va a insertar”.

Te saldrá un pop-up como este:

Pon las medidas que desees y después copia la url que genera Google Maps, la parte marcada en amarillo, que es el pedazo de código que va entre comillas (“) despues de src=.

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

Escribe el siguiente shortcode donde quieras que se muestre el mapa de Google Maps:

[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.

Cómo usar 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 de diferente forma, puedes modificar el tamaño y la url de cada mapa en cada shortcode, por ejemplo:

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

Sustituye la palabra URL por la url que genera Google tras la personalización, debes copiarla completa.

El shortcode debe quedarte más o menos así:

[googlemap width="610" height="350" src="http://maps.google.es/maps?f=q&source=s_q&hl=es&geocode=&q=Lope+de+Vega,+11,+La+Alberca,+Murcia&sll=40.396764,-3.713379&sspn=9.58418,23.269043&ie=UTF8&hq=&hnear=Calle+de+Lope+de+Vega,+11,+30150+Murcia,+Regi%C3%B3n+de+Murcia&ll=37.935761,-1.145273&spn=0.005923,0.00912&z=16&iwloc=A&output=embed"]

Recuerda que si te surge cualquier duda, sobre shortcodes o cualquier otra cosa referente a WordPress, puedes plantearla en el Foro WordPress.

Categorías: WordPress
Etiquetas: Código, Google, Google Maps, Mapas, shortcode, Tutorial, WordPress

Si te ha gustado este post, subscríbete al feed RSS de todotutoriales.es.

Artículos relacionados

• Mostrar código en WordPress
• Convertir datos GPS a Google Earth y Google Maps
• Cómo hacer una imagen de fondo escalable con CSS
• WordPress: separar trackbacks de comentarios
• WordPress: cómo usar el tema Branford Magazine