diff --git a/samples/maps-3d-simple/README.md b/samples/maps-3d-simple/README.md new file mode 100644 index 00000000..be15c0d7 --- /dev/null +++ b/samples/maps-3d-simple/README.md @@ -0,0 +1,32 @@ +# 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/maps-3d-simple/index.html b/samples/maps-3d-simple/index.html new file mode 100644 index 00000000..ca65e895 --- /dev/null +++ b/samples/maps-3d-simple/index.html @@ -0,0 +1,25 @@ + + + + + + Simple 3D Map + + + + + + + + + + + + + + \ No newline at end of file diff --git a/samples/maps-3d-simple/index.ts b/samples/maps-3d-simple/index.ts new file mode 100644 index 00000000..cc59b939 --- /dev/null +++ b/samples/maps-3d-simple/index.ts @@ -0,0 +1,24 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_map_3d_simple] +const map = document.querySelector('gmp-3d-map') as any; +async function initMap(): Promise { + //@ts-ignore + const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = await google.maps.importLibrary("maps3d") as google.maps.Maps3DLibrary; + + const map = new Map3DElement({ + center: { lat: 37.7704, lng: -122.3985, altitude: 500 }, + tilt: 67.5, + //@ts-ignore + mode: 'HYBRID', + }); + + document.body.append(map); +} + +initMap(); +// [END maps_map_3d_simple] \ No newline at end of file diff --git a/samples/maps-3d-simple/package.json b/samples/maps-3d-simple/package.json new file mode 100644 index 00000000..3bd7b6ad --- /dev/null +++ b/samples/maps-3d-simple/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/maps-3d-simple", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh maps-3d-simple && bash ../app.sh maps-3d-simple && bash ../docs.sh maps-3d-simple && npm run build:vite --workspace=. && bash ../dist.sh maps-3d-simple", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } + } \ No newline at end of file diff --git a/samples/maps-3d-simple/style.css b/samples/maps-3d-simple/style.css new file mode 100644 index 00000000..4bcd8e76 --- /dev/null +++ b/samples/maps-3d-simple/style.css @@ -0,0 +1,25 @@ +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_map_3d_simple] */ +/* + * 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_map_3d_simple] */ \ No newline at end of file diff --git a/samples/maps-3d-simple/tsconfig.json b/samples/maps-3d-simple/tsconfig.json new file mode 100644 index 00000000..09179087 --- /dev/null +++ b/samples/maps-3d-simple/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