diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index a1bf91b2..00000000 Binary files a/.DS_Store and /dev/null differ diff --git a/samples/.DS_Store b/samples/.DS_Store deleted file mode 100644 index 3d3bc3e9..00000000 Binary files a/samples/.DS_Store and /dev/null differ diff --git a/samples/.gitignore b/samples/.gitignore index 68c5d18f..86647843 100644 --- a/samples/.gitignore +++ b/samples/.gitignore @@ -3,3 +3,4 @@ node_modules/ /playwright-report/ /blob-report/ /playwright/.cache/ +**/.DS_Store \ No newline at end of file diff --git a/samples/3d-camera-to-around/index.html b/samples/3d-camera-to-around/index.html new file mode 100644 index 00000000..f0af56bb --- /dev/null +++ b/samples/3d-camera-to-around/index.html @@ -0,0 +1,23 @@ + + + + + + Map + + + + + +
+ + + + + + diff --git a/samples/3d-camera-to-around/index.ts b/samples/3d-camera-to-around/index.ts new file mode 100644 index 00000000..af0ef996 --- /dev/null +++ b/samples/3d-camera-to-around/index.ts @@ -0,0 +1,53 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_camera_to_around] +async function init() { + const { Map3DElement } = await google.maps.importLibrary("maps3d"); + + const map = new Map3DElement( + { center: { lat: 37.79810773998413, lng : -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, } + ); + + map.mode = "SATELLITE"; + + document.body.append(map); + + // Used for both the fly to function and the location to fly around. + const flyToCamera = { + center: { lat: 21.263523536467105, lng : -157.80663691939296, altitude: 80.28936069489404 }, + range: 1500.8202963253427, tilt: 76.9173260789542 ,heading: -44.59196007522445, + }; + + // Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively. + map.flyCameraTo({ + // Where we are going to. + endCamera: flyToCamera, + // How long we want the flight to take. + durationMillis: 30000, + }); + + // When the animation has completed, fly around the location. + map.addEventListener('gmp-animationend', () => { + map.flyCameraAround({ + // Location to fly around. + camera: flyToCamera, + // Length of time to fly to the location. + durationMillis: 50000, + // Number of rotations to make in the specified time. + rounds: 1 + }); + }, {once: true}); // Stop animation after flying around. + + // At any time stop the animation. + map.addEventListener('gmp-click', (event) => { + map.stopCameraAnimation(); + }); +} + +init(); +// [END maps_3d_camera_to_around] diff --git a/samples/3d-camera-to-around/package.json b/samples/3d-camera-to-around/package.json new file mode 100644 index 00000000..34403ea0 --- /dev/null +++ b/samples/3d-camera-to-around/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-camera-to-around", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-camera-to-around && bash ../app.sh 3d-camera-to-around && bash ../docs.sh 3d-camera-to-around && npm run build:vite --workspace=. && bash ../dist.sh 3d-camera-to-around", + "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-camera-to-around/style.css b/samples/3d-camera-to-around/style.css new file mode 100644 index 00000000..5557b807 --- /dev/null +++ b/samples/3d-camera-to-around/style.css @@ -0,0 +1,19 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_camera_to_around] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_camera_to_around] */ diff --git a/samples/3d-camera-to-around/tsconfig.json b/samples/3d-camera-to-around/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-camera-to-around/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-label-toggle/index.html b/samples/3d-label-toggle/index.html new file mode 100644 index 00000000..e9965e3f --- /dev/null +++ b/samples/3d-label-toggle/index.html @@ -0,0 +1,25 @@ + + + + + + Map + + + + + +
+ + + + + + + + diff --git a/samples/3d-label-toggle/index.ts b/samples/3d-label-toggle/index.ts new file mode 100644 index 00000000..c61661bc --- /dev/null +++ b/samples/3d-label-toggle/index.ts @@ -0,0 +1,43 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_label_toggle] +let map; +async function init() { + const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d"); + + map = new Map3DElement( + { center: { lat: 37.79810773998413, lng: -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, } + ); + + map.mode = MapMode.SATELLITE; + + document.body.append(map); + + const locationCamera = { + center: { lat: 21.263523536467105, lng: -157.80663691939296, altitude: 80.28936069489404 }, + range: 1500.8202963253427, tilt: 76.9173260789542, heading: -44.59196007522445, + }; + + // Get the button element by its ID + const toggleButton = document.getElementById('toggleButton'); + toggleButton.addEventListener('click', function () { + // Toggle the labels. + if (map.mode == MapMode.SATELLITE) { + // Setting the map mode to HYBRID turns the labels on. + map.mode = MapMode.HYBRID; + document.getElementById('toggleButton').innerText = "Labels are on. (HYBRID)"; + } else { + // Setting the map mode to SATELLITE turns the labels on. + map.mode = MapMode.SATELLITE; + document.getElementById('toggleButton').innerText = "Labels are off. (SATELLITE)"; + } + }); +} + +init(); +// [END maps_3d_label_toggle] diff --git a/samples/3d-label-toggle/package.json b/samples/3d-label-toggle/package.json new file mode 100644 index 00000000..a0053086 --- /dev/null +++ b/samples/3d-label-toggle/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-label-toggle", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-label-toggle && bash ../app.sh 3d-label-toggle && bash ../docs.sh 3d-label-toggle && npm run build:vite --workspace=. && bash ../dist.sh 3d-label-toggle", + "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-label-toggle/style.css b/samples/3d-label-toggle/style.css new file mode 100644 index 00000000..9c8246fc --- /dev/null +++ b/samples/3d-label-toggle/style.css @@ -0,0 +1,41 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_label_toggle] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +.toggleButton { + background: rgb(235, 235, 235); + color: black; + border: none; + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + border-radius: 4px; + cursor: pointer; + position: fixed; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + z-index: 1000; +} + +.toggleButton:hover { + background-color: #007bff; + color: white; +} +/* [END maps_3d_label_toggle] */ diff --git a/samples/3d-label-toggle/tsconfig.json b/samples/3d-label-toggle/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-label-toggle/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-marker-click-event/index.html b/samples/3d-marker-click-event/index.html new file mode 100644 index 00000000..716ed960 --- /dev/null +++ b/samples/3d-marker-click-event/index.html @@ -0,0 +1,23 @@ + + + + + + Map + + + + + +
+ + + + + + diff --git a/samples/3d-marker-click-event/index.ts b/samples/3d-marker-click-event/index.ts new file mode 100644 index 00000000..a089a25e --- /dev/null +++ b/samples/3d-marker-click-event/index.ts @@ -0,0 +1,46 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_marker_click_event] +async function initMap() { + // Include the interactive marker class + const { Map3DElement, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d"); + + // We will use this to place the camrea for the intial view but also to fly around the starting point. + const originalCamera = { + center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 }, range: 1500, tilt: 74, heading: 0 + }; + + const map = new Map3DElement({ + ...originalCamera, + mode: "SATELLITE", + }); + + // Create the interactive marker and set the attributes. + const interactiveMarker = new Marker3DInteractiveElement({ + position: { lat: 39.1178, lng: -106.4452, altitude: 100 }, + altitudeMode: "RELATIVE_TO_MESH", + extruded: true, + label: "Mount Elbert" + }); + + // Specify the action to take on click. + interactiveMarker.addEventListener('gmp-click', (event) => { + map.flyCameraAround({ + camera: originalCamera, + durationMillis: 50000, + rounds: 1 + }); + }); + + map.append(interactiveMarker); + + document.body.append(map); +} + +initMap(); +// [END maps_3d_marker_click_event] diff --git a/samples/3d-marker-click-event/package.json b/samples/3d-marker-click-event/package.json new file mode 100644 index 00000000..b11b291f --- /dev/null +++ b/samples/3d-marker-click-event/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-marker-click-event", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-marker-click-event && bash ../app.sh 3d-marker-click-event && bash ../docs.sh 3d-marker-click-event && npm run build:vite --workspace=. && bash ../dist.sh 3d-marker-click-event", + "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-marker-click-event/style.css b/samples/3d-marker-click-event/style.css new file mode 100644 index 00000000..b6434892 --- /dev/null +++ b/samples/3d-marker-click-event/style.css @@ -0,0 +1,19 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_marker_click_event] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_marker_click_event] */ diff --git a/samples/3d-marker-click-event/tsconfig.json b/samples/3d-marker-click-event/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-marker-click-event/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-marker-customization/index.html b/samples/3d-marker-customization/index.html index a0bb187a..6f1d7539 100644 --- a/samples/3d-marker-customization/index.html +++ b/samples/3d-marker-customization/index.html @@ -1,4 +1,9 @@ + diff --git a/samples/3d-marker-customization/index.ts b/samples/3d-marker-customization/index.ts index 1bbb13a7..f0387863 100644 --- a/samples/3d-marker-customization/index.ts +++ b/samples/3d-marker-customization/index.ts @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ // @ts-nocheck diff --git a/samples/3d-marker-customization/style.css b/samples/3d-marker-customization/style.css index 11426034..efbeb555 100644 --- a/samples/3d-marker-customization/style.css +++ b/samples/3d-marker-customization/style.css @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ /* [START maps_3d_marker_customization] */ /* * Always set the map height explicitly to define the size of the div element diff --git a/samples/3d-marker-interactive/index.html b/samples/3d-marker-interactive/index.html new file mode 100644 index 00000000..22ced725 --- /dev/null +++ b/samples/3d-marker-interactive/index.html @@ -0,0 +1,27 @@ + + + + + + Map + + + + + +
+ +
+
Click on a marker to get the name of the Google Office.
+
+ + + + + + diff --git a/samples/3d-marker-interactive/index.ts b/samples/3d-marker-interactive/index.ts new file mode 100644 index 00000000..81fad67f --- /dev/null +++ b/samples/3d-marker-interactive/index.ts @@ -0,0 +1,84 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_marker_interactive] +async function init() { + // Request needed libraries. + const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = await google.maps.importLibrary("maps3d"); + + const map = new Map3DElement({ + center: { lat: 37.4690, lng: -122.1074, altitude: 0 }, + tilt: 67.5, + range: 45000, + mode: 'HYBRID' + }); + + map.mode = "SATELLITE"; + + for (const position of positions) { + const popover = new PopoverElement({ + open: true, + }); + + popover.append(position.name); + + const interactiveMarker = new Marker3DInteractiveElement({ + position, + gmpPopoverTargetElement: popover + }); + + map.append(interactiveMarker); + map.append(popover); + } + + document.body.append(map); +} + +const positions = [{ + lat: 37.50981071450543, + lng: -122.20280629839084, + name: "Google Redwood City", +}, { + lat: 37.423897572754754, + lng: -122.09167346506989, + name: "Google West Campus", +}, { + lat: 37.42333982824077, + lng: -122.06647571637265, + name: "Google Bay View", +}, { + lat: 37.42193728115661, + lng: -122.08531908774293, + name: "Googleplex", +}, { + lat: 37.39982552146971, + lng: -122.057934225745, + name: "Google Quad Campus", +}, { + lat: 37.40317922575345, + lng: -122.03276863941647, + name: "Google Tech Corners", +}, { + lat: 37.41181058680138, + lng: -121.9538960231151, + name: "Google San Jose", +}, { + lat: 37.62759428242346, + lng: -122.42615377188994, + name: "Google San Bruno", +}, { + lat: 37.40369749797231, + lng: -122.14812537955007, + name: "Google Palo Alto", +}, { + lat: 37.793664664297964, + lng: -122.39504580413139, + name: "Google San Francisco", +}]; + +init(); +// [END maps_3d_marker_interactive] diff --git a/samples/3d-marker-interactive/package.json b/samples/3d-marker-interactive/package.json new file mode 100644 index 00000000..d70799ff --- /dev/null +++ b/samples/3d-marker-interactive/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-marker-interactive", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-marker-interactive && bash ../app.sh 3d-marker-interactive && bash ../docs.sh 3d-marker-interactive && npm run build:vite --workspace=. && bash ../dist.sh 3d-marker-interactive", + "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-marker-interactive/style.css b/samples/3d-marker-interactive/style.css new file mode 100644 index 00000000..ef9f6866 --- /dev/null +++ b/samples/3d-marker-interactive/style.css @@ -0,0 +1,40 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_marker_interactive] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +.textContainer { + background-color: #4d90fe; + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); + margin: 10px; + font: 400 18px Roboto, Arial, sans-serif; + overflow: hidden; + position: absolute; + left: 50%; + bottom: 5px; + transform: translateX(-50%); + border: 1px solid white; + border-radius: 2px; + padding: 5px; + z-index: 1000; +} + +.text { + color: white; + font-size: 1em; + text-align: center; +} +/* [END maps_3d_marker_interactive] */ diff --git a/samples/3d-marker-interactive/tsconfig.json b/samples/3d-marker-interactive/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-marker-interactive/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-places-autocomplete/index.html b/samples/3d-places-autocomplete/index.html new file mode 100644 index 00000000..98b9d9e8 --- /dev/null +++ b/samples/3d-places-autocomplete/index.html @@ -0,0 +1,29 @@ + + + + + + Map + + + + + +
+ +
+
Navigate to a place
+
+
+
+ + + + + + diff --git a/samples/3d-places-autocomplete/index.ts b/samples/3d-places-autocomplete/index.ts new file mode 100644 index 00000000..70675f41 --- /dev/null +++ b/samples/3d-places-autocomplete/index.ts @@ -0,0 +1,97 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_places_autocomplete] +let map = null; + +async function init() { + const { Map3DElement } = await google.maps.importLibrary("maps3d"); + + map = new Map3DElement({ + center: { lat: 0, lng: 0, altitude: 16000000 }, + tilt: 0, + range: 0, + heading: 0, + roll: 0, + mode: 'HYBRID' + }); + + document.body.append(map); + + initAutocomplete(); +} + +async function initAutocomplete() { + const { PlaceAutocompleteElement } = await google.maps.importLibrary("places") + + const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); + placeAutocomplete.id = 'place-autocomplete-input'; + const card = document.getElementById('pac-container'); + card.appendChild(placeAutocomplete); + + placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { + const place = placePrediction.toPlace(); + await place.fetchFields({ fields: ['displayName', 'location', 'id'] }); + // If the place has a geometry, then present it on a map. + if (!place.location) { + window.alert("No viewport for input: " + place.displayName); + return; + } + flyToPlace(place); + }); +} + +const flyToPlace = async (place) => { + const { AltitudeMode, Polyline3DElement, Polygon3DElement, Marker3DElement } = await google.maps.importLibrary("maps3d"); + + const location = place.location; + + // We need to find the elevation for the point so we place the marker at 50m above the elevation. + const elevation = await getElevationforPoint(location); + + const marker = new Marker3DElement({ + position: { lat: location.lat(), lng: location.lng(), altitude: elevation + 50 }, + altitudeMode: AltitudeMode.ABSOLUTE, + extruded: true, + label: place.displayName, + }); + + // Add the marker. + map.append(marker); + + // Fly to the marker. + map.flyCameraTo({ + endCamera: { + center: { lat: location.lat(), lng: location.lng(), altitude: elevation + 50 }, + tilt: 65, + heading: 0, + range: 1000 + }, + durationMillis: 10000, + }); +}; + +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 maps_3d_places_autocomplete] diff --git a/samples/3d-places-autocomplete/package.json b/samples/3d-places-autocomplete/package.json new file mode 100644 index 00000000..d2cad1fb --- /dev/null +++ b/samples/3d-places-autocomplete/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-places-autocomplete", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-places-autocomplete && bash ../app.sh 3d-places-autocomplete && bash ../docs.sh 3d-places-autocomplete && npm run build:vite --workspace=. && bash ../dist.sh 3d-places-autocomplete", + "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-autocomplete/style.css b/samples/3d-places-autocomplete/style.css new file mode 100644 index 00000000..785b9f19 --- /dev/null +++ b/samples/3d-places-autocomplete/style.css @@ -0,0 +1,94 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_places_autocomplete] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +.pac-controls { + display: inline-block; + padding: 0px 11px; +} + +.pac-controls label { + font-family: Roboto; + font-size: 13px; + font-weight: 300; +} + +.pac-card { + background-color: #fff; + border: 0; + border-radius: 4px; + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3); + margin: 10px; + padding: 0 0.5em; + font: 400 18px Roboto, Arial, sans-serif; + /* overflow: hidden; */ + font-family: Roboto; + padding: 0; + position: absolute; + left: 10px; + top: 10px; + z-index: 99; +} + +#pac-container { + padding-top: 12px; + padding-bottom: 12px; + margin-right: 12px; + border-radius: 2px; + width: 412px; +} + +#pac-input { + background-color: #fff; + font-family: Roboto; + font-size: 15px; + font-weight: 300; + margin-left: 12px; + padding: 0 11px 0 13px; + text-overflow: ellipsis; + width: 400px; +} + +#pac-input:focus { + border-color: #4d90fe; +} + +#title { + color: #fff; + background-color: #4d90fe; + font-size: 14px; + font-weight: 500; + padding: 6px 12px; +} + +#place-autocomplete-card { + background-color: #fff; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + margin: 10px; + padding: 5px; + font-family: Roboto, sans-serif; + font-size: large; + font-weight: bold; +} + +gmp-place-autocomplete { + padding-left: 10px; + width: 405px; + z-index: 100; +} +/* [END maps_3d_places_autocomplete] */ diff --git a/samples/3d-places-autocomplete/tsconfig.json b/samples/3d-places-autocomplete/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-places-autocomplete/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-places/index.html b/samples/3d-places/index.html index 405b2905..35e39790 100644 --- a/samples/3d-places/index.html +++ b/samples/3d-places/index.html @@ -1,4 +1,9 @@ + diff --git a/samples/3d-places/index.ts b/samples/3d-places/index.ts index 94ee72d0..0fddf7a6 100644 --- a/samples/3d-places/index.ts +++ b/samples/3d-places/index.ts @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ //@ts-nocheck // [START maps_3d_places] diff --git a/samples/3d-places/style.css b/samples/3d-places/style.css index 5d0831cc..85bfe863 100644 --- a/samples/3d-places/style.css +++ b/samples/3d-places/style.css @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ /* [START maps_3d_places] */ /* * Always set the map height explicitly to define the size of the div element diff --git a/samples/3d-polygon-click-event/index.html b/samples/3d-polygon-click-event/index.html new file mode 100644 index 00000000..d5e15434 --- /dev/null +++ b/samples/3d-polygon-click-event/index.html @@ -0,0 +1,23 @@ + + + + + + Map + + + + + +
+ + + + + + diff --git a/samples/3d-polygon-click-event/index.ts b/samples/3d-polygon-click-event/index.ts new file mode 100644 index 00000000..3fa1b14e --- /dev/null +++ b/samples/3d-polygon-click-event/index.ts @@ -0,0 +1,69 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_polygon_click_event] +async function init() { + const { Map3DElement, MapMode, Polygon3DInteractiveElement } = await google.maps.importLibrary("maps3d"); + + const map = new Map3DElement({ + center: { lat: 40.6842, lng: -74.0019, altitude: 1000 }, + heading: 340, + tilt: 70, + mode: MapMode.HYBRID, + }); + + document.body.append(map); + + const polygonOptions = { + strokeColor: "#0000ff80", + strokeWidth: 8, + fillColor: "#ff000080", + drawsOccludedSegments: false, + } + + const examplePolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions); + + examplePolygon.outerCoordinates = [ + { lat: 40.7144, lng: -74.0208 }, + { lat: 40.6993, lng: -74.019 }, + { lat: 40.7035, lng: -74.0004 }, + { lat: 40.7144, lng: -74.0208 } + ]; + + examplePolygon.addEventListener('gmp-click', (event) => { + // change the color of the polygon stroke and fill colors to a random alternatives! + event.target.fillColor = randomizeHexColor(event.target.fillColor); + event.target.strokeColor = randomizeHexColor(event.target.fillColor); + console.log(event); + }); + + map.append(examplePolygon); +} + +function randomizeHexColor(originalHexColor) { + console.log(originalHexColor); + let alpha = ''; + alpha = originalHexColor.substring(7); + + // Generate random values for Red, Green, Blue (0-255) + const r = Math.floor(Math.random() * 256); + const g = Math.floor(Math.random() * 256); + const b = Math.floor(Math.random() * 256); + + console.log(r + " " + g + " " + b); + + // Convert decimal to 2-digit hex, padding with '0' if needed + const rHex = ('0' + r.toString(16)).slice(-2); + const gHex = ('0' + g.toString(16)).slice(-2); + const bHex = ('0' + b.toString(16)).slice(-2); + + // Combine parts: '#' + random RGB + original Alpha (if any) + return `#${rHex}${gHex}${bHex}${alpha}`; +} + +init(); +// [END maps_3d_polygon_click_event] diff --git a/samples/3d-polygon-click-event/package.json b/samples/3d-polygon-click-event/package.json new file mode 100644 index 00000000..207fdd8c --- /dev/null +++ b/samples/3d-polygon-click-event/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-polygon-click-event", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-polygon-click-event && bash ../app.sh 3d-polygon-click-event && bash ../docs.sh 3d-polygon-click-event && npm run build:vite --workspace=. && bash ../dist.sh 3d-polygon-click-event", + "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-polygon-click-event/style.css b/samples/3d-polygon-click-event/style.css new file mode 100644 index 00000000..f0bba123 --- /dev/null +++ b/samples/3d-polygon-click-event/style.css @@ -0,0 +1,19 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_polygon_click_event] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_polygon_click_event] */ diff --git a/samples/3d-polygon-click-event/tsconfig.json b/samples/3d-polygon-click-event/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-polygon-click-event/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-polygon-extruded-hole/index.html b/samples/3d-polygon-extruded-hole/index.html new file mode 100644 index 00000000..fb0b806f --- /dev/null +++ b/samples/3d-polygon-extruded-hole/index.html @@ -0,0 +1,23 @@ + + + + + + Map + + + + + +
+ + + + + + diff --git a/samples/3d-polygon-extruded-hole/index.ts b/samples/3d-polygon-extruded-hole/index.ts new file mode 100644 index 00000000..f4fd8b59 --- /dev/null +++ b/samples/3d-polygon-extruded-hole/index.ts @@ -0,0 +1,52 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_polygon_extruded_hole] +async function init() { + const { Map3DElement, MapMode, AltitudeMode, Polygon3DElement } = await google.maps.importLibrary("maps3d"); + + const map3DElement = new Map3DElement({ + center: { lat: 40.6842, lng: -74.0019, altitude: 1000 }, + heading: 340, + tilt: 70, + mode: MapMode.HYBRID, + }); + + const polygonOptions = { + strokeColor: "#0000ff80", + strokeWidth: 8, + fillColor: "#ff000080", + drawsOccludedSegments: false, + extruded: true, + altitudeMode : AltitudeMode.RELATIVE_TO_GROUND + } + + const examplePolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions); + + examplePolygon.outerCoordinates = [ + { lat: 40.7144, lng: -74.0208, altitude: 200 }, + { lat: 40.6993, lng: -74.019, altitude: 200 }, + { lat: 40.7035, lng: -74.0004, altitude: 200 }, + { lat: 40.7144, lng: -74.0208, altitude: 200 } + ]; + + examplePolygon.innerCoordinates = [ + [ + { lat: 40.71, lng: -74.0175, altitude: 200 }, + { lat: 40.703, lng: -74.0165, altitude: 200 }, + { lat: 40.7035, lng: -74.006, altitude: 200 }, + { lat: 40.71, lng: -74.0175, altitude: 200 } + ] + ]; + + map3DElement.append(examplePolygon); + + document.body.append(map3DElement); +} + +init(); +// [END maps_3d_polygon_extruded_hole] diff --git a/samples/3d-polygon-extruded-hole/package.json b/samples/3d-polygon-extruded-hole/package.json new file mode 100644 index 00000000..1ac88b14 --- /dev/null +++ b/samples/3d-polygon-extruded-hole/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-polygon-extruded-hole", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-polygon-extruded-hole && bash ../app.sh 3d-polygon-extruded-hole && bash ../docs.sh 3d-polygon-extruded-hole && npm run build:vite --workspace=. && bash ../dist.sh 3d-polygon-extruded-hole", + "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-polygon-extruded-hole/style.css b/samples/3d-polygon-extruded-hole/style.css new file mode 100644 index 00000000..81dc8ef9 --- /dev/null +++ b/samples/3d-polygon-extruded-hole/style.css @@ -0,0 +1,19 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_polygon_extruded_hole] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_polygon_extruded_hole] */ diff --git a/samples/3d-polygon-extruded-hole/tsconfig.json b/samples/3d-polygon-extruded-hole/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-polygon-extruded-hole/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-polygon/index.html b/samples/3d-polygon/index.html new file mode 100644 index 00000000..72295beb --- /dev/null +++ b/samples/3d-polygon/index.html @@ -0,0 +1,23 @@ + + + + + + Map + + + + + +
+ + + + + + diff --git a/samples/3d-polygon/index.ts b/samples/3d-polygon/index.ts new file mode 100644 index 00000000..4bc0c6bd --- /dev/null +++ b/samples/3d-polygon/index.ts @@ -0,0 +1,41 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_polygon] +async function init() { + const { Map3DElement, MapMode, Polygon3DElement } = await google.maps.importLibrary("maps3d"); + + const map3DElement = new Map3DElement({ + center: { lat: 40.6842, lng: -74.0019, altitude: 1000 }, + heading: 340, + tilt: 70, + mode: MapMode.HYBRID, + }); + + const polygonOptions = { + strokeColor: "#0000ff80", + strokeWidth: 8, + fillColor: "#ff000080", + drawsOccludedSegments: false, + } + + const examplePolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions); + + examplePolygon.outerCoordinates = [ + { lat: 40.7144, lng: -74.0208 }, + { lat: 40.6993, lng: -74.019 }, + { lat: 40.7035, lng: -74.0004 }, + { lat: 40.7144, lng: -74.0208 } + ]; + + map3DElement.append(examplePolygon); + + document.body.append(map3DElement); +} + +init(); +// [END maps_3d_polygon] diff --git a/samples/3d-polygon/package.json b/samples/3d-polygon/package.json new file mode 100644 index 00000000..8eec5ea2 --- /dev/null +++ b/samples/3d-polygon/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-polygon", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-polygon && bash ../app.sh 3d-polygon && bash ../docs.sh 3d-polygon && npm run build:vite --workspace=. && bash ../dist.sh 3d-polygon", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "devDependencies": { + "@playwright/test": "^1.51.1" + } +} diff --git a/samples/3d-polygon/style.css b/samples/3d-polygon/style.css new file mode 100644 index 00000000..04901599 --- /dev/null +++ b/samples/3d-polygon/style.css @@ -0,0 +1,19 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_polygon] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_polygon] */ diff --git a/samples/3d-polygon/tsconfig.json b/samples/3d-polygon/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-polygon/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-polyline-click-event/index.html b/samples/3d-polyline-click-event/index.html new file mode 100644 index 00000000..e3d2aabf --- /dev/null +++ b/samples/3d-polyline-click-event/index.html @@ -0,0 +1,23 @@ + + + + + + Map + + + + + +
+ + + + + + diff --git a/samples/3d-polyline-click-event/index.ts b/samples/3d-polyline-click-event/index.ts new file mode 100644 index 00000000..d018216e --- /dev/null +++ b/samples/3d-polyline-click-event/index.ts @@ -0,0 +1,51 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_polyline_click_event] +let map; +async function init() { + const { Map3DElement, MapMode, AltitudeMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d"); + + map = new Map3DElement({ + center: { lat: 37.7927, lng : -122.4020, altitude: 65.93 }, range: 3362.87, tilt: 64.01 ,heading: 25.00, + mode: MapMode.SATELLITE, + }); + + document.body.append(map); + + const polyline = new Polyline3DInteractiveElement({ + coordinates: [ + { lat: 37.80515638571346, lng: -122.4032569467164 }, + { lat: 37.80337073509504, lng: -122.4012878349353 }, + { lat: 37.79925208843463, lng: -122.3976697250461 }, + { lat: 37.7989102378512, lng: -122.3983408725656 }, + { lat: 37.79887832784348, lng: -122.3987094864192 }, + { lat: 37.79786443410338, lng: -122.4066878788802 }, + { lat: 37.79549248916587, lng: -122.4032992702785 }, + { lat: 37.78861484290265, lng: -122.4019489189814 }, + { lat: 37.78618687561075, lng: -122.398969592545 }, + { lat: 37.7892310309145, lng: -122.3951458683092 }, + { lat: 37.7916358762409, lng: -122.3981969390652 } + ], + strokeColor: 'blue', + outerColor: 'white', + strokeWidth: 10, + outerWidth: 0.4, + altitudeMode: AltitudeMode.RELATIVE_TO_GROUND, // Place it on the ground (as it has no altitude it will just be at ground height). + drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way. + }); + + polyline.addEventListener('gmp-click', (event) => { + // Toggle whether the line draws occluded segments. + event.target.drawsOccludedSegments = !event.target.drawsOccludedSegments; + }); + + map.append(polyline); +} + +init(); +// [END maps_3d_polyline_click_event] diff --git a/samples/3d-polyline-click-event/package.json b/samples/3d-polyline-click-event/package.json new file mode 100644 index 00000000..85c4ea5f --- /dev/null +++ b/samples/3d-polyline-click-event/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-polyline-click-event", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-polyline-click-event && bash ../app.sh 3d-polyline-click-event && bash ../docs.sh 3d-polyline-click-event && npm run build:vite --workspace=. && bash ../dist.sh 3d-polyline-click-event", + "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-polyline-click-event/style.css b/samples/3d-polyline-click-event/style.css new file mode 100644 index 00000000..f64defcf --- /dev/null +++ b/samples/3d-polyline-click-event/style.css @@ -0,0 +1,19 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_polyline_click_event] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_polyline_click_event] */ diff --git a/samples/3d-polyline-click-event/tsconfig.json b/samples/3d-polyline-click-event/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-polyline-click-event/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-polyline-extruded/index.html b/samples/3d-polyline-extruded/index.html new file mode 100644 index 00000000..863bc614 --- /dev/null +++ b/samples/3d-polyline-extruded/index.html @@ -0,0 +1,23 @@ + + + + + + Map + + + + + +
+ + + + + + diff --git a/samples/3d-polyline-extruded/index.ts b/samples/3d-polyline-extruded/index.ts new file mode 100644 index 00000000..03dc904d --- /dev/null +++ b/samples/3d-polyline-extruded/index.ts @@ -0,0 +1,44 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_polyline_extruded] +let map; +async function init() { + const { Map3DElement, MapMode, AltitudeMode, Polyline3DElement } = await google.maps.importLibrary("maps3d"); + + map = new Map3DElement({ + center: { lat: 37.7927, lng: -122.4020, altitude: 65.93 }, range: 3362.87, tilt: 64.01, heading: 25.00, + mode: MapMode.SATELLITE, + }); + + document.body.append(map); + + const polyline = new Polyline3DElement({ + coordinates: [ + { lat: 37.80515638571346, lng: -122.4032569467164, altitude: 100 }, + { lat: 37.80337073509504, lng: -122.4012878349353, altitude: 100 }, + { lat: 37.79925208843463, lng: -122.3976697250461, altitude: 100 }, + { lat: 37.7989102378512, lng: -122.3983408725656, altitude: 100 }, + { lat: 37.79887832784348, lng: -122.3987094864192, altitude: 100 }, + { lat: 37.79786443410338, lng: -122.4066878788802, altitude: 100 }, + { lat: 37.79549248916587, lng: -122.4032992702785, altitude: 100 }, + { lat: 37.78861484290265, lng: -122.4019489189814, altitude: 100 }, + { lat: 37.78618687561075, lng: -122.398969592545, altitude: 100 }, + { lat: 37.7892310309145, lng: -122.3951458683092, altitude: 100 }, + { lat: 37.7916358762409, lng: -122.3981969390652, altitude: 100 } + ], + strokeColor: '#0000FF80', + strokeWidth: 10, + altitudeMode: AltitudeMode.RELATIVE_TO_GROUND, // Place it on the ground (as it has no altitude it will just be at ground height). + extruded: true + }); + + map.append(polyline); +} + +init(); +// [END maps_3d_polyline_extruded] diff --git a/samples/3d-polyline-extruded/package.json b/samples/3d-polyline-extruded/package.json new file mode 100644 index 00000000..5e78ed71 --- /dev/null +++ b/samples/3d-polyline-extruded/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-polyline-extruded", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-polyline-extruded && bash ../app.sh 3d-polyline-extruded && bash ../docs.sh 3d-polyline-extruded && npm run build:vite --workspace=. && bash ../dist.sh 3d-polyline-extruded", + "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-polyline-extruded/style.css b/samples/3d-polyline-extruded/style.css new file mode 100644 index 00000000..5b6968df --- /dev/null +++ b/samples/3d-polyline-extruded/style.css @@ -0,0 +1,19 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_polyline_extruded] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_polyline_extruded] */ diff --git a/samples/3d-polyline-extruded/tsconfig.json b/samples/3d-polyline-extruded/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-polyline-extruded/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-polyline/index.html b/samples/3d-polyline/index.html new file mode 100644 index 00000000..b2d7559d --- /dev/null +++ b/samples/3d-polyline/index.html @@ -0,0 +1,23 @@ + + + + + + Map + + + + + +
+ + + + + + diff --git a/samples/3d-polyline/index.ts b/samples/3d-polyline/index.ts new file mode 100644 index 00000000..0e736568 --- /dev/null +++ b/samples/3d-polyline/index.ts @@ -0,0 +1,46 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_polyline] +let map; +async function init() { + const { Map3DElement, MapMode, AltitudeMode, Polyline3DElement } = await google.maps.importLibrary("maps3d"); + + map = new Map3DElement({ + center: { lat: 37.7927, lng : -122.4020, altitude: 65.93 }, range: 3362.87, tilt: 64.01 ,heading: 25.00, + mode: MapMode.SATELLITE, + }); + + document.body.append(map); + + const polyline = new Polyline3DElement({ + coordinates: [ + { lat: 37.80515638571346, lng: -122.4032569467164 }, + { lat: 37.80337073509504, lng: -122.4012878349353 }, + { lat: 37.79925208843463, lng: -122.3976697250461 }, + { lat: 37.7989102378512, lng: -122.3983408725656 }, + { lat: 37.79887832784348, lng: -122.3987094864192 }, + { lat: 37.79786443410338, lng: -122.4066878788802 }, + { lat: 37.79549248916587, lng: -122.4032992702785 }, + { lat: 37.78861484290265, lng: -122.4019489189814 }, + { lat: 37.78618687561075, lng: -122.398969592545 }, + { lat: 37.7892310309145, lng: -122.3951458683092 }, + { lat: 37.7916358762409, lng: -122.3981969390652 } + ], + strokeColor: 'blue', + outerColor: 'white', + strokeWidth: 10, + outerWidth: 0.4, + altitudeMode: AltitudeMode.RELATIVE_TO_GROUND, // Place it on the ground (as it has no altitude it will just be at ground height). + drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way. + }); + + map.append(polyline); +} + +init(); +// [END maps_3d_polyline] diff --git a/samples/3d-polyline/package.json b/samples/3d-polyline/package.json new file mode 100644 index 00000000..8f31c01e --- /dev/null +++ b/samples/3d-polyline/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-polyline", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-polyline && bash ../app.sh 3d-polyline && bash ../docs.sh 3d-polyline && npm run build:vite --workspace=. && bash ../dist.sh 3d-polyline", + "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-polyline/style.css b/samples/3d-polyline/style.css new file mode 100644 index 00000000..cd5e3276 --- /dev/null +++ b/samples/3d-polyline/style.css @@ -0,0 +1,19 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_polyline] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +map { + height: 100%; +} +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_polyline] */ diff --git a/samples/3d-polyline/tsconfig.json b/samples/3d-polyline/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-polyline/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-popover-location/index.html b/samples/3d-popover-location/index.html index 8be100d6..c6d86e90 100644 --- a/samples/3d-popover-location/index.html +++ b/samples/3d-popover-location/index.html @@ -1,4 +1,9 @@ + diff --git a/samples/3d-popover-location/index.ts b/samples/3d-popover-location/index.ts index 09d5e725..aa8c8e7b 100644 --- a/samples/3d-popover-location/index.ts +++ b/samples/3d-popover-location/index.ts @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ // @ts-nocheck diff --git a/samples/3d-popover-location/style.css b/samples/3d-popover-location/style.css index eb520847..0e4ebafb 100644 --- a/samples/3d-popover-location/style.css +++ b/samples/3d-popover-location/style.css @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ /* [START maps_3d_popover_location] */ /* * Always set the map height explicitly to define the size of the div element diff --git a/samples/3d-popover-marker/index.html b/samples/3d-popover-marker/index.html index 1e9dd6a1..89bdfa68 100644 --- a/samples/3d-popover-marker/index.html +++ b/samples/3d-popover-marker/index.html @@ -1,4 +1,9 @@ + diff --git a/samples/3d-popover-marker/index.ts b/samples/3d-popover-marker/index.ts index 612fbacf..18ef6383 100644 --- a/samples/3d-popover-marker/index.ts +++ b/samples/3d-popover-marker/index.ts @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ // @ts-nocheck diff --git a/samples/3d-popover-marker/style.css b/samples/3d-popover-marker/style.css index 46dd5cd4..18fccad3 100644 --- a/samples/3d-popover-marker/style.css +++ b/samples/3d-popover-marker/style.css @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ /* [START maps_3d_popover_marker] */ /* * Always set the map height explicitly to define the size of the div element diff --git a/samples/3d-simple-map-declarative/index.html b/samples/3d-simple-map-declarative/index.html new file mode 100644 index 00000000..bf89cc27 --- /dev/null +++ b/samples/3d-simple-map-declarative/index.html @@ -0,0 +1,20 @@ + + + + + + Map + + + + + + + + + diff --git a/samples/3d-simple-map-declarative/index.ts b/samples/3d-simple-map-declarative/index.ts new file mode 100644 index 00000000..ce09c184 --- /dev/null +++ b/samples/3d-simple-map-declarative/index.ts @@ -0,0 +1,10 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ + +// @ts-nocheck +// [START maps_3d_simple_map_declarative] + +// [END maps_3d_simple_map_declarative] diff --git a/samples/3d-simple-map-declarative/package.json b/samples/3d-simple-map-declarative/package.json new file mode 100644 index 00000000..02b1b949 --- /dev/null +++ b/samples/3d-simple-map-declarative/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-simple-map-declarative", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-simple-map-declarative && bash ../app.sh 3d-simple-map-declarative && bash ../docs.sh 3d-simple-map-declarative && npm run build:vite --workspace=. && bash ../dist.sh 3d-simple-map-declarative", + "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-declarative/style.css b/samples/3d-simple-map-declarative/style.css new file mode 100644 index 00000000..353cda34 --- /dev/null +++ b/samples/3d-simple-map-declarative/style.css @@ -0,0 +1,21 @@ +/* +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 +*/ +/* [START maps_3d_simple_map_declarative] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +gmp-map-3d { + height: 100%; +} + +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_simple_map_declarative] */ diff --git a/samples/3d-simple-map-declarative/tsconfig.json b/samples/3d-simple-map-declarative/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-simple-map-declarative/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 index d20c411f..b832ec15 100644 --- a/samples/3d-simple-map/index.html +++ b/samples/3d-simple-map/index.html @@ -1,4 +1,9 @@ + diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts index 64bcb3b6..d968476d 100644 --- a/samples/3d-simple-map/index.ts +++ b/samples/3d-simple-map/index.ts @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ //@ts-nocheck diff --git a/samples/3d-simple-map/style.css b/samples/3d-simple-map/style.css index 8305901e..7624a816 100644 --- a/samples/3d-simple-map/style.css +++ b/samples/3d-simple-map/style.css @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ /* [START maps_3d_simple_map] */ /* * Always set the map height explicitly to define the size of the div element diff --git a/samples/3d-simple-marker/index.html b/samples/3d-simple-marker/index.html index be64ed8e..089200d6 100644 --- a/samples/3d-simple-marker/index.html +++ b/samples/3d-simple-marker/index.html @@ -1,4 +1,9 @@ + diff --git a/samples/3d-simple-marker/index.ts b/samples/3d-simple-marker/index.ts index 8e9f2aca..bd0bdb0c 100644 --- a/samples/3d-simple-marker/index.ts +++ b/samples/3d-simple-marker/index.ts @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ //@ts-nocheck // [START maps_3d_simple_marker] diff --git a/samples/3d-simple-marker/style.css b/samples/3d-simple-marker/style.css index 72bfcd20..2b619d28 100644 --- a/samples/3d-simple-marker/style.css +++ b/samples/3d-simple-marker/style.css @@ -1,15 +1,7 @@ /* - * 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. +* @license +* Copyright 2025 Google LLC. All Rights Reserved. +* SPDX-License-Identifier: Apache-2.0 */ /* [START maps_3d_simple_marker] */ /* * Always set the map height explicitly to define the size of the div element