Insertar Google Maps en WordPress sin plugin

Insertar Google Maps en WordPress

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.

16 comentarios en “Insertar Google Maps en WordPress sin plugin

  1. Hola, seguí los pasos que explicas en el tutorial, hice un mapa con marcadores donde me interesaban y me pasa dos cosas, o no se ve nada aunque si que me deja el hueco del mapa o bien me muestra todo el codigo…

    No se si es por que no he puesto bien el codigo en el fuctions.php del tema no soy muy ducho en html, lo coloque al final y probe despues del php inicial pero no hay manera eso si copie tal cual el codigo que indicas…

    Espero qeu me puedas ayudar, no se si necesitas alguna explicacion mas, gracias de antemano.
    David

  2. Muchas gracias por el tutorial. La verdad está muy claro y es una gran alternativa.

    Si solo se va a usar una sola vez y no se quiere hacer tanto rollo, me parece que una buena alternativa es la siguiente:

    Se hace lo que dice el post en BUSCA EN GOOGLEMAPS EL MAPA QUE QUIERES MOSTRAR

    Del Pop Up que sale se copia solo la parte que está entre <iframe… hasta (es como del inicio hasta más o menos la mitad)

    En el post donde se quiera insertar solo hay que editarlo desde la pestaña HTML, se pega el código y se guarda o publica el post.

    Listo. Esto, insisto, sirve si en un blog se desea poner un mapa y será algo que solo se hará una vez (o muy esporádicamente) y no se necesita modificar los archivos de tu tema desde el código.

    El método que aquí exponen es buenísimo si esto de insertar mapas es algo que se hace de manera regular.

  3. me tira el siguiente error en la funcion add_shortcode()

    Fatal error: Call to undefined function add_shortcode() in /home/rn000245/public_html/wp-includes/functions.php on line 11

  4. Ahora al acceder a wp-admin me salta el siguiente error, y lo que hice fue quitar el codigo…

    Warning: Cannot modify header information – headers already sent by (output started at /home/rn000245/public_html/wp-includes/functions.php:1) in /home/rn000245/public_html/wp-login.php on line 337

    Warning: Cannot modify header information – headers already sent by (output started at /home/rn000245/public_html/wp-includes/functions.php:1) in /home/rn000245/public_html/wp-login.php on line 349

    1. Hola Marcos, no sé qué puede ser pero, por favor, comprueba dos cosas:

      1. Que estás editando el archivo functions.php en modo ASCII (texto plano) y que no estás tocando nada de lo que hay al principio y al final del archivo.
      2. Al copiar el código comprueba que las comillas son correctas, deben ser comillas sin estilo, prueba reescribiéndolas, a ver si fuera eso.

      Si no te funciona pásate por algún foro como ForoWordPress

  5. Hola, se ve que al quitar el codigo habre dejado algo…pero instale nuevamente el wp en otro directorio e hice un copy+paste del archivo wp-includes/functions.php y anduvo todo de nuevo…Gracias!
    pero en fin he probado nuevamente y me sale error en la funcion dd_shortcode(“googlemap”, “fn_googleMaps”);

    Lo que hice fue copiar el codigo del enlace(<iframe….) y pegarlo en el wp y quedo asi:
    http://escuela252chaco.edu.ar/nuestra-escuela/ubicacion

  6. Hola Marcos, en la línea que escribes falta una “a” al principio, salvo que sea error al pegarla aquí 🙂

    He editado tu enlace porque llevaba a la vista previa del borrador y por tanto a error. Muchas gracias por comentar.

  7. Lo estoy probando en local… voy a probar haciendo un shortcode para cada mapa a ver que tal, y os comento, sino me pasaré por el foro 😉

Deja un comentario

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