22ene
12

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

Para saber más:

  • http://www.eturismoviajes.com Gloria

    Entre los tantos fanáticos de WordPress, ahora se suma el grupo Clarin, que es el diario más importante de aquí de Argentina, con sus blogs que van a utilizar esta plataforma.
    http://www.clarin.com/diario/2010/01/22/um/m-02125147.htm

    Un saludo al fana mayor, Fer

  • http://www.amamavas.com Loren

    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!

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

  • http://labugia.com iru

    genial! lo mismo digo, decides no tocar esa pàgina!! muy útil…

  • David

    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.

  • http://scwireless.no-ip.info/blog/ Palut

    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.

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

  • Albert

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

  • http://guardafaro.net guadafaro

    Pues funcionará con mapas callejeros, pero no me funciona con el códico incrustado de google maps para las vistas de satélite.

  • http://www.bizion.org Ricardo

    Yo puse ese codigo pero no me sale solamente el mapa sino todo el sitio de google maps con el mapa dentro. deberia verse asi o como?

    • http://vidaoutdoor.com Ego Ipse

      Tuve exactamente el mismo problema. Encontré la solución en una página en inglés, que al parecer inspiró a AWP. La clave está en cambiar la línea 8 del código propuesto por Fernando. Sustitúyela por esto:

      return '';

      Espero que sirva.

      Saludos

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