Tutorial WordPress: Como añadir un mapa de Google.

Wordpress By Builder

Descubre como crear tu web rápido y fácil https://lievanosan.com/web-wordpress-facil/

Bienvenido a un nuevo video de lievanosan.com, mi nombre es José Lievano y en este video aprenderemos como añadir un mapa de google dentro de nuestros artículos en WordPress.
Aprenderemos dos formas de añadir un mapa, de forma manual y usando un plugin instalado en WordPress. Iniciaremos con la forma manual, así que lo primero que debes hacer es entrar en Google Maps, simplemente coloca en tu navegador google.com/maps y podrás ver esta pantalla
Desde aquí vamos a buscar una dirección, que es la que deseamos compartir y mostrar a nuestros visitantes. Añade la dirección en el área de búsqueda y luego presiona enter o selecciona un resultado de búsqueda. Como puedes observar nos encontramos en la dirección que deseamos mostrar, ahora en la parte de abajo al lado derecho podrás ver este ícono de un engranaje, demos clic en el este icono.
Ahora demos clic en la opción “Compartir o incorporar mapa” y se nos abre esta ventana emergente, desde aquí seleccionamos incorporar mapa y cómo puedes observar nos muestra el código que debemos copiar y pegar para mostrar nuestro mapa. Puedes modificar el tamaño del mapa, tenemos estos tamaños predefinidos, pero también podrías usar un tamaño personalizado desde esta opción.
En nuestro caso usaremos un tamaño predefinido, usaremos el tamaño pequeño. Ahora vamos a regresar a nuestra área de administración en WordPress. Cómo pudiste observar tenemos el área de edición de un artículo previamente abierta, recuerda que para crear un nuevo artículo solo debes ir hacia entradas y luego en añadir nueva. Ahora lo que debemos hacer una vez tenemos nuestro artículo abierto, es ir hacia google maps, y vamos a copiar este código. Ahora regresamos a nuestro artículo y vamos a pegar el código, pero debemos cambiar el editor hacia la opción texto para poder pegar el texto desde la vista de código, de esa forma el código HTML será tratado como código HTML y no como texto que es parte de un párrafo o un texto normal.
Simplemente pegamos el código en esta área, muy bien; si ahora cambiamos el editor hacia visual, podrás visualizar este cuadrado gris. Este cuadrado representa el lugar y tamaño que tendrá nuestro mapa, ahora vamos a guardar los cambios y visualizaremos el mapa dentro de nuestra web. Y como puedes observar tenemos ahora aquí nuestro nuevo mapa de Google.
Ahora veremos cómo añadir el mapa pero usando un plugin que nos haga el proceso más fácil. Regresemos a nuestra área de administración. Desde aquí entraremos en plugins y luego en añadir nuevo, vamos a buscar el plugin llamado MapPress Easy Google Maps. Ahora lo vamos a instalar, recuerda, dando clic en instalar ahora y luego en aceptar y no te olvides de activar el plugin.
Después de su instalación tendremos en esta área el ícono del plugin, vamos a entrar en el para configurarlo. Desde aquí podemos configurar las opciones del mapa por defecto, podemos definir en que tipo de contenido se mostrará, si en los post que son los artículos de nuestro blog, en las páginas estáticas o en las sugerencias o en los tres, en nuestro caso vamos a dejarlo en los post y en las páginas.
Podemos definir un área de visualización automática, podemos definir como llegara en nuestro mapa, que la mejor opción es dejarlo en línea con tu blog, de esa forma los visitantes se quedarán en nuestro sitio web. Luego tenemos varias otras opciones que puedes explorar, las cuales definen los controles y apariencia del mapa. En la parte superior también tendremos una demostración de cómo se vería nuestro mapa. Ahora vamos a añadir un nuevo mapa usando este plugin en un artículo.
Vamos a ir hacia todas las entradas, y seleccionaremos otro artículo. Una vez te encuentres dentro del área de edición, podrás ver en la parte inferior el nuevo conjunto de opciones de nuestro plugin. Para añadir un nuevo mapa, simplemente das clic en este botón. Primero le colocamos un título. Luego podemos seleccionar el tamaño que tendrá nuestro mapa, y puedes ver que el mapa nos muestra en tiempo real una demostración de cómo se verá.

source