Componente Mapa
Sumá mapas interactivos a tu sitio, con tu estilo.
Mostrar dónde estás es una de las cosas más útiles que puede tener un sitio. Con el nuevo elemento Mapa sumás un mapa interactivo de Google Maps en cualquier página, con tus marcadores, el zoom que quieras y hasta un estilo que combine con tu diseño.
Agregá el mapa y marcá tu dirección
- En Elementos → Interactivo, arrastrá Mapa a la página.
- En la pestaña Propiedades, junto a Marcadores, tocá +.
- Escribí un Nombre y una Descripción: es lo que van a ver tus visitantes al tocar el marcador.
- Tocá Seleccionar en el mapa, buscá la dirección y presioná Enter. Si hace falta, arrastrá el marcador al lugar exacto.
- Tocá Usar ubicación. Listo: el marcador ya está en tu mapa.
Podés sumar todos los marcadores que necesites, por ejemplo uno por cada sucursal. Si hay más de uno, el mapa se ajusta solo para mostrarlos a todos.
Ajustalo a tu diseño
- Zoom: acercá o alejá con + y –, o dejalo en Auto para que se ajuste a los marcadores.
- Tipo de vista: Mapa, Satélite, Híbrido o Relieve.
- Mostrar controles de zoom: activalo o desactivalo según lo que prefieras para tus visitantes.
- Estilo personalizado: con Agregar estilo pegás un estilo de Snazzy Maps (el "JavaScript Style Array") para que los colores del mapa combinen con tu marca.
- Y como cualquier elemento, en Estilos definís su ancho, su Proporción y cómo se ve en cada dispositivo.
Antes de empezar: tu clave de Google Maps
Para mostrar mapas, Google pide una clave (API Key) asociada a tu cuenta. Se crea una sola vez y te lleva unos minutos. Así se hace, paso a paso.
1. Creá un proyecto en Google Cloud
Entrá a console.cloud.google.com con tu cuenta de Google, abrí el selector de proyectos y elegí Proyecto nuevo. Ponele un nombre que reconozcas (por ejemplo, "Mapas de mi sitio") y tocá Crear.
2. Habilitá las APIs de Maps
En APIs y servicios → Biblioteca, buscá y habilitá estas dos APIs:
- Maps JavaScript API: muestra el mapa en el editor y en tu sitio.
- Geocoding API: permite buscar direcciones al ubicar los marcadores.
3. Verificá tu cuenta
La primera vez, Google te pide verificar la cuenta con un teléfono y una tarjeta. No te cobra nada por verificarla: Google Maps incluye miles de visitas gratis por mes, más que suficiente para la mayoría de los sitios. Revisá los precios y límites actuales en la página de Google Maps Platform.
4. Protegé tu clave
Al terminar, Google crea la clave y te propone protegerla. Hacelo: la clave queda visible en el código de tu sitio, y sin restricciones cualquiera podría usarla a tu cargo. En APIs y servicios → Credenciales, abrí la clave y configurá dos cosas:
Restricciones de API: elegí solo Geocoding API y Maps JavaScript API.
Restricciones de aplicaciones → Sitios web: agregá *.gridweb.app/* (para que el mapa se vea en el editor de Grid) y el dominio de tu sitio, por ejemplo tudominio.com/*. Si todavía no conectaste un dominio, agregá la dirección gridweb.site de tu sitio. Tocá Guardar: los cambios pueden tardar unos minutos en aplicarse.
5. Pegala en Grid
Copiá la clave desde Credenciales (Mostrar clave). En el panel de tu proyecto, andá a Configuración → Integraciones → Google Maps, pegala en API Key y tocá Guardar. A partir de ahí, todos los mapas de tu sitio funcionan con esa clave.
¿Ves un error en el mapa? Revisá que las dos APIs estén habilitadas y que el dominio de tu sitio esté en la lista de sitios web de la clave. Después de cambiar una restricción, esperá unos minutos y recargá.
Todo lo que necesitás para crear cualquier página
Mapas, formularios, galerías, animaciones y mucho más para diseñar páginas únicas, sin escribir una sola línea de código.
¿Qué hay de nuevo en Grid?
Estamos constantemente trabajando en mejoras y nuevas herramientas.
