Welcome to the js-api-samples repository, the home of Google Maps JavaScript API documentation samples.
This repository (js-api-samples) is the new home for the Maps JavaScript API samples.
We are currently migrating all samples from the old repository (js-samples). During this transition,
you may find some samples are still missing or under development.
We appreciate your patience as we complete this migration. Please check back regularly for updates.
Try the examples out at Google Maps JavaScript API documentation.
Each example is one atomic unit, for which dependencies must be individually set up.
- Copy the
.env.templatefile to.env:cp .env.template .env
- Open
.envand replace<Insert your own development API key here>with your Google Maps API key. The.envfile is already added to.gitignoreto prevent accidentally committing your key.
- Run
npm ito install dependencies. You only need to do this once, and thereafter only to update dependencies. - Navigate to the top level (
samples/).
- To build a single sample, run
npm run build --workspace=sample-name/ - To build all samples, run
npm run build-all.
Build output is copied to the main dist/ folder. Each individual sample folder
also contains a dist/ folder, but this is only used by Vite for live preview.
- Navigate to the folder for the sample you want to run (
cd samples/sample-name). - Run
npm startto start a server with that sample.
- To test, navigate to project root and run
npx playwright test. {# TODO: Expand this section. #}
This repository strictly enforces code formatting and best practices using ESLint, Prettier, and custom validation scripts.
You can automatically check and fix issues across all samples at once from the root directory:
npm run check-and-fixThis command will:
- Run
eslint --fixto catch and resolve JavaScript/TypeScript linting errors. - Run
prettier -wto format all files (HTML, CSS, TS, JS, JSON) according to the repository's styling rules. - Run
tsc --noEmitacross all samples to verify TypeScript compilation passes.
When you build an individual sample using npm run build, the build is handled by samples/build-single.sh. This script enforces several Google Maps Platform best practices before compilation, including:
- Preventing synchronous
await googlecalls in close proximity (suggestingPromise.all()instead). - Verifying that
<script>tags correctly reside inside<head>rather than<body>. - Ensuring the inline bootstrap loader uses the correct format and does not use hardcoded API keys.
- Running Prettier, ESLint, and TSC specifically for that sample to ensure it meets quality standards.
Contributions are welcome! Please see contributing for more information.
This library uses Google Maps Platform services. Use of Google Maps Platform services through this library is subject to the Google Maps Platform Terms of Service.
This library is not a Google Maps Platform Core Service. Therefore, the Google Maps Platform Terms of Service (e.g. Technical Support Services, Service Level Agreements, and Deprecation Policy) do not apply to the code in this library.
This library is offered via an open source license. It is not governed by the Google Maps Platform Support Technical Support Services Guidelines, the SLA, or the Deprecation Policy (however, any Google Maps Platform services used by the library remain subject to the Google Maps Platform Terms of Service).
This library adheres to semantic versioning to indicate when backwards-incompatible changes are introduced. Accordingly, while the library is in version 0.x, backwards-incompatible changes may be introduced at any time.
If you find a bug, or have a feature request, please file an issue on GitHub. If you would like to get answers to technical questions from other Google Maps Platform developers, ask through one of our developer community channels. If you'd like to contribute, please check the Contributing guide.
You can also discuss this library on our Discord server.