Insertar Google Maps con shortcode

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

¿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]"]

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]"]
VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(1 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 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.

17 comentarios en “Insertar Google Maps con shortcode”

  1. Pingback: Tweets that mention Insertar Google Maps con shortcode | Ayuda WordPress -- Topsy.com

  2. Hace un mes me volví loco con este tema y decidí no tocar esa página y listo. Ahora tenemos una solución más estable y cómoda. ¡Gracias Batman!

  3. esto funciona a partir de alguna versión de WP? lo he probado con la versión 2.6 y en la versión visual, al copiar la url que viene en google maps no funciona porque le falta todo el código que genera maps con el output=embed. en todo caso, sólo funciona cuando lo pongo en modo html, aunque luego si cambio entre visual y html funciona siempre.

  4. Genial!!!
    Más que para googlemaps lo usaré para Wikiloc, pero seguramente con unos ligeros retoques me servirá.
    Hace días le estoy dando vueltas a preparar algo para wikiloc, pero me daba palo ponerme. Ahora que lo tengo mascado no tengo escusa…
    Gracias.

  5. Pingback: Poner Google Maps en WordPress | Joel López M.

  6. "Hace un mes me volví loco con este tema y decidí no tocar esa página y listo. Ahora tenemos una solución más estable y cómoda."Lo mismo digo! gracias.

  7. Pingback: wp-popular.com » Blog Archive » Google maps wordpress

  8. Alex Aldama Rubio

    googleando y buscando más sobre este tema, en otro foro, alguien  publico una corrección.

    function fn_googleMaps($atts, $content = null) {

    extract(shortcode_atts(array(

    «width» => ‘490’,

    «height» => ‘500’,

    «src» => »

    ), $atts));

    return ‘ View Larger Map

    ‘;

    }

    add_shortcode(«googlemap», «fn_googleMaps»);

  9. Hola, donde se encuentra el fichero functions.php, y como se utiliza el fichero, donde hay que ubicarlo, etc?
    No encontre el post donde explica eso
    Gracias!

  10. Pingback: Insertar Google Maps en WordPress | Ayuda WordPress

Deja un comentario

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

 

Ir arriba Ir al contenido