diff --git a/dist/index.html b/dist/index.html index ba940676..d5f0f220 100644 --- a/dist/index.html +++ b/dist/index.html @@ -43,6 +43,7 @@

Maps JSAPI Samples

  • place-autocomplete-element
  • place-autocomplete-map
  • place-text-search
  • +
  • test-example
  • ui-kit-customization
  • ui-kit-place-details
  • ui-kit-place-details-compact
  • diff --git a/dist/samples/test-example/app/.eslintsrc.json b/dist/samples/test-example/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/test-example/app/.eslintsrc.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/ban-ts-comment": 0, + "@typescript-eslint/no-this-alias": 1, + "@typescript-eslint/no-empty-function": 1, + "@typescript-eslint/explicit-module-boundary-types": 1, + "@typescript-eslint/no-unused-vars": 1 + } +} diff --git a/dist/samples/test-example/app/README.md b/dist/samples/test-example/app/README.md new file mode 100644 index 00000000..62904810 --- /dev/null +++ b/dist/samples/test-example/app/README.md @@ -0,0 +1,33 @@ +# Google Maps JavaScript Sample + +This sample is generated from @googlemaps/js-samples located at +https://github.com/googlemaps-samples/js-api-samples. + +## Setup + +### Before starting run: + +`$npm i` + +### Run an example on a local web server + +First `cd` to the folder for the sample to run, then: + +`$npm start` + +### Build an individual example + +From `samples/`: + +`$npm run build --workspace=sample-name/` + +### Build all of the examples. + +From `samples/`: +`$npm run build-all` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). + diff --git a/dist/samples/test-example/app/index.html b/dist/samples/test-example/app/index.html new file mode 100644 index 00000000..106d4063 --- /dev/null +++ b/dist/samples/test-example/app/index.html @@ -0,0 +1,27 @@ + + + + + + Add a Map + + + + + + +

    My Google Maps Demo

    + + +
    + + + + + + \ No newline at end of file diff --git a/dist/samples/test-example/app/index.ts b/dist/samples/test-example/app/index.ts new file mode 100644 index 00000000..a6d20bcd --- /dev/null +++ b/dist/samples/test-example/app/index.ts @@ -0,0 +1,35 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_test_example] +// Initialize and add the map. +let map; +async function initMap(): Promise { + // [START maps_test_example_instantiate_map] + // The location of Uluru, Australia. + const position = {lat: -25.344, lng: 131.031}; + + // Request the needed libraries. + const {Map} = + await google.maps.importLibrary('maps') as google.maps.MapsLibrary; + const {AdvancedMarkerElement} = + await google.maps.importLibrary('marker') as google.maps.MarkerLibrary; + + // The map, centered at Uluru, Australia. + map = new Map(document.getElementById('map') as HTMLElement, { + zoom: 4, + center: position, + mapId: 'DEMO_MAP_ID', + }); + // [END maps_test_example_instantiate_map] + + // [START maps_test_example_instantiate_marker] + // The marker, positioned at Uluru. + const marker = new AdvancedMarkerElement({map, position, title: 'Uluru'}); + // [END maps_test_example_instantiate_marker] +} +initMap(); +// [END maps_test_example] diff --git a/dist/samples/test-example/app/package.json b/dist/samples/test-example/app/package.json new file mode 100644 index 00000000..b319e8c4 --- /dev/null +++ b/dist/samples/test-example/app/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/test-example", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh test-example && bash ../app.sh test-example && bash ../docs.sh test-example && npm run build:vite --workspace=. && bash ../dist.sh test-example", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/dist/samples/test-example/app/style.css b/dist/samples/test-example/app/style.css new file mode 100644 index 00000000..041ac325 --- /dev/null +++ b/dist/samples/test-example/app/style.css @@ -0,0 +1,25 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_test_example] */ + /* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ + #map { + height: 100%; + } + + /* + * Optional: Makes the sample page fill the window. + */ + html, + body { + height: 100%; + margin: 0; + padding: 0; + } + /* [END maps_test_example] */ + \ No newline at end of file diff --git a/dist/samples/test-example/app/tsconfig.json b/dist/samples/test-example/app/tsconfig.json new file mode 100644 index 00000000..09179087 --- /dev/null +++ b/dist/samples/test-example/app/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } + } \ No newline at end of file diff --git a/dist/samples/test-example/dist/assets/index-35dha72j.js b/dist/samples/test-example/dist/assets/index-35dha72j.js new file mode 100644 index 00000000..549d7c48 --- /dev/null +++ b/dist/samples/test-example/dist/assets/index-35dha72j.js @@ -0,0 +1,5 @@ +(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))s(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const n of t.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&s(n)}).observe(document,{childList:!0,subtree:!0});function i(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function s(e){if(e.ep)return;e.ep=!0;const t=i(e);fetch(e.href,t)}})();/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */let c;async function a(){const o={lat:-25.344,lng:131.031},{Map:r}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:i}=await google.maps.importLibrary("marker");c=new r(document.getElementById("map"),{zoom:4,center:o,mapId:"DEMO_MAP_ID"}),new i({map:c,position:o,title:"Uluru"})}a(); diff --git a/dist/samples/test-example/dist/assets/index-kz-ac4rW.css b/dist/samples/test-example/dist/assets/index-kz-ac4rW.css new file mode 100644 index 00000000..c4e6ccdb --- /dev/null +++ b/dist/samples/test-example/dist/assets/index-kz-ac4rW.css @@ -0,0 +1,5 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */#map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/test-example/dist/index.html b/dist/samples/test-example/dist/index.html new file mode 100644 index 00000000..60c7255a --- /dev/null +++ b/dist/samples/test-example/dist/index.html @@ -0,0 +1,27 @@ + + + + + + Add a Map + + + + + + +

    My Google Maps Demo

    + + +
    + + + + + + \ No newline at end of file diff --git a/dist/samples/test-example/docs/index.html b/dist/samples/test-example/docs/index.html new file mode 100644 index 00000000..106d4063 --- /dev/null +++ b/dist/samples/test-example/docs/index.html @@ -0,0 +1,27 @@ + + + + + + Add a Map + + + + + + +

    My Google Maps Demo

    + + +
    + + + + + + \ No newline at end of file diff --git a/dist/samples/test-example/docs/index.js b/dist/samples/test-example/docs/index.js new file mode 100644 index 00000000..2ab36cef --- /dev/null +++ b/dist/samples/test-example/docs/index.js @@ -0,0 +1,30 @@ +"use strict"; +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_test_example] +// Initialize and add the map. +let map; +async function initMap() { + // [START maps_test_example_instantiate_map] + // The location of Uluru, Australia. + const position = { lat: -25.344, lng: 131.031 }; + // Request the needed libraries. + const { Map } = await google.maps.importLibrary('maps'); + const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + // The map, centered at Uluru, Australia. + map = new Map(document.getElementById('map'), { + zoom: 4, + center: position, + mapId: 'DEMO_MAP_ID', + }); + // [END maps_test_example_instantiate_map] + // [START maps_test_example_instantiate_marker] + // The marker, positioned at Uluru. + const marker = new AdvancedMarkerElement({ map, position, title: 'Uluru' }); + // [END maps_test_example_instantiate_marker] +} +initMap(); +// [END maps_test_example] diff --git a/dist/samples/test-example/docs/index.ts b/dist/samples/test-example/docs/index.ts new file mode 100644 index 00000000..a6d20bcd --- /dev/null +++ b/dist/samples/test-example/docs/index.ts @@ -0,0 +1,35 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_test_example] +// Initialize and add the map. +let map; +async function initMap(): Promise { + // [START maps_test_example_instantiate_map] + // The location of Uluru, Australia. + const position = {lat: -25.344, lng: 131.031}; + + // Request the needed libraries. + const {Map} = + await google.maps.importLibrary('maps') as google.maps.MapsLibrary; + const {AdvancedMarkerElement} = + await google.maps.importLibrary('marker') as google.maps.MarkerLibrary; + + // The map, centered at Uluru, Australia. + map = new Map(document.getElementById('map') as HTMLElement, { + zoom: 4, + center: position, + mapId: 'DEMO_MAP_ID', + }); + // [END maps_test_example_instantiate_map] + + // [START maps_test_example_instantiate_marker] + // The marker, positioned at Uluru. + const marker = new AdvancedMarkerElement({map, position, title: 'Uluru'}); + // [END maps_test_example_instantiate_marker] +} +initMap(); +// [END maps_test_example] diff --git a/dist/samples/test-example/docs/style.css b/dist/samples/test-example/docs/style.css new file mode 100644 index 00000000..041ac325 --- /dev/null +++ b/dist/samples/test-example/docs/style.css @@ -0,0 +1,25 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_test_example] */ + /* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ + #map { + height: 100%; + } + + /* + * Optional: Makes the sample page fill the window. + */ + html, + body { + height: 100%; + margin: 0; + padding: 0; + } + /* [END maps_test_example] */ + \ No newline at end of file diff --git a/dist/samples/test-example/jsfiddle/demo.css b/dist/samples/test-example/jsfiddle/demo.css new file mode 100644 index 00000000..d8f64de3 --- /dev/null +++ b/dist/samples/test-example/jsfiddle/demo.css @@ -0,0 +1,25 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + + /* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ + #map { + height: 100%; + } + + /* + * Optional: Makes the sample page fill the window. + */ + html, + body { + height: 100%; + margin: 0; + padding: 0; + } + + \ No newline at end of file diff --git a/dist/samples/test-example/jsfiddle/demo.details b/dist/samples/test-example/jsfiddle/demo.details new file mode 100644 index 00000000..127bef19 --- /dev/null +++ b/dist/samples/test-example/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: test-example +authors: + - Geo Developer IX Documentation Team +tags: + - google maps +load_type: h +description: Sample code supporting Google Maps Platform JavaScript API documentation. diff --git a/dist/samples/test-example/jsfiddle/demo.html b/dist/samples/test-example/jsfiddle/demo.html new file mode 100644 index 00000000..f1de1d31 --- /dev/null +++ b/dist/samples/test-example/jsfiddle/demo.html @@ -0,0 +1,26 @@ + + + + + + Add a Map + + + + + + +

    My Google Maps Demo

    + + +
    + + + + + diff --git a/dist/samples/test-example/jsfiddle/demo.js b/dist/samples/test-example/jsfiddle/demo.js new file mode 100644 index 00000000..0d65a82c --- /dev/null +++ b/dist/samples/test-example/jsfiddle/demo.js @@ -0,0 +1,30 @@ +"use strict"; +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// Initialize and add the map. +let map; +async function initMap() { + + // The location of Uluru, Australia. + const position = { lat: -25.344, lng: 131.031 }; + // Request the needed libraries. + const { Map } = await google.maps.importLibrary('maps'); + const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + // The map, centered at Uluru, Australia. + map = new Map(document.getElementById('map'), { + zoom: 4, + center: position, + mapId: 'DEMO_MAP_ID', + }); + + + // The marker, positioned at Uluru. + const marker = new AdvancedMarkerElement({ map, position, title: 'Uluru' }); + +} +initMap(); + diff --git a/index.html b/index.html index ba940676..d5f0f220 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,7 @@

    Maps JSAPI Samples

  • place-autocomplete-element
  • place-autocomplete-map
  • place-text-search
  • +
  • test-example
  • ui-kit-customization
  • ui-kit-place-details
  • ui-kit-place-details-compact
  • diff --git a/package-lock.json b/package-lock.json index c8635e29..ebe14703 100644 --- a/package-lock.json +++ b/package-lock.json @@ -609,6 +609,10 @@ "resolved": "samples/place-text-search", "link": true }, + "node_modules/@js-api-samples/test-example": { + "resolved": "samples/test-example", + "link": true + }, "node_modules/@js-api-samples/ui-kit-customization": { "resolved": "samples/ui-kit-customization", "link": true @@ -2459,6 +2463,10 @@ "name": "@js-api-samples/place-text-search", "version": "1.0.0" }, + "samples/test-example": { + "name": "@js-api-samples/test-example", + "version": "1.0.0" + }, "samples/ui-kit-customization": { "name": "@js-api-samples/ui-kit-customization", "version": "1.0.0"