Como poner un Mapa de Google en nuestro WordPress

¿Cómo poner un Google Maps en mi página de wordpress?

 

   ¿Tu también has visto lo chulo queda ese mapa de Google en algunas páginas?¿Ahora lo quieres en la tuya? Sin lugar a dudas el “Donde estamos” de esa nueva página que estás haciendo quedaría mucho mejor. Y si pudieras ponerlo como un widget en la barra lateral o incluso en la zona de widgets del footer sería la leche. Pues es muchísimo más fácil de lo que crees. Es este artículo os voy a enseñar a instalar y configurar el widget oficial de Google Maps para que le deis ese toque profesional a vuestra web.Mapa

   Antes de nada deciros que tanto la descarga como el uso del Plugin es totalmente gratuito. Es verdad que si queremos optar a más opciones tendremos que pagar 5€ pero no es necesario. Para un uso normal con la versión gratuita es más que suficiente. Aún así comentaré todas las posibles configuraciones de la versión Pro por si al final os decidís a comprarla.

       Descarga e instalación

   Se descarga e instala como los demás plugins. La descarga del archivo Zip la podéis hacer desde aquí. Una vez tengamos nuestro archivo de descarga nos vamos a la zona de instalación de nuestro panel WordPress, seleccionamos el zip  y comenzamos la instalación. Una vez instalado lo activamos y ya está, Ya queda menos para ver ese mapa tan chulo en nuestra web.

     Activación del plugin

   Para mi ésta es  la parte mas difícil del proceso y fue lo que me animó a escribir este artículo. Para activar el plugin de Google y que funcionen todas sus opciones necesitamos dos claves, si, has leído bien, DOS. Una para el mapa estático (Google Static Maps API) y otra para el mapa que vamos a ver en nuestra zona de Widgets (Google Maps Embed API).

   Vamos a ir paso a paso para no perdernos. Primero nos vamos, desde nuestra zona de administración de WordPress, a Ajustes. Si hemos hecho bien la instalación ya nos tiene que aparecer nuestro widget (Fig1). Clicamos y llegamos a la zona de ajustes de Google Maps.

Mapa de Google
Fig. 1

   Una vez dentro nos tenemos que fijar en la primera línea donde pone Google Maps API Key. Aquí es donde tendremos que poner las dos claves o Keys que nos dará Google. Para conseguirlas pinchamos justo debajo del recuadro de las claves donde pone Google Developers Console y llegaremos a una pantalla como la que vemos en la Fig.2.

Mapa de google para WordPress
Fig2

   Entramos en Habilitar y administrar APIS y nos pide que creemos un proyecto, le ponemos el nombre que queramos, aceptamos las condiciones y continuamos. Entraremos en una pantalla como la que vemos en la Fig3.

Widget Google MAps
Fig 3

  Por esta pantalla tenemos que pasar dos veces, una por key. Clicamos en Google Static Maps API y en el panel lateral derecho nos vamos a Credenciales>Crear credenciales>Claves de Navegador. Dejamos el nombre que aparece por defecto y le damos a crear. Nos aparecerá una pantalla con una clave, la apuntamos en lugar seguro. Ahora es el momento de volver hacia atras y repetir la operación para Google Maps Embed API.

   Con las dos claves a buen recaudo volvemos al editor de WordPress y a la zona de ajustes de nuestro Widget de mapas de Google. Metemos las dos Keys, primero una, aceptamos, despues la otra y ¡¡¡Voila!!! ¡¡¡por fin podemos usarlo!!!!!

   Si al final has optado por la versión Pro aprovecha que estas aquí y vete a la pestaña de licencia e introduce  la clave que te ha mandado Google en el correo de confirmación de la compra.

     Configuración del Widgets

    A partir de aquí todo es mucho más sencillo. Tenemos dos posibilidades, usarlo en una zona de widgets de nuetra plantilla de wordpress o ponerlo en cualquier página o entrada.

   Si optáis por la última opción, el plugin genera automáticamente una zona de edición. Como podéis ver (Fig.4), ésta es una zona inactiva en la que simplemente colocaremos el widget de Google Maps para configurarlo y copiar el shortcode. Lo que hagamos aquí no se ve en ninguna zona de nuestra web a no ser que peguemos el código.

Fig5

   Si por el contrario optáis por usarlo como widget solo tendréis que arrastrarlo a la zona  donde creáis oportuno ya sea en una barra lateral, en la cabecera o en el pie de página… Ahora vamos a ver las diferentes opciones de configuración que tenemos.

   Una vez desplegada la zona de edición del Mapa de Google vemos cuatro pestañas. La cuarta es simplemente la información de la licencia y la tercera, como he explicado antes, genera un código para poder llevar el mapa a una página individual u otra zona de texto compatible. La configuración de las primeras dos pestañas es muy intuitiva, aún así vamos a ver las principales características que podemos modificar.

