diff --git a/samples/3d-places/index.html b/samples/3d-places/index.html new file mode 100644 index 00000000..46b6918b --- /dev/null +++ b/samples/3d-places/index.html @@ -0,0 +1,15 @@ + + + + Map + + + + + +
+ + + + diff --git a/samples/3d-places/index.ts b/samples/3d-places/index.ts new file mode 100644 index 00000000..7ecf2a3d --- /dev/null +++ b/samples/3d-places/index.ts @@ -0,0 +1,90 @@ +/* + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * * https://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +*/ + +// @ts-nocheck +// [START maps3d_places] +let map3DElement = null; +async function init() { + const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d"); + map3DElement = new Map3DElement({ + center: {lat: 0, lng: 0, altitude: 16000000}, + mode: MapMode.HYBRID, + }); + document.body.append(map3DElement); + initAutocomplete(); +} +async function initAutocomplete() { + const { Autocomplete } = await google.maps.importLibrary("places"); + const autocomplete = new Autocomplete( + document.getElementById("pac-input"), + { + fields: [ + "geometry", + "name", + "place_id" + ], + } + ); + autocomplete.addListener("place_changed", () => { + //viewer.entities.removeAll(); + const place = autocomplete.getPlace(); + if (!place.geometry || !place.geometry.viewport) { + window.alert("No viewport for input: " + place.name); + return; + } + zoomToViewport(place.geometry); + }); +} +const zoomToViewport = async (geometry) => { + const { AltitudeMode, Polyline3DElement } = await google.maps.importLibrary("maps3d"); + let viewport = geometry.viewport; + let locationPoints = [ + { lat: viewport.getNorthEast().lat(), lng: viewport.getNorthEast().lng() }, + { lat: viewport.getSouthWest().lat(), lng: viewport.getNorthEast().lng() }, + { lat: viewport.getSouthWest().lat(), lng: viewport.getSouthWest().lng() }, + { lat: viewport.getNorthEast().lat(), lng: viewport.getSouthWest().lng() }, + { lat: viewport.getNorthEast().lat(), lng: viewport.getNorthEast().lng() } + ]; + let locationPolyline = new Polyline3DElement({ + altitudeMode: AltitudeMode.CLAMP_TO_GROUND, + strokeColor: "blue", + strokeWidth: 10, + coordinates: locationPoints, + }); + map3DElement.append(locationPolyline); + console.log(locationPolyline); + let elevation = await getElevationforPoint(geometry.location); + if (map3DElement) { + map3DElement.center = { lat: geometry.location.lat(), lng: geometry.location.lng(), altitude: elevation + 50 }; + map3DElement.heading = 0; + map3DElement.range = 1000; + map3DElement.tilt = 65; + } +}; +async function getElevationforPoint(location) { + const { ElevationService } = await google.maps.importLibrary("elevation"); + // Get place elevation using the ElevationService. + const elevatorService = new google.maps.ElevationService(); + const elevationResponse = await elevatorService.getElevationForLocations({ + locations: [location], + }); + if (!(elevationResponse.results && elevationResponse.results.length)) { + window.alert(`Insufficient elevation data for place: ${place.name}`); + return; + } + const elevation = elevationResponse.results[0].elevation || 10; + return elevation; +} +init(); +// [END maps3d_places] diff --git a/samples/3d-places/package.json b/samples/3d-places/package.json new file mode 100644 index 00000000..546f01e2 --- /dev/null +++ b/samples/3d-places/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-places", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-places && bash ../app.sh 3d-places && bash ../docs.sh 3d-places && npm run build:vite --workspace=. && bash ../dist.sh 3d-places", + "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-places/style.css b/samples/3d-places/style.css new file mode 100644 index 00000000..78c8fe05 --- /dev/null +++ b/samples/3d-places/style.css @@ -0,0 +1,22 @@ +/* + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * * https://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +*/ +/* [START 3d_places] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* [END 3d_places] */ diff --git a/samples/3d-places/tsconfig.json b/samples/3d-places/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-places/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-simple-map/index.html b/samples/3d-simple-map/index.html new file mode 100644 index 00000000..2561de66 --- /dev/null +++ b/samples/3d-simple-map/index.html @@ -0,0 +1,15 @@ + + + + Simple Map + + + + + + + + + + diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts new file mode 100644 index 00000000..29d20774 --- /dev/null +++ b/samples/3d-simple-map/index.ts @@ -0,0 +1,18 @@ +/* + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * * https://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +*/ + +//@ts-nocheck +// [START maps3d_simple_map] + +// [END maps3d_simple_map] diff --git a/samples/3d-simple-map/package.json b/samples/3d-simple-map/package.json new file mode 100644 index 00000000..c26da75d --- /dev/null +++ b/samples/3d-simple-map/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-simple-map", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-simple-map && bash ../app.sh 3d-simple-map && bash ../docs.sh 3d-simple-map && npm run build:vite --workspace=. && bash ../dist.sh 3d-simple-map", + "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-simple-map/style.css b/samples/3d-simple-map/style.css new file mode 100644 index 00000000..afcc83d7 --- /dev/null +++ b/samples/3d-simple-map/style.css @@ -0,0 +1,22 @@ +/* + * Copyright 2025 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * * https://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +*/ +/* [START 3d_simple_map] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#gmp-map-3d { + height: 100%; +} + +/* [END 3d_simple_map] */ diff --git a/samples/3d-simple-map/tsconfig.json b/samples/3d-simple-map/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-simple-map/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" + } +}