Colocar-mapa-header-elements-generatepress

Añadir un mapa en el header de GeneratePress

Normalmente necesitamos colocar un mapa en la página de contacto. Sobre todo si queremos indicar físicamente donde estamos. También es verdad que con la preconfiguración que tienes que hacer en google, con la obtención de una API, el tema se vuelve bastante farragoso. Ahora bien, cuando ya disponemos de nuestra API, colocar un mapa en la plantilla de GeneratePress es sencillísimo. En este caso te contaré cómo colocarlo en el header porque te ocupa todo el ancho de la pantalla.

Como te acabo de comentar antes que nada necesitaremos obtener una clave API de google maps, el cual nos dará el permiso de utilizar en mapa en tu web. Si buscas por internet encontrarás muchos manuales que te lo cuentan. Ya te digo, de entrada, que sigas todos los pasos pacientemente porque te puedes perder fácilmente.

Una vez tenemos nuestra API se trata de instalar un plugin de mapas. Hay muchísimos. El que yo utilizo es sencillo y permite una serie de opciones muy básicas, como cambiar el aspecto visuales del mapa y el zom. Es dice google map y la creado Ankur Kumar. Una vez ya lo tienes instalado deberás introducir la clave API en el panel de confguración y activar.

Configurar Google maps para GeneratePress

Este plugin es muy sencillo de configurar. Una vez introducido el API de google maps tendremos que indicar la dirección que queremos. Para ello podemos utilizar dos vías:

  • A través de las coordenadas exactas.
  • O a través del mapa que sale en la parte de configuración. Pulsando control y moviendo el ratón exactamente donde queremos ubicar el mapa.

Una vez situado la localización podemos hacer las siguientes acciones y / o personalización:

  • Indicar con qué idioma queremos mostrar el mapa, sobre todo por los controles. Tendremos que colocar el código de idioma.
  • Personalizar el zoom del mapa que queremos enseñar.
  • Indicar los botones que quieres que aparezcan en el mapa. El típico muñeco de StreetView, los botones de zoom …
  • También podemos personalizar como queremos que se vea el mapa: calles, satélites, híbrido … Y también con qué tipo de color.

Utilizar el shorcode del plugin para insertarlo al headers de elementos

Una vez guardamos las preferencias del plugin nos aparecerá el shorcode: [ank_google_map]. El copiamos y creamos un nuevo Elemento a GeneratePress. Elegimos la opción de Header y luego sólo tendremos que configurar correctamente nuestro header de elementos.

  • Insertamos el shorcode.
  • Container a Full Widht.
  • Inner container a Full Widt.
  • Y en la pestaña Display rules decidir a la página que queremos mostrar el mapa.

Y si no me he explicado bastante bien aquí os dejo un video tutorial donde queda bastante claro todos los pasos.

Video tutorial de cómo añadir un mapa al header de GeneratePress.

Si tienes dudas, preguntas o propuestas puedes hacerlas en el bloque de comentarios.

Y si quieres un sello para marcar ropa puedes visitar la web de patapam.es

Deja un comentario

Identifícate