Pestaña de miniatura (Thumbnail map)
  • Sin títuloTamaño del mapa: el tamaño que tendrá la miniatura una vez insertada en la web.
  • Tipo de Mapa: podemos elegir entre Carretera, Satélite, Terreno o Híbrido.
  • Color Scheme: colores que tendrá el mapa en la web.
  • Nivel de enfoque: éste es el Zoom de la miniatura.
  • Pin Type: Es el marcador. Podemos elegir el predefinido por Google o una imagen personalizada.
  • Color del marcador: si finalmente optamos por el típico pin de Google aquí elegiremos su color.
  • Tamaño del marcador: Tamaño del Pin
  • Pin Label: Letra con la que queremos definir nuestro marcador.
  • Vinculo A: Esta opción vamos a verla con un poco más de detenimiento. El mapa de Google puede ser interactivo, ésto es, aunque es una imagen fija si clicamos en ella  puede actuar de varias maneras.
  1. Mapa interactivo en una ligthbox: abre un mapa más grade como si fuera un pop-up, es la opción por defecto. El mapa es interactivo.
  2. Remplaza la miniatura por un mapa interactivo: no nos movemos de la página donde estamos pero la miniatura que era fija se convierte en un Google Map interactivo por el que nos podemos mover, hacer zoom, etc…
  3. Mapa interactivo en una nueva ventana: se abre una nueva ventana con el mapa a pantalla completa.
  4. Custom URL o Custom URL en una nueva ventana: podemos enlazar el mapa con cualquier URL y podemos elegir si abriendo una nueva pestaña o no. Se recomienda que siempre sea en una nueva pestaña para que la persona en cuestión no salga de tu página.
  5. Desactivar vínculo:  al pinchar en el mapa no pasa nada.
  • Formato de la imagen: La calidad con la que queramos que se vea.
  • Leguage del Mapa: El lenguaje en el que queremos que estén todas las indicaciones del Mapa de Google.

 

Mapa interactivo (Interactive Map)

Fig.7

  • Lightbox size: el tamaño al que queremos que aparezca el lightbox. Podemos hacerlo manualmente o elegir la opción de pantalla completa.
  • Map Mode: aquí tenemos varias opciones.
  1. Place: el mismo lugar que aparece en la miniatura.
  2. Start Adress: podemos poner una dirección de comienzo y aparecerá la ruta hasta la dirección definida e la miniatura.
  3. Search: nos da la posibilidad de definir una búsqueda y aparecerán todas las opciones coincidentes cercanos a la dirección de la miniatura (Ej. Farmacias).
  4. View: el mapa sin sin ninguna marca ni pin.
  5. Street View: visión a pie de calle.
  • Tipo de Mapa: en este caso solo podemos elegir entre carretera o satélite.
  • Nivel de enfoque: el zoom que queremos dar al mapa.
  • Ligthbox skin: gama de colores para el ligthbox.
  • Lightbox Features: aquí podemos elegir la manera de cerrar el ligthbox, con la tecla Ecs,  clicando en cualquier sitio o a través de un botón de cerrar.
  • Map languaje: el idioma del mapa de Google.

 

   Y con ésto terminamos la instalación y configuración de este plugin. Espero que os haya sido de utilidad. Es muy sencillo, barato y le puede dar un toque muy profesional a cualquier tipo de web. Para cualquier problema no dudéis en poneros en contacto conmigo.

   Un saludo y gracias por leerme ¡¡¡Nos vemos por ahí!!!

 

 

Anuncios

6 Comentarios Agrega el tuyo

  1. Hola Viktor. Muy completo y bien explicado paso a paso. Con este post ya tenemos super fácil poner un mapa en WordPress. Genial 👍

    Me gusta

    1. Victor Sierra Martin dice:

      Muchas gracias David!!! Viniendo de ti me sube mucho más la moral. Un saludo!

      Me gusta

  2. Muy interesante y muy completa la información, muchas gracias.

    Me gusta

    1. Victor Sierra Martin dice:

      Gracias a ti por el comentario. Un saludo.

      Me gusta

  3. Carmelo Sierra Barajas dice:

    Estas hecho un hacha, campeón, buen trabajo.

    Me gusta

    1. Victor Sierra Martin dice:

      Muchisimas gracias!!!!!

      Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s