js-samples
Description
Samples for the Google Maps JavaScript API.
The samples can be demoed on the GitHub demo page or at the official documentation site.
Initialize an app from a sample
# 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.
Development
Build
- Use Bazel to build
bazel build ...orbazel build //samples/add-map/... - Update dist
bazel build public.tarandtar xf bazel-bin/public.tar -C dist
Test
- Use Bazel to run tests with
bazel test ... - Run the dist diff tests
bazel test dist:diff - Run e2e tests
npx selenium-standalone install && npx selenium-standalone startand then runbazel test e2e:e2e
Run
- Set the environment variable
export GOOGLE_MAPS_JS_SAMPLES_KEY=YOUR_KEY. - Start a server with all samples using
bazel run serve.
Inputs and outputs
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/*/app.js | N | Y | Transpiled JS for >3% |
| 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 |
Other Resources
- Google Maps Documentation
- Google Maps Reference Documenations
- Google Maps Typings - Community supported
npm i -D @types/googlemaps - Google Maps Utilitiies
Support
These 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][issues]. If you'd like to contribute, please read [How to Contribute][contrib].
