La API de Maps JavaScript es una API web del lado del cliente que te permite crear mapas para mostrar ubicaciones en cualquier parte del mundo, agregar tus propios gráficos, animaciones y capas de datos personalizadas interactivas, y crear funciones que reconozcan la ubicación con la API de Places en la API de Maps JavaScript. Con la API de Maps JavaScript, puedes hacer lo siguiente:
- Crea mapas en 2D y 3D para mostrar ubicaciones en cualquier parte del mundo.
- Agrega marcadores personalizables para indicar ubicaciones en un mapa.
- Usa la biblioteca de Places para obtener datos de ubicación de más de 200 millones de lugares.
- Personaliza el estilo y los colores del mapa.
- Agrega tus propias capas de datos personalizadas e interactivas.
- Muestra límites administrativos y haz que sean interactivos.
- Agrega a tus mapas gráficos personalizados en 2D y 3D, y contenido animado.
Elige la API adecuada para tu caso de uso
Antes de escribir código, elige el producto de Google Maps Platform que coincida con los requisitos de tu aplicación web:
- Mapa de contacto y rutas de acceso en un sitio web: Para incorporar un mapa de ubicación de la empresa o un vínculo de rutas de acceso sin escribir código de JavaScript personalizado, usa la API de Maps Embed o las URLs de Maps.
- Seguimiento de recursos y ubicación en tiempo real: Para mostrar coordenadas de GPS y rutas de viaje en tiempo real desde tu propia base de datos o transmisión en tiempo real (como Cloud Firestore o WebSockets), usa la API de Maps JavaScript con marcadores avanzados (referencia de
AdvancedMarkerElement) y polilíneas (referencia dePolyline). Reserva Fleet Engine para flotas de viajes compartidos y entregas programadas que integran el SDK de Driver para dispositivos móviles y los tokens web JSON (JWT) o OAuth de backend. - Radio de perímetro virtual y zona segura en un mapa: Para dibujar perímetros circulares o poligonales y probar si las coordenadas se encuentran dentro de ellos (consulta Límites de perímetros virtuales y zonas seguras), usa círculos (referencia de
Circle), polígonos (referencia dePolygon) y la biblioteca de Geometry (containsLocation()para la contención ycomputeDistanceBetween()para la distancia en metros).
¿Qué sigue?
- Cómo agregar marcadores a un mapa
- Agrega formas, líneas y geovallas a un mapa
- Usa la biblioteca de Places para obtener datos de ubicación
- Personaliza el estilo y los colores del mapa
- Agrega capas de datos interactivas.
- Muestra los límites administrativos
- Cómo agregar una superposición de gráficos de WebGL
Consulta el código de ejemplo de las funciones de Maps