Como añadir un mapa de Google en WordPress.

Transcripción del video

Bienvenido a un nuevo video de josel63.sg-host.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á.

En add poi debemos colocar la dirección que deseamos mostrar, pero también podemos seleccionar una ubicación de forma manual, por ejemplo, acerquémonos un poco más en este mapa. Muy bien, ahora supongamos que deseamos mostrar un lugar pero no conocemos su dirección, o su dirección no se encuentra registrada en google maps, entonces podemos movernos en el mapa y cuando tengamos identificado el lugar que deseamos mostrar simplemente damos clic sobre él, por ejemplo este lugar. Y al hacerlo puedes ver que en la parte de arriba nos muestra la latitud y longitud de este lugar.

De esa forma podemos especificar exactamente el lugar que deseamos centrar y mostrar en nuestro mapa de forma visual. También podemos colocar nuestra ubicación más fácilmente, únicamente debes dar clic aquí en mi ubicación, y tu navegador te preguntará si deseas compartir tu ubicación con tu sitio web y de esa forma automáticamente podrás indicar dónde te encuentras en tu negocio. Esto sería muy útil si deseas crear una lista de tus tiendas físicas por ejemplo.

Una vez tenemos listo nuestro mapa damos clic en guardar, y podremos ver ahora que nos lo muestra en una lista, aquí se mostrarán los mapas que hemos guardado anteriormente. De modo que si necesitamos mostrar nuevamente esta ubicación en el futuro no deberemos crear le mapa nuevamente. Ahora insertaremos el mapa, simplemente lo seleccionamos y damos clic en insertar en el post.

Y ahora como puedes observar tenemos este shortcut que se añadió a nuestro artículo, si lo dejamos ahí, donde lo ha colocado automáticamente, entonces el mapa se mostrará en el área superior de nuestro artículo, pero podemos simplemente copiar y pegar este código donde deseemos mostrar el mapa, por ejemplo vamos a mostrarlo después del primer párrafo. Muy bien, ahora si actualizamos nuestro artículo, y luego lo visualizaremos en nuestra área pública.

Y como puedes observar tenemos aquí nuestro nuevo mapa. Puedes crear una cantidad ilimitada de mapas dentro de WordPress con este plugin y mostrarlos en tus artículos y páginas.

Espero que este video te sea de ayuda y no olvides alojar tu sitio web con josel63.sg-host.com, el mejor lugar para tu sitio web en WordPress. Mi nombre es José Lievano y nos veremos en un próximo video.