Saltar al contenido

Cómo diseñar Google Maps en WordPress

Cómo diseñar Google Maps en WordPress

Usted, o el diseñador web que contrató, ha trabajado tan duro para hacer que todo en su nuevo sitio sea perfecto. Se ha cuidado cada uno de los elementos. Familia de fuentes, tamaños de fuente, color principal, otros colores, espacios vacíos, imágenes, ilustraciones… todo luce perfecto. Pero, que hay de los mapas?

Los mapas están ahí para facilitar a los visitantes la localización de su empresa. Su parte funcional es obvia, pero ¿qué pasa con la impresión visual? Google Maps es la elección de casi todo el mundo cuando se trata de mostrar la ubicación. Y, a veces, su aspecto predeterminado se ajustará perfectamente al estilo de su sitio web. Pero en muchos casos tendrá que ajustarse un poco para mezclarse y funcionar bien con el resto del diseño.

Hay un par de formas diferentes de personalizar Google Maps en WordPress. Todos son bastante sencillos y no requieren ningún conocimiento técnico particular. Siga leyendo y descubra cuál funciona mejor para usted.

También puede consultar nuestro práctico video tutorial sobre cómo configurar mapas de Google utilizando cualquiera de los temas de Qode.

Diseñar tus mapas con un plugin

Una de las formas más sencillas de personalizar sus mapas de Google es utilizar uno de los plugins creados solo para este propósito. Nuestra elección es Snazzy Maps, un plugin ligero y simple con cientos de estilos gratuitos.

Empiece por ir a Complementos> Agregar nuevo.

Agregar nuevo plugin

El plugin que estamos buscando se llama Mapas elegantes así que escribe ese nombre en el formulario de búsqueda. Cuando lo encuentre, haga clic en el Instalar en pc y luego actívelo.

Complemento de mapas elegantes

Ahora que el plugin está instalado y activado, puede acceder a él en Apariencia> Mapas elegantes.

Configuración del plugin Snazzy Maps

Para explorar y elegir estilos para su sitio web, debe crear una cuenta de Snazzy Maps para obtener una clave API.

Cuando haya creado una cuenta con éxito, navegue a su página de perfil y en el Desarrollador haga clic en la sección Generar clave API botón para obtener el código.

Regístrese para obtener una clave API

Ahora, en la configuración de Snazzy Maps, ingrese su clave API y presione el Salvar botón.

Guardar cambios

Ahora está listo para explorar estilos y personalizar sus mapas. Vuelve al Explorar lengüeta. Allí encontrará muchos estilos de mapas. Puede utilizar los recomendados o crear sus propios estilos únicos.

Cuando encuentre un estilo de mapa que funcione perfectamente para su sitio web, haga clic en el Guardar estilo botón, para que pueda usarlo más tarde.

Encuentra un estilo de mapa

Y, para crear su propio estilo personalizado, vaya a su cuenta de Snazzy Maps y haga clic en Crea un estilo en el menú.

Crea un estilo

Ahora tendrá la oportunidad de crear su propio estilo con los colores que establezca y el tipo que elija personalizar. Cuando sienta que su estilo está listo, golpee el verde Aplicar estilo , asigne un nombre único a su estilo personalizado y guárdelo.

Aplicar estilo

Para encontrar sus estilos personalizados en el administrador de su sitio, elija Mis estilos desde el menú desplegable en los mapas elegantes Explorar lengüeta.

Mis estilos

Haga clic en Habilitar y WordPress aplicará el estilo directamente a los mapas de Google en su sitio web.

Aplicar el estilo directamente a los mapas de Google

Personalización de Google Maps en Qode Interactive Themes

Si está utilizando uno de los temas premium de WordPress de Qode Interactive que viene con un código corto prediseñado para mapas de Google, entonces la mitad de su trabajo ya está hecho por usted.

Dependiendo de su tema, el código corto vendrá con diferentes opciones de personalización. Por ejemplo, algunos temas incluyen la capacidad de agregar una superposición o cambiar los colores allí mismo en la configuración de shortcode, mientras que otros vienen con un formulario para insertar el código de Snazzy Maps.

Por ejemplo, nuestro tema de WordPress Gluck viene con un código corto de Google Maps que le permite habilitar estilos personalizados de Snazzy Maps y contiene un campo para insertar código.

Código corto de Google Maps

Para obtener este código, no es necesario instalar el plugin Snazzy Maps. Todo lo que necesita hacer es ir al sitio web de Snazzy Maps, iniciar sesión o crear una cuenta, crear su propio estilo o elegir entre los existentes y copiar su código único.

Para obtener el código, elija el Ver código sección.

Obtener el código

Su código único aparecerá a la izquierda. Copie el código completo.

Copia el código completo

Inserte su código de Mapa elegante en el campo apropiado en el código corto, y el mapa en su página se verá exactamente como lo diseñó.

Pensamientos finales

Ya sea que opte por un plugin o use un tema con un código abreviado de Google Maps incorporado para personalizar la forma en que se mostrarán los mapas en sus páginas, lo importante es: no tienes que conformarte con la vista predeterminada. Después de invertir mucho tiempo y esfuerzo en perfeccionar el diseño de su sitio web, debe asegurarse de que los mapas se ajusten perfectamente al tono general y la atmósfera. No tengas miedo de jugar con los estilos. Es divertido, fácil y definitivamente vale la pena.