Tener una buena comunicación con nuestros clientes es un echo que está demostrado. Hoy en día existen muchas herramientas para llevar a cabo esta labor: e-mail, teléfono, redes sociales, etc etc.
Una de las más extendidas es mostrar la localización de nuestro negocio a través de Google maps. Implementar la localizacíon de nuestro negocio en nuestra pagina web es relativamente facíl, desde Google maps nos ofrecen un código que insertamos en un modulo Html y lo tenemos solucionado, pero ¿y si nuestro modelo de negocio se basa en partners o en una franquicia?
¿Como podemos hacer para mostrar en un único mapa todas las localizaciones de todas nuestras sucursales?
Para ese fin esta creado el plugin Store locator plus.
Índice de contenidos
Instalación
Para instalarlo nos iremos al repositorio de plugins de WordPress. Nos vamos a plugins/añadir nuevo y en la barra de buscar escribimos Store locator plus. Una vez aparezcan los resultados de la busqueda instalamos y ejecutamos (recuadro rojo de la imagen).
Al actualizarse la pagina veremos como a la columna de opciones de la izquierda se nos a añadido una pestaña nueva (recuadro azul de la imagen). En esta pestaña configuraremos las opciones que necesitamos para llevar a cabo nuestro mapa multilocalizaciones.
Creamos la API key para Google Maps
Para el correcto funcionamiento de google maps en nuestra pagina web, lo primero que debemos realizar es una API key. Podemos conseguir nuestra API key de forma gratuita en la consola de desarrolladores de Google. Creamos un nuevo proyecto (recuadro verde imagen) con el titulo que nos interese y una vez nos aparezca la biblioteca de API seleccionamos MAPS JAVASCRIPT API y la habilitamos.
Acto seguido clicamos sobre credenciales (recuadro naranja imagen) y creamos una credenciales clave de API (recuadro rosa imagen) y nos creara una clave que deberemos pegar en los ajustes de Store Locator Plus.
Volvemos al administrador de WordPress y vamos a los ajustes de Store Locator Plus, seguimos la ruta General/server y pegamos la API key en Google Browser Key (recuadro lila de la imagen) y guardamos los cambios.
Configuramos el aspecto visual de Store Locator Plus
- Distance unit: Definir la unidad con la que se van a medir las distancias.
- Radio Options: En este punto defininémos los diferentes radios de búsqueda en relación a la ciudad o el código postal que se introduzca en el buscador.
- Search form style: El estilo del formulario de búsqueda. En la versión premium ofrecen más opciones de personalización.
- Radius y address: Añadiremos las traducciones que acompañan a los campos de búsqueda
Pasamos a la personalización del mapa. Sin movernos de esta página hacemos click en Map. De arriba a abajo estos son los campos que debemos definir:
- Center Map At: Definiremos en centro del mapa en un pais, región o localidad.
- Center Latitude Fallback y Center Longitude Fallback: Si la geocodificación del Google esta desactivada definiremos el centro del mapa a través de la longitud y la latitud. Para averiguar esos parametros de una dirección podéis realizarlo clicando aquí.
- Zoom Level: Definiremos el nivel de zoom inicial del mapa.
- Zoom Adjustment: Cambia la medida en que el zoom automático limita las ubicaciones mostradas.
- Map Domain: Seleccione la URL de la API de Google maps que se utilizará de forma predeterminada para las consultas de ubicación. En nuestro caso seleccionaremos España.
- Map Language: Idioma del mapa.
- Map Height y Height Units: Definimos el alto del mapa y la unidad de medida con la que definimos la altura. En pixeles, porcentaje, etc etc
- Map Width y Width Units: Definiremos el ancho del mapa del mismo modo que el punto anterior.
- Map Type: Tipo de mapa. De carreteras, satelite, hibrido, etc.
- Remove Credits: Selecionando esta opción deshabilitamos los creditos del plugin.
- Home Marker: Personalizamos con un icono la leyenda que marca la central de nuestro negocio. El plugin ofrece un abanico de posibilidades para la personalización o bien podemos subir un icono a la biblioteca de medios.
- Location Marker: Personalizamos con un icono la leyenda que marca las sucursales de nuestro negocio.
Personalizamos los resultados de busqueda de Store Locator Plus
Clicamos sobre la pestaña results y personalizamos los campos a nuestro criterio.
- Show Locations: Si activamos esta opción nos apareceran todos los posibles resultados sin realizar ninguna busqueda.
- Initial Search Radius: Definimos el radio inicial de busqueda.
- Number To Show Initially: Numero inicial de resultados antes de la busqueda.
- Number To Show: Numero inicial de resultados después de la busqueda.
Los campos que aparecen en appearance y labels son para definir las traducciones tanto de los resultados de busqueda como de los textos que aparecen al clicar en las leyendas del mapa.
Añadimos nuestra primera dirección en Store Locator Plus
Clicamos sobre la pestaña locations.
Una vez nos cargue la pagina correspondiente nos apareceran 4 subpestanas:
- List: Lista de todas las direcciones que tenemos añadidas al plugin.
- Add: Añadir nueva dirección.
- Load: Cargar una lista de direcciones que utilicen La aplicación de Store Locator Plus mediante una URl.
- Import: Importar una lista de direccines mediante un archivo CSV.
Para añadir una nueva dirección clicamos sobre la pestaña add y simplemente es rellenar todos los campos referentes a la sucursal que vayamos a insertar en el mapa. Recordad que para la localización de coordenadas podemos utilizar la herramienta que hemos mencionado en el punto que hacia referencia a la personalización del mapa.
Podéis reeditar o borrar direcciones con los iconos que aparecen al inicio de cada uno de los elementos de la lista (recuadro rojo imagen).
Hola, ¿como lo hago para poner el mapa en una página con elementor?, no se sale el widget
Hola Francisco, puedes insertarlo con shortcodes. Te dejo este enlace en el que encontrarás el shortcodes con sus atributos: https://docs.storelocatorplus.com/slplus-shortcode-options/