@googlemaps/js-samples
Advanced tools
Samples for the Google Maps JavaScript API.
The samples can be demoed on the GitHub demo page or at the official documentation site.
# install the package
npm i -g @googlemaps/js-samples
# extract a sample to a destination folder
googlemaps-js-samples init map-simple destFolder
# run the sample
cd destFolder
npm i
npm run dev
Replace map-simple with the path to another sample in this repository.
npm i Install dependencies.npm run build Build all targets and update dist/ folder.npm run lint Optionaly fix lint issues with npm run formatnpm test Test outputs.npm start or bazel run serve (or ibazel for faster live reload)bazel run samples/map-simple:devserver (or ibazel for faster live reload)It may be possible to enable remote caching with Bazel to speed builds. This will require running gcloud auth application-default login. This requires access to a specific GCS bucket that most developers do not have.
The following table identifies the inputs and outputs.
| File | Edit | jsFiddle | Description |
|---|---|---|---|
| samples/*/src/index.js | Y | N | JavaScript for sample for JS tab |
| samples/*/src/index.njk | Y | N | HTML template for sample |
| samples/*/src/style.scss | Y | N | SCSS style for sample |
| shared/layout.njk | Y | N | Shared HTML template to extend |
| shared/scss/* | Y | N | Shared SCSS styles |
| dist/samples/*/index.html | N | N | Inline HTML, CSS, JS with development key and transpiled for >1%, ie11 |
| dist/samples/*/iframe.html | N | N | Inline HTML, CSS, JS for iframe without html, head, body tags transpiled for ie11 and >1%, ie11 |
| dist/samples/*/inline.html | N | N | Inline HTML, CSS, JS for All tab transpiled for >3% |
| dist/samples/*/jsfiddle.html | N | Y | HTML without CSS or JS for in jsFiddle |
| dist/samples/*/sample.html | N | N | HTML without CSS or JS for HTML tab |
| dist/samples/*/style.css | N | Y | CSS output from SCSS for CSS tab |
npm i -D @types/google.mapsThese libraries are community supported. We're comfortable enough with the stability and features of the libraries that we want you to build real production applications on it.
If you find a bug, or have a feature suggestion, please log an issue. If you'd like to contribute, please read How to Contribute.
FAQs
Samples for Google Maps JavaScript
The npm package @googlemaps/js-samples receives a total of 59 weekly downloads. As such, @googlemaps/js-samples popularity was classified as not popular.
We found that @googlemaps/js-samples demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.