Bibliotecas de código abierto

Hay muchas bibliotecas de código abierto disponibles que brindan funcionalidades adicionales para la API de Maps JavaScript. Estas bibliotecas tienen control de versiones en GitHub y se publican en NPM.

Cómo cargar la API

Las aplicaciones web modernas pueden aprovechar las siguientes bibliotecas para cargar la API de Maps JavaScript.

Carga la API de Maps JavaScript de forma dinámica con Promesas.

npm i @googlemaps/js-api-loader
Versión de NPM para @googlemaps/js-api-loader Descargas de NPM para @googlemaps/js-api-loader Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Componente wrapper que permite cargar de forma declarativa la API de Maps JavaScript.

npm i @googlemaps/react-wrapper
Versión de NPM para @googlemaps/react-wrapper Descargas de NPM para @googlemaps/react-wrapper Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Cómo utilizar TypeScript

Los usuarios de TypeScript pueden comenzar a utilizar los siguientes paquetes. Para obtener más información, consulta la guía de uso de TypeScript.

Tipos de TypeScript para la API de Maps JavaScript.

npm i -D @types/google.maps
Versión de NPM para @types/google.maps Descargas de NPM para @types/google.maps Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Protectores de TypeScript para los tipos de unión estrecha.

npm i -D @googlemaps/typescript-guards
Versión de NPM para @googlemaps/typescript-guards Descargas de NPM para @googlemaps/typescript-guards Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Cómo extender marcadores y superposiciones

Las siguientes bibliotecas extienden clases como Marker y OverlayView.

Crea y administra clústeres a nivel de zoom para grandes cantidades de marcadores.

npm i @googlemaps/markerclusterer
Versión de NPM para @googlemaps/markerclusterer Descargas de NPM para @googlemaps/markerclusterer Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Agrega y quita marcadores según los cambios en el viewport del mapa.

npm i @googlemaps/markermanager
Versión de NPM para @googlemaps/markermanager Descargas de NPM para @googlemaps/markermanager Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Agrega capas de Open Geospatial Consortium (OGC), como el servicio de mapas web (WMS) a un mapa.

npm i @googlemaps/ogc
Versión de NPM para @googlemaps/ogc Descargas de NPM para @googlemaps/ogc Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Agrega etiquetas HTML personalizadas a los marcadores.

npm i @googlemaps/markerwithlabel
Versión de NPM para @googlemaps/markerwithlabel Descargas de NPM para @googlemaps/markerwithlabel Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Usa WebGL y ThreeJS para realizar visualizaciones de alto rendimiento.

npm i @googlemaps/three
Versión de NPM para @googlemaps/three Descargas de NPM para @googlemaps/three Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Utiliza Deck.gl como una superposición de Google Maps personalizada.

npm i @deck.gl/google-maps
Versión de NPM para @deck.gl/google-maps Descargas de NPM para @deck.gl/google-maps Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Pruebas y análisis con lint

Usa estas bibliotecas a fin de garantizar que se sigan las prácticas recomendadas y facilitar las pruebas para la API de Maps JavaScript.

Usa reglas de ESLint personalizadas para analizar tu código con lint.

npm i -D eslint-plugin-googlemaps
Versión de NPM para eslint-plugin-googlemaps Descargas de NPM para eslint-plugin-googlemaps Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Crea simulaciones que usar con la biblioteca de pruebas Jest.

npm i -D @googlemaps/jest-mocks
Versión de NPM para @googlemaps/jest-mocks Descargas de NPM para @googlemaps/jest-mocks Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Bibliotecas de Node.js

Permite realizar llamadas desde Cloud Functions o el código del servidor.

npm i @googlemaps/google-maps-services-js
Versión de NPM para @googlemaps/google-maps-services-js Descargas de NPM para @googlemaps/google-maps-services-js Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Codifica y decodifica polilíneas en Node.js.

npm i @googlemaps/polyline-codec
Versión de NPM para @googlemaps/polyline-codec Descargas de NPM para @googlemaps/polyline-codec Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord

Firma las URLs en Node.js para brindar mayor seguridad.

npm i @googlemaps/url-signature
Versión de NPM para @googlemaps/url-signature Descargas de NPM para @googlemaps/url-signature Estrellas del repositorio de GitHub Actividad de confirmación de GitHub (rama) Bifurcaciones de GitHub Insignia de servidor de Discord