diff --git a/dist/index.html b/dist/index.html index f5ba1e02..02b817c0 100644 --- a/dist/index.html +++ b/dist/index.html @@ -16,6 +16,7 @@

Maps JSAPI Samples

  • 3d-label-toggle
  • 3d-localization
  • 3d-map-45-degree
    • +
  • 3d-map-events
  • 3d-map-roadmap
  • 3d-map-styling
  • 3d-marker-click-event
    • diff --git a/dist/samples/3d-map-events/app/.eslintsrc.json b/dist/samples/3d-map-events/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/3d-map-events/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/3d-map-events/app/README.md b/dist/samples/3d-map-events/app/README.md new file mode 100644 index 00000000..450037d9 --- /dev/null +++ b/dist/samples/3d-map-events/app/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## 3d-map-events + +Sample generated from 3d-map-events + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/3d-map-events` +`npm start` + +### Build an individual example + +`cd samples/3d-map-events` +`npm run build` + +From 'samples': + +`npm run build --workspace=3d-map-events/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/3d-map-events` +`npx eslint index.ts` + +## 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/3d-map-events/app/index.html b/dist/samples/3d-map-events/app/index.html new file mode 100644 index 00000000..ebad594d --- /dev/null +++ b/dist/samples/3d-map-events/app/index.html @@ -0,0 +1,35 @@ + + + + + + 3d-map-events + + + + + + + + +
    +

    gmp-centerchange

    +

    gmp-click

    +

    gmp-headingchange

    +

    gmp-rangechange

    +

    gmp-rollchange

    +

    gmp-steadychange

    +

    gmp-tiltchange

    +
    + + + diff --git a/dist/samples/3d-map-events/app/index.ts b/dist/samples/3d-map-events/app/index.ts new file mode 100644 index 00000000..317e7272 --- /dev/null +++ b/dist/samples/3d-map-events/app/index.ts @@ -0,0 +1,29 @@ +/* + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_3d_map_events] +const mapElement = document.querySelector('gmp-map-3d'); + +async function init() { + // Import the needed libraries. + await google.maps.importLibrary('maps3d'); + + const events = [...document.querySelectorAll('div > p')].map( + (i) => i.textContent + ); + for (const event of events) { + mapElement?.addEventListener(event, () => { + const eventElement = document.querySelector(`#${event}`); + eventElement?.classList.add('active'); + setTimeout(() => { + eventElement?.classList.remove('active'); + }, 1000); + }); + } +} + +init(); +// [END maps_3d_map_events] diff --git a/dist/samples/3d-map-events/app/package.json b/dist/samples/3d-map-events/app/package.json new file mode 100644 index 00000000..382a927d --- /dev/null +++ b/dist/samples/3d-map-events/app/package.json @@ -0,0 +1,12 @@ +{ + "name": "@js-api-samples/3d-map-events", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-map-events && bash ../app.sh 3d-map-events && bash ../docs.sh 3d-map-events && npm run build:vite --workspace=. && bash ../dist.sh 3d-map-events", + "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/3d-map-events/app/style.css b/dist/samples/3d-map-events/app/style.css new file mode 100644 index 00000000..07b4b686 --- /dev/null +++ b/dist/samples/3d-map-events/app/style.css @@ -0,0 +1,32 @@ +/* + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* [START maps_3d_map_events] */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +body { + display: flex; + flex-direction: row; +} +gmp-map-3d { + flex-grow: 1; +} +.myaside { + flex-basis: 25%; + font-family: + Droid Sans Mono, + monospace; + font-size: 15px; + padding: 2px; +} +.myaside > p.active { + background-color: #9cf; +} +/* [END maps_3d_map_events] */ diff --git a/dist/samples/3d-map-events/app/tsconfig.json b/dist/samples/3d-map-events/app/tsconfig.json new file mode 100644 index 00000000..5ba470c0 --- /dev/null +++ b/dist/samples/3d-map-events/app/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "." + }, + "include": [ + "./*.ts", + ] +} diff --git a/dist/samples/3d-map-events/dist/assets/index-C66U5p_u.js b/dist/samples/3d-map-events/dist/assets/index-C66U5p_u.js new file mode 100644 index 00000000..d0811b84 --- /dev/null +++ b/dist/samples/3d-map-events/dist/assets/index-C66U5p_u.js @@ -0,0 +1 @@ +(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let 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 n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var e=document.querySelector(`gmp-map-3d`);async function t(){await google.maps.importLibrary(`maps3d`);let t=[...document.querySelectorAll(`div > p`)].map(e=>e.textContent);for(let n of t)e?.addEventListener(n,()=>{let e=document.querySelector(`#${n}`);e?.classList.add(`active`),setTimeout(()=>{e?.classList.remove(`active`)},1e3)})}t(); \ No newline at end of file diff --git a/dist/samples/3d-map-events/dist/assets/index-SqEftstQ.css b/dist/samples/3d-map-events/dist/assets/index-SqEftstQ.css new file mode 100644 index 00000000..bdb12a42 --- /dev/null +++ b/dist/samples/3d-map-events/dist/assets/index-SqEftstQ.css @@ -0,0 +1 @@ +html,body{height:100%;margin:0;padding:0}body{flex-direction:row;display:flex}gmp-map-3d{flex-grow:1}.myaside{flex-basis:25%;padding:2px;font-family:Droid Sans Mono,monospace;font-size:15px}.myaside>p.active{background-color:#9cf} diff --git a/dist/samples/3d-map-events/dist/index.html b/dist/samples/3d-map-events/dist/index.html new file mode 100644 index 00000000..d37e9781 --- /dev/null +++ b/dist/samples/3d-map-events/dist/index.html @@ -0,0 +1,35 @@ + + + + + + 3d-map-events + + + + + + + + +
    +

    gmp-centerchange

    +

    gmp-click

    +

    gmp-headingchange

    +

    gmp-rangechange

    +

    gmp-rollchange

    +

    gmp-steadychange

    +

    gmp-tiltchange

    +
    + + + diff --git a/dist/samples/3d-map-events/docs/index.html b/dist/samples/3d-map-events/docs/index.html new file mode 100644 index 00000000..ebad594d --- /dev/null +++ b/dist/samples/3d-map-events/docs/index.html @@ -0,0 +1,35 @@ + + + + + + 3d-map-events + + + + + + + + +
    +

    gmp-centerchange

    +

    gmp-click

    +

    gmp-headingchange

    +

    gmp-rangechange

    +

    gmp-rollchange

    +

    gmp-steadychange

    +

    gmp-tiltchange

    +
    + + + diff --git a/dist/samples/3d-map-events/docs/index.js b/dist/samples/3d-map-events/docs/index.js new file mode 100644 index 00000000..acbc55e3 --- /dev/null +++ b/dist/samples/3d-map-events/docs/index.js @@ -0,0 +1,24 @@ +"use strict"; +/* + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_3d_map_events] +const mapElement = document.querySelector('gmp-map-3d'); +async function init() { + // Import the needed libraries. + await google.maps.importLibrary('maps3d'); + const events = [...document.querySelectorAll('div > p')].map((i) => i.textContent); + for (const event of events) { + mapElement?.addEventListener(event, () => { + const eventElement = document.querySelector(`#${event}`); + eventElement?.classList.add('active'); + setTimeout(() => { + eventElement?.classList.remove('active'); + }, 1000); + }); + } +} +init(); +// [END maps_3d_map_events] diff --git a/dist/samples/3d-map-events/docs/index.ts b/dist/samples/3d-map-events/docs/index.ts new file mode 100644 index 00000000..317e7272 --- /dev/null +++ b/dist/samples/3d-map-events/docs/index.ts @@ -0,0 +1,29 @@ +/* + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_3d_map_events] +const mapElement = document.querySelector('gmp-map-3d'); + +async function init() { + // Import the needed libraries. + await google.maps.importLibrary('maps3d'); + + const events = [...document.querySelectorAll('div > p')].map( + (i) => i.textContent + ); + for (const event of events) { + mapElement?.addEventListener(event, () => { + const eventElement = document.querySelector(`#${event}`); + eventElement?.classList.add('active'); + setTimeout(() => { + eventElement?.classList.remove('active'); + }, 1000); + }); + } +} + +init(); +// [END maps_3d_map_events] diff --git a/dist/samples/3d-map-events/docs/style.css b/dist/samples/3d-map-events/docs/style.css new file mode 100644 index 00000000..07b4b686 --- /dev/null +++ b/dist/samples/3d-map-events/docs/style.css @@ -0,0 +1,32 @@ +/* + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* [START maps_3d_map_events] */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +body { + display: flex; + flex-direction: row; +} +gmp-map-3d { + flex-grow: 1; +} +.myaside { + flex-basis: 25%; + font-family: + Droid Sans Mono, + monospace; + font-size: 15px; + padding: 2px; +} +.myaside > p.active { + background-color: #9cf; +} +/* [END maps_3d_map_events] */ diff --git a/dist/samples/3d-map-events/jsfiddle/demo.css b/dist/samples/3d-map-events/jsfiddle/demo.css new file mode 100644 index 00000000..17f15501 --- /dev/null +++ b/dist/samples/3d-map-events/jsfiddle/demo.css @@ -0,0 +1,32 @@ +/* + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + + +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +body { + display: flex; + flex-direction: row; +} +gmp-map-3d { + flex-grow: 1; +} +.myaside { + flex-basis: 25%; + font-family: + Droid Sans Mono, + monospace; + font-size: 15px; + padding: 2px; +} +.myaside > p.active { + background-color: #9cf; +} + diff --git a/dist/samples/3d-map-events/jsfiddle/demo.details b/dist/samples/3d-map-events/jsfiddle/demo.details new file mode 100644 index 00000000..243aa2b3 --- /dev/null +++ b/dist/samples/3d-map-events/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: 3d-map-events +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/3d-map-events/jsfiddle/demo.html b/dist/samples/3d-map-events/jsfiddle/demo.html new file mode 100644 index 00000000..e5dfed79 --- /dev/null +++ b/dist/samples/3d-map-events/jsfiddle/demo.html @@ -0,0 +1,35 @@ + + + + + + 3d-map-events + + + + + + + + +
    +

    gmp-centerchange

    +

    gmp-click

    +

    gmp-headingchange

    +

    gmp-rangechange

    +

    gmp-rollchange

    +

    gmp-steadychange

    +

    gmp-tiltchange

    +
    + + + diff --git a/dist/samples/3d-map-events/jsfiddle/demo.js b/dist/samples/3d-map-events/jsfiddle/demo.js new file mode 100644 index 00000000..4f07c9f0 --- /dev/null +++ b/dist/samples/3d-map-events/jsfiddle/demo.js @@ -0,0 +1,24 @@ +"use strict"; +/* + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +const mapElement = document.querySelector('gmp-map-3d'); +async function init() { + // Import the needed libraries. + await google.maps.importLibrary('maps3d'); + const events = [...document.querySelectorAll('div > p')].map((i) => i.textContent); + for (const event of events) { + mapElement?.addEventListener(event, () => { + const eventElement = document.querySelector(`#${event}`); + eventElement?.classList.add('active'); + setTimeout(() => { + eventElement?.classList.remove('active'); + }, 1000); + }); + } +} +init(); + diff --git a/index.html b/index.html index f5ba1e02..02b817c0 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@

    Maps JSAPI Samples

  • 3d-label-toggle
  • 3d-localization
  • 3d-map-45-degree
    • +
  • 3d-map-events
  • 3d-map-roadmap
  • 3d-map-styling
  • 3d-marker-click-event
    • diff --git a/package-lock.json b/package-lock.json index 7dd7a718..76c0d317 100644 --- a/package-lock.json +++ b/package-lock.json @@ -464,6 +464,10 @@ "resolved": "samples/3d-map-45-degree", "link": true }, + "node_modules/@js-api-samples/3d-map-events": { + "resolved": "samples/3d-map-events", + "link": true + }, "node_modules/@js-api-samples/3d-map-roadmap": { "resolved": "samples/3d-map-roadmap", "link": true @@ -5222,6 +5226,10 @@ "name": "@js-api-samples/3d-map-45-degree", "version": "1.0.0" }, + "samples/3d-map-events": { + "name": "@js-api-samples/3d-map-events", + "version": "1.0.0" + }, "samples/3d-map-roadmap": { "name": "@js-api-samples/3d-map-roadmap", "version": "1.0.0"