diff --git a/samples/3d-localization/README.md b/samples/3d-localization/README.md new file mode 100644 index 00000000..62904810 --- /dev/null +++ b/samples/3d-localization/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/samples/3d-localization/index.html b/samples/3d-localization/index.html new file mode 100644 index 00000000..9cb13bfe --- /dev/null +++ b/samples/3d-localization/index.html @@ -0,0 +1,22 @@ + + + + + + 3d localization + + + + + + + + + + + diff --git a/samples/3d-localization/index.ts b/samples/3d-localization/index.ts new file mode 100644 index 00000000..7ab8c911 --- /dev/null +++ b/samples/3d-localization/index.ts @@ -0,0 +1,27 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +//@ts-nocheck +// [START maps_3d_localization] +async function initMap() { + const { Map3DElement } = await google.maps.importLibrary("maps3d"); + + const map = new Map3DElement({ + center: { lat: 49.75371685807847, lng: -123.13227141171181, altitude: 30 }, + tilt: 50.64793990040634, + heading: 44.480020261589154, + range: 51618.36056532338, + language: "ZH", + region: "CN", + mode: 'HYBRID', + gestureHandling: "COOPERATIVE" + }); + + document.body.append(map); +} + +initMap(); +// [END maps_3d_localization] diff --git a/samples/3d-localization/package.json b/samples/3d-localization/package.json new file mode 100644 index 00000000..c3357ae5 --- /dev/null +++ b/samples/3d-localization/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-localization", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-localization && bash ../app.sh 3d-localization && bash ../docs.sh 3d-localization && npm run build:vite --workspace=. && bash ../dist.sh 3d-localization", + "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/samples/3d-localization/style.css b/samples/3d-localization/style.css new file mode 100644 index 00000000..2e64d2e8 --- /dev/null +++ b/samples/3d-localization/style.css @@ -0,0 +1,19 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_localization] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#gmp-map-3d { + height: 100%; +} +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_localization] */ diff --git a/samples/3d-localization/tsconfig.json b/samples/3d-localization/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-localization/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" + } +} diff --git a/samples/3d-map-styling/README.md b/samples/3d-map-styling/README.md new file mode 100644 index 00000000..62904810 --- /dev/null +++ b/samples/3d-map-styling/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/samples/3d-map-styling/index.html b/samples/3d-map-styling/index.html new file mode 100644 index 00000000..9443486d --- /dev/null +++ b/samples/3d-map-styling/index.html @@ -0,0 +1,22 @@ + + + + + + 3d map styling + + + + + + + + + + + diff --git a/samples/3d-map-styling/index.ts b/samples/3d-map-styling/index.ts new file mode 100644 index 00000000..4fc4c7b6 --- /dev/null +++ b/samples/3d-map-styling/index.ts @@ -0,0 +1,26 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +//@ts-nocheck +// [START maps_3d_map_styling] +async function initMap() { + const { Map3DElement } = await google.maps.importLibrary("maps3d"); + + const map = new Map3DElement({ + center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200 }, + tilt: 67.5, + heading: 108.94057782079429, + range: 6605.57279990986, + mapId: 'bcce776b92de1336e22c569f', + mode: 'HYBRID', + gestureHandling: "COOPERATIVE" + }); + + document.body.append(map); +} + +initMap(); +// [END maps_3d_map_styling] diff --git a/samples/3d-map-styling/package.json b/samples/3d-map-styling/package.json new file mode 100644 index 00000000..2548ea04 --- /dev/null +++ b/samples/3d-map-styling/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-map-styling", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-map-styling && bash ../app.sh 3d-map-styling && bash ../docs.sh 3d-map-styling && npm run build:vite --workspace=. && bash ../dist.sh 3d-map-styling", + "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/samples/3d-map-styling/style.css b/samples/3d-map-styling/style.css new file mode 100644 index 00000000..ee63e98e --- /dev/null +++ b/samples/3d-map-styling/style.css @@ -0,0 +1,19 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_map_styling] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#gmp-map-3d { + height: 100%; +} +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_map_styling] */ diff --git a/samples/3d-map-styling/tsconfig.json b/samples/3d-map-styling/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-map-styling/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" + } +}