Cómo agregar un mapa de Google receptivo en WordPress

Vayas donde vayas, Google Maps te mostrará el camino. Ser capaz de obtener indicaciones al instante se ha vuelto esencial al navegar por las ciudades. Y como la solución de mapas más popular, agregar Google Maps a su sitio de WordPress no podría ser más fácil. Esta tecnología de mapeo fácil de usar proporcionará información comercial, información de contacto e indicaciones para llegar a la ubicación de su elección, lo que hace que la navegación sea muy conveniente para sus usuarios.

¿Listo para agregar un mapa a su sitio de WordPress? Hay un par de formas diferentes de agregar uno, manualmente y con un complemento. Comencemos con el método de bricolaje.

Adición manual de Google Maps

Incrustando el mapa

Agregar e incrustar un mapa es la forma en que obtendrá el mapa real para que se muestre en una página, y solo toma un par de pasos simples. Agregar manualmente el mapa es el camino a seguir si solo tiene uno (o solo algunos) para agregar a su sitio.

1. Vaya a Google Maps e ingrese la ubicación.

2. Haga clic en el botón de búsqueda.

3. Elige “Compartir” (será la opción de la derecha).

4. Copie el código de inserción, asegurándose de que esté todo seleccionado antes de copiar.

Agregar el mapa en WordPress

Para agregar el mapa, deberá editar una publicación o una página. Un excelente lugar para agregar su mapa es la página de contacto o cualquier publicación que hable sobre una ubicación específica que sus usuarios podrían necesitar encontrar.

5. Vaya a Publicaciones > Agregar o Páginas > Agregar.

6. Abra el editor HTML (en modo Texto) y pegue el código de inserción donde desee que aparezca el mapa.

7. Elija Guardar borrador, Actualizar o Publicar según sus preferencias.

Si ve la página, debería ver su mapa. Si el mapa no aparece, asegúrese de verificar que todo el código de inserción se haya copiado y pegado en el editor.

Hacer que el mapa responda

Esto es opcional cuando se trabaja con su mapa, pero es una gran idea para brindar la mejor experiencia de usuario a sus espectadores. Los usuarios suelen estar en movimiento cuando buscan direcciones, por lo que este mapa receptivo será útil cuando utilicen su dispositivo móvil.

Es posible que haya notado que había una medida de ancho y alto en el iframe que pegó en el editor; deberá realizar algunos ajustes para que el mapa responda. Un poco de CSS simple hará el truco; todo lo que se necesita es una etiqueta div adicional alrededor del código de inserción. Use el responsive-map clase para que su código ahora se vea así:

<div class="responsive-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3510.126963167523!2d-81.5660680494897!3d28.385232982430246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1463933469006" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Agrega el CSS

Agregar estas propiedades CSS a su hoja de estilo es lo último que debe hacer. Por supuesto, es posible que desee ajustar ligeramente las cosas según el diseño de su página.

.responsive-map{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.responsive-map iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

¡Y eso es! Con esas simples adiciones de código, tendrá un mapa receptivo en su sitio. ¿No estás seguro si quieres ir por la ruta del bricolaje? Ahora repasemos una solución de complemento simple.

¡Mira todo el código con este CodePen!

Agregar mapas con MapPress Easy Google Plugin

Incrustar manualmente el mapa es un buen enfoque cuando solo hay unos pocos mapas, pero ¿qué sucede si tiene que agregar muchos? Por ejemplo, un sitio comercial puede tener varias ubicaciones que deben mostrarse. Agregar cada mapa individualmente puede ser un poco tedioso. Aquí es donde un complemento es útil. Hay muchas opciones excelentes para elegir, pero MapPress Easy Google Maps es una opción que vale la pena revisar (y que usaré en este tutorial).

Para comenzar, deberá instalar y activar MapPress Easy Google Maps en su sitio de WordPress.

Configuración del complemento

Notará el menú de configuración del complemento en la barra lateral de administración, y también notará que hay muchas opciones que vienen con MapPress, lo que lo convierte en una solución flexible para cualquier sitio. Cosas como el tipo de mapa, el zoom, el borde, la alineación, los controles, etc. se pueden ajustar fácilmente aquí.

Agregando el mapa

Nuevamente, para agregar el mapa, deberá editar una publicación o página.

1. Vaya a Publicaciones > Agregar o Páginas > Agregar.

2. Desplácese hacia abajo hasta la sección MapPress en la pantalla de edición y seleccione "Nuevo mapa".

3. Verá el editor de MapPress donde puede ingresar una dirección para su mapa. Incluso si no tiene la dirección exacta, intente ingresar el nombre de la ubicación y debería encontrarla por usted. Si desea compartir su ubicación, el enlace "Mi ubicación" permitirá que el complemento detecte automáticamente su ubicación.

4. Agregue un título a su mapa y elija el tamaño del mapa.

Nota: El ancho del mapa se puede especificar como un porcentaje en el editor de mapas o en el código abreviado, lo que lo hace compatible con dispositivos móviles. La altura normalmente permanece fija. Si prefiere agregar la altura y el ancho al código abreviado, se vería así: [mappress map width="100%" height="400"]

5. Haga clic en "Guardar" y luego en "Insertar en la publicación". El mapa ahora estará en tu publicación.

6. Actualice o publique su publicación para ver el mapa.

Estos consejos y trucos deberían brindarle orientación e información sobre la integración de Google Maps para su sitio web. Ya sea que los mapas se agreguen manualmente o con un complemento, tener un mapa disponible para sus usuarios los ayudará a llegar al lugar correcto.

¡Pruébalo en Local!

Recuerde: nunca debe realizar cambios en un sitio activo. Nuestra aplicación gratuita de desarrollo local lo ayudará a simplificar su flujo de trabajo y experimentar de manera segura con su sitio. ¡Pruébalo hoy!

Este artículo se publicó originalmente el 2 de febrero de 2016. Se actualizó por última vez el 14 de febrero de 2018.