Insertar Google Maps con shortcode

Publicado por Fernando Tellado el 22 Ene, 2010

Insertar un mapa de Google Maps es en realidad muy sencillo, solo tienes que copiar y pegar el código que se te ofrece al crear la ruta o mapa en tu editor HTML y este se mostrará en todo su explendor en tu web. Ahora bien, cuando andas cambiando al editor visual, o si acostumbras a usar solo el modo visual, es más, cuando tienes un cliente que no usa el editor de código, entonces tienes un problema.

Y es que los códigos de Google Maps en ocasiones se pierden al pasar de un editor a otro y, por supuesto, si los pegas en el editor visual no se van a mostrar.

En estos casos puedes recurrir a insertarlos con un shortcode. Para conseguirlo primero tenemos que crear la función que lo permita, y recurriremos – como no – al fichero functions.php de nuestro tema activo (¡ay madre como un día desaparezca este fichero!) y allí introducimos un código como este:

//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");

//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");

¿Cosas que puedes cambiar en este código?, pues el tamaño por ejemplo, y ponerlo a uno que se adapte al ancho de tu tema, o el nombre del shortcode, en este caso googlemap.

Luego, una vez guardados los cambios en el fichero functions.php solo tienes que, ya en el editor visual si quieres, insertar tu mapa de Google solo poniendo la URL entre el nuevo shortcode creado, algo así …

[googlemap src="[url]"]

1	[googlemap src="[url]"]

En vez de [url] pones la URL que te facilita Google Maps desde el icono de “Enlazar” y ya lo tienes.

Si no quieres modificar el código por defecto, también puedes modificar el tamaño en cada shortcode, por ejemplo …

[googlemap width="400" height="200" src="[url]"]

1	[googlemap width="400" height="200" src="[url]"]

Si te gusta este contenido prueba tambien a suscribirte al canal en YouTube.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.