diff --git a/samples/.DS_Store b/samples/.DS_Store index 1483b8b0..3d3bc3e9 100644 Binary files a/samples/.DS_Store and b/samples/.DS_Store differ diff --git a/samples/3d-marker-customization/index.html b/samples/3d-marker-customization/index.html new file mode 100644 index 00000000..46b6918b --- /dev/null +++ b/samples/3d-marker-customization/index.html @@ -0,0 +1,15 @@ + + + + Map + + + + + +
+ + + + diff --git a/samples/3d-marker-customization/index.ts b/samples/3d-marker-customization/index.ts new file mode 100644 index 00000000..1bbb13a7 --- /dev/null +++ b/samples/3d-marker-customization/index.ts @@ -0,0 +1,108 @@ +/* + * 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 maps_3d_marker_customization] +async function init() { + const { Map3DElement, Marker3DElement } = await google.maps.importLibrary("maps3d"); + const { PinElement } = await google.maps.importLibrary("marker"); + + const map = new Map3DElement({ + center: { lat: 37.4176, lng: -122.02, altitude: 0 }, + tilt: 67.5, + range: 7000, + mode: 'HYBRID' + }); + + map.mode = "SATELLITE"; + + // Change the border color. + const pinBorder = new PinElement({ + borderColor: '#FFFFFF', + }); + const markerWithBorder = new Marker3DElement({ + position: { lat: 37.415, lng: -122.035 }, + }); + markerWithBorder.append(pinBorder); + + // Add a label. + const markerWithLabel = new Marker3DElement({ + position: { lat: 37.419, lng: -122.03 }, + label: 'Simple label' + }); + + // Adjust the scale. + const pinScaled = new PinElement({ + scale: 1.5, + }); + const markerWithScale = new Marker3DElement({ + position: { lat: 37.419, lng: -122.02 }, + }); + markerWithScale.append(pinScaled); + + // Change the glyph color. + const pinGlyph = new PinElement({ + glyphColor: 'white', + }); + const markerWithGlyphColor = new Marker3DElement({ + position: { lat: 37.415, lng: -122.025 }, + }); + markerWithGlyphColor.append(pinGlyph); + + // Change many elements together and extrude marker. + const pinTextGlyph = new PinElement({ + background: '#F0F6FC', + glyph: 'E', + glyphColor: 'red', + borderColor: '#0000FF', + }); + const markerWithGlyphText = new Marker3DElement({ + position: { lat: 37.415, lng: -122.015, altitude: 50 }, + extruded: true, + altitudeMode: "RELATIVE_TO_GROUND", + }); + markerWithGlyphText.append(pinTextGlyph); + + // Hide the glyph. + const pinNoGlyph = new PinElement({ + glyph: '', + }); + const markerWithNoGlyph = new Marker3DElement({ + position: { lat: 37.415, lng: -122.005 }, + }); + markerWithNoGlyph.append(pinNoGlyph); + + // Change the background color. + const pinBackground = new PinElement({ + background: '#FBBC04', + }); + + const markerWithBackground = new Marker3DElement({ + position: { lat: 37.419, lng: -122.01 }, + }); + markerWithBackground.append(pinBackground); + + map.append(markerWithLabel); + map.append(markerWithScale); + map.append(markerWithBackground); + map.append(markerWithBorder); + map.append(markerWithGlyphColor); + map.append(markerWithGlyphText); + map.append(markerWithNoGlyph); + + document.body.append(map); +} + +init(); +// [END maps_3d_marker_customization] diff --git a/samples/3d-marker-customization/package.json b/samples/3d-marker-customization/package.json new file mode 100644 index 00000000..a9e09938 --- /dev/null +++ b/samples/3d-marker-customization/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-marker-customization", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-marker-customization && bash ../app.sh 3d-marker-customization && bash ../docs.sh 3d-marker-customization && npm run build:vite --workspace=. && bash ../dist.sh 3d-marker-customization", + "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-customization/style.css b/samples/3d-marker-customization/style.css new file mode 100644 index 00000000..11426034 --- /dev/null +++ b/samples/3d-marker-customization/style.css @@ -0,0 +1,27 @@ +/* + * 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 maps_3d_marker_customization] */ +/* * 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_customization] */ diff --git a/samples/3d-marker-customization/tsconfig.json b/samples/3d-marker-customization/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-marker-customization/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 new file mode 100644 index 00000000..6454e633 --- /dev/null +++ b/samples/3d-places/index.html @@ -0,0 +1,23 @@ + + + + Map + + + + + +
+ + +
+
+
+
+
+
+
Click on a place to get details.
+
+ + diff --git a/samples/3d-places/index.ts b/samples/3d-places/index.ts new file mode 100644 index 00000000..94ee72d0 --- /dev/null +++ b/samples/3d-places/index.ts @@ -0,0 +1,50 @@ +/* + * 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 maps_3d_places] +let map3DElement = null; +async function init() { + const { Map3DElement } = await google.maps.importLibrary("maps3d"); + { } + map3DElement = new Map3DElement({ + center: { lat: 51.532, lng : -0.124, altitude: 30 }, + range: 1400, + tilt: 64, + heading: -5, + mode: 'HYBRID' + }); + + document.body.append(map3DElement); + + map3DElement.addEventListener('gmp-click', async (event) => { + if (event.placeId) { + const place = await event.fetchPlace(); + await place.fetchFields({ fields: ['*'] }); + + // Display place details. + document.getElementById("placeName").innerHTML = "Name :
 " + place.displayName; + document.getElementById("placeId").innerHTML = "Id :
 " + place.id; + document.getElementById("placeType").innerHTML = "Types :"; + + for (const type of place.types) { + document.getElementById("placeType").innerHTML += "
 " + type ; + } + + document.getElementById("details").style.display = "block"; + } + }); + +} +init(); +// [END maps_3d_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..5d0831cc --- /dev/null +++ b/samples/3d-places/style.css @@ -0,0 +1,55 @@ +/* + * 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 maps_3d_places] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; + font-family: "Centra No2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9em; +} + +.textContainer { + background-color: #4d90fe; + margin: 10px; + overflow: hidden; + position: absolute; + left: 50%; + top: 10px; + border: 1px solid white; + border-radius: 10px; + padding: 5px; + z-index: 1000; + color: white; +} + +.detailsContainer { + background-color: #00000078; + margin: 10px; + overflow: hidden; + position: absolute; + top: 100px; + left : 10px; + padding: 10px; + z-index: 1000; + display:none; + color: white; + border-radius: 15px; +} + +/* [END maps_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-popover-location/index.html b/samples/3d-popover-location/index.html new file mode 100644 index 00000000..46b6918b --- /dev/null +++ b/samples/3d-popover-location/index.html @@ -0,0 +1,15 @@ + + + + Map + + + + + +
+ + + + diff --git a/samples/3d-popover-location/index.ts b/samples/3d-popover-location/index.ts new file mode 100644 index 00000000..09d5e725 --- /dev/null +++ b/samples/3d-popover-location/index.ts @@ -0,0 +1,40 @@ +/* + * 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 maps_3d_popover_location] +async function init() { +const { AltitudeMode, Map3DElement, MapMode, PopoverElement } = await google.maps.importLibrary("maps3d"); + +const map = new Map3DElement({ + center: { lat: 37.8204, lng : -122.4783, altitude: 0.407 }, range: 4000, tilt: 74 ,heading: 38, + mode: MapMode.HYBRID, +}); + +const popover = new PopoverElement({ + altitudeMode: AltitudeMode.ABSOLUTE, + open: true, + positionAnchor: { lat: 37.819852, lng: -122.478549, altitude: 150 }, +}); + +popover.append('Golden Gate Bridge'); + +map.append(popover); + +document.body.append(map); + +} + +init(); +// [END maps_3d_popover_location] diff --git a/samples/3d-popover-location/package.json b/samples/3d-popover-location/package.json new file mode 100644 index 00000000..fec69c71 --- /dev/null +++ b/samples/3d-popover-location/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-popover-location", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-popover-location && bash ../app.sh 3d-popover-location && bash ../docs.sh 3d-popover-location && npm run build:vite --workspace=. && bash ../dist.sh 3d-popover-location", + "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-popover-location/style.css b/samples/3d-popover-location/style.css new file mode 100644 index 00000000..eb520847 --- /dev/null +++ b/samples/3d-popover-location/style.css @@ -0,0 +1,27 @@ +/* + * 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 maps_3d_popover_location] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +map { + height: 100%; +} +/* [END maps_3d_popover_location] */ diff --git a/samples/3d-popover-location/tsconfig.json b/samples/3d-popover-location/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-popover-location/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-marker/index.html b/samples/3d-popover-marker/index.html new file mode 100644 index 00000000..46b6918b --- /dev/null +++ b/samples/3d-popover-marker/index.html @@ -0,0 +1,15 @@ + + + + Map + + + + + +
+ + + + diff --git a/samples/3d-popover-marker/index.ts b/samples/3d-popover-marker/index.ts new file mode 100644 index 00000000..612fbacf --- /dev/null +++ b/samples/3d-popover-marker/index.ts @@ -0,0 +1,51 @@ +/* + * 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 maps_3d_popover_marker] +async function init() { + const { AltitudeMode, Map3DElement, Marker3DInteractiveElement, MapMode, PopoverElement } = await google.maps.importLibrary("maps3d"); + + const map = new Map3DElement({ + center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 }, range: 4000, tilt: 74, heading: 38, + mode: MapMode.HYBRID, + }); + + // Popovers can only be added to interactive Markers + const interactiveMarker = new Marker3DInteractiveElement({ + altitudeMode: AltitudeMode.ABSOLUTE, + position: { lat: 37.819852, lng: -122.478549, altitude: 100 } + }); + + const popover = new PopoverElement({ + open: false, + positionAnchor: interactiveMarker, + }); + + popover.append('Golden Gate Bridge'); + + interactiveMarker.addEventListener('gmp-click', (event) => { + // toggle the marker to the other state (unlee you are clicking on the marker itself when it reopens it) + popover.open = !popover.open; + }); + + map.append(interactiveMarker); + map.append(popover); + + document.body.append(map); + +} + +init(); +// [END maps_3d_popover_marker] diff --git a/samples/3d-popover-marker/package.json b/samples/3d-popover-marker/package.json new file mode 100644 index 00000000..ba1fb565 --- /dev/null +++ b/samples/3d-popover-marker/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-popover-marker", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-popover-marker && bash ../app.sh 3d-popover-marker && bash ../docs.sh 3d-popover-marker && npm run build:vite --workspace=. && bash ../dist.sh 3d-popover-marker", + "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-popover-marker/style.css b/samples/3d-popover-marker/style.css new file mode 100644 index 00000000..46dd5cd4 --- /dev/null +++ b/samples/3d-popover-marker/style.css @@ -0,0 +1,27 @@ +/* + * 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 maps_3d_popover_marker] */ +/* * 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_popover_marker] */ diff --git a/samples/3d-popover-marker/tsconfig.json b/samples/3d-popover-marker/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-popover-marker/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..64bcb3b6 --- /dev/null +++ b/samples/3d-simple-map/index.ts @@ -0,0 +1,30 @@ +/* + * 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 maps_3d_simple_map] +async function initMap() { + const { Map3DElement } = await google.maps.importLibrary("maps3d"); + + const map = new Map3DElement({ + center: { lat: 37.7704, lng: -122.3985, altitude: 500 }, + tilt: 67.5, + mode: 'HYBRID' + }); + + document.body.append(map); +} + +initMap(); +// [END maps_3d_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..8305901e --- /dev/null +++ b/samples/3d-simple-map/style.css @@ -0,0 +1,27 @@ +/* + * 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 maps_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%; +} +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_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" + } +} diff --git a/samples/3d-simple-marker/index.html b/samples/3d-simple-marker/index.html new file mode 100644 index 00000000..46b6918b --- /dev/null +++ b/samples/3d-simple-marker/index.html @@ -0,0 +1,15 @@ + + + + Map + + + + + +
+ + + + diff --git a/samples/3d-simple-marker/index.ts b/samples/3d-simple-marker/index.ts new file mode 100644 index 00000000..8e9f2aca --- /dev/null +++ b/samples/3d-simple-marker/index.ts @@ -0,0 +1,39 @@ +/* + * 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 maps_3d_simple_marker] +async function init() { + // Make sure the Marker3DElement is included. + const { Map3DElement, Marker3DElement } = await google.maps.importLibrary("maps3d"); + + const map = new Map3DElement({ + center: { lat: 37.4239163, lng: -122.0947209, altitude: 0 }, + tilt: 67.5, + range: 1000, + mode: 'SATELLITE' + }); + + const marker = new Marker3DElement({ + position: { lat: 37.4239163, lng: -122.0947209, altitude: 50 }, // (Required) Marker must have a lat / lng, but do not need an altitude. + altitudeMode : "ABSOLUTE", // (Optional) Treated as CLAMP_TO_GROUND if omitted. + extruded : true, // (Optional) Draws line from ground to the bottom of the marker. + label : "Basic Marker" // (Optional) Add a label to the marker. + }); + + map.append(marker); // The marker needs to be appended to the map. + document.body.append(map); +} + +init(); +// [END maps_3d_simple_marker] diff --git a/samples/3d-simple-marker/package.json b/samples/3d-simple-marker/package.json new file mode 100644 index 00000000..f6f413eb --- /dev/null +++ b/samples/3d-simple-marker/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/3d-simple-marker", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh 3d-simple-marker && bash ../app.sh 3d-simple-marker && bash ../docs.sh 3d-simple-marker && npm run build:vite --workspace=. && bash ../dist.sh 3d-simple-marker", + "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-marker/style.css b/samples/3d-simple-marker/style.css new file mode 100644 index 00000000..72bfcd20 --- /dev/null +++ b/samples/3d-simple-marker/style.css @@ -0,0 +1,24 @@ +/* + * 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 maps_3d_simple_marker] */ +/* * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} +/* [END maps_3d_simple_marker] */ diff --git a/samples/3d-simple-marker/tsconfig.json b/samples/3d-simple-marker/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/3d-simple-marker/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" + } +}