Cómo usar: Generador de API de Google Maps
- Define la ubicación, el zoom, el estilo del mapa y el tamaño.
- Añade marcadores: asigna a cada uno un color, una posición y el texto de su ventana de información.
- Activa la búsqueda de lugares o las reseñas de Google si las necesitas.
- Pega tu clave de API para ver la vista previa completa y luego copia el código o usa Copiar a Webflow.
Obtener una clave de API de Google Maps
- Abre la consola de Google Cloud y crea un proyecto con la facturación activada.
- Activa las APIs que esta herramienta indica para tu configuración.
- Crea una clave de API en Claves y credenciales.
- Restringe la clave a la dirección de tu sitio web y a esas APIs. Una clave en el código de una web es pública, así que las restricciones son lo que la mantiene segura.
Para usar la vista previa en directo, permite devpack.app/* como sitio web mientras pruebas, o usa una clave de prueba aparte.
Cuánto cuesta
Google cobra según el uso e incluye una cuota mensual gratuita para cada API. Las reseñas usan una solicitud Place Details de precio más alto, así que configura una alerta de presupuesto en Google Cloud. Consulta la página de precios de Google para ver las cifras actuales.
Acerca del código generado
El cuadro de búsqueda y las reseñas usan la Places API (New) actual, porque las versiones anteriores de Places no están disponibles para proyectos nuevos. Cada marcador puede ser un pin de color, un punto, un cuadrado o una estrella, o tu propia imagen desde una URL o una subida de menos de 100 KB. Los marcadores usan google.maps.Marker, así que funcionan con estilos de mapa en JSON. Google recomienda los Advanced Markers para proyectos nuevos, pero requieren un Map ID y estilos en la nube, por lo que esta herramienta no los genera. Las condiciones de Google piden mostrar las reseñas con su atribución, y el código generado la incluye.
¿Solo necesitas un mapa sencillo sin clave? Usa el Generador de embed de Google Maps. Relacionados: Selector de color, Estilos de botones CSS.
También se busca como: marcadores personalizados google maps, ejemplo google maps javascript api, mapa personalizado de google, estilos de google maps, embed reseñas de google, ejemplo google places api, google maps en webflow.
Herramientas que combinan con: Generador de API de Google Maps
- Generador de marcado Schema — Elige un tipo de esquema, rellena el formulario y copia el código JSON-LD listo para pegar.
- Generador de código embed de YouTube — Pega cualquier enlace de YouTube (un vídeo, un Short o una lista de reproducción) y obtén código embed responsive con modo de privacidad mejorada, tiempos de inicio y fin, autoplay silenciado, bucle y subtítulos, o la versión lite de «clic para cargar» que mantiene tu página rápida.
- Formateador JSON — Pega el código JSON para formatearlo, minimizarlo o validarlo.
- Analizador de cabeceras de email — Pega las cabeceras sin procesar de un email para ver todo su recorrido: cada salto entre servidores con el tiempo que tardó, los resultados de SPF, DKIM y DMARC, la IP de origen y señales de alerta como un Reply-To o un Return-Path que no coinciden.