Skip to content

Commit d1c2024

Browse files
oppenheimeraoppenheimera
committed
Added additional 3d samples
1 parent 243c6db commit d1c2024

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+1840
-0
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎package-lock.json

Lines changed: 67 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/.DS_Store

4 KB
Binary file not shown.

‎samples/3d-camera-to-around/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<!-- [START maps_3d_camera_to_around] -->
3+
<html>
4+
<head>
5+
<title>Map</title>
6+
7+
<link rel="stylesheet" type="text/css" href="./style.css" />
8+
<script type="module" src="./index.js"></script>
9+
</head>
10+
<body>
11+
<div id="map"></div>
12+
13+
<!-- prettier-ignore -->
14+
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
15+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha",});</script>
16+
</body>
17+
</html>
18+
<!-- [END maps_3d_camera_to_around] -->

‎samples/3d-camera-to-around/index.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/*
2+
* Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
* * https://www.apache.org/licenses/LICENSE-2.0
8+
* * Unless required by applicable law or agreed to in writing, software
9+
* distributed under the License is distributed on an "AS IS" BASIS,
10+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
* See the License for the specific language governing permissions and
12+
* limitations under the License.
13+
*/
14+
15+
// @ts-nocheck
16+
// [START maps_3d_camera_to_around]
17+
async function init() {
18+
const { Map3DElement } = await google.maps.importLibrary("maps3d");
19+
20+
const map = new Map3DElement(
21+
{ center: { lat: 37.79810773998413, lng : -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272 ,heading: -56.047035719765596, }
22+
);
23+
24+
map.mode = "SATELLITE";
25+
26+
document.body.append(map);
27+
28+
// We will use this for foth the flying to function but also the location to fly around.
29+
const flyToCamera = {
30+
center: { lat: 21.263523536467105, lng : -157.80663691939296, altitude: 80.28936069489404 },
31+
range: 1500.8202963253427, tilt: 76.9173260789542 ,heading: -44.59196007522445,
32+
};
33+
34+
// Fly the camera from San Francisco to Hawaii, we could put this behind a button if we liked.
35+
map.flyCameraTo({
36+
// Where we are going to.
37+
endCamera: flyToCamera,
38+
// How long we want the flight to take.
39+
durationMillis: 30000,
40+
});
41+
42+
// When the animation has completed fly around the location.
43+
map.addEventListener('gmp-animationend', () => {
44+
map.flyCameraAround({
45+
// What we are flying around.
46+
camera: flyToCamera,
47+
// How long we want it to take.
48+
durationMillis: 50000,
49+
// How many time it should fly around in the time we specified.
50+
rounds: 1
51+
});
52+
}, {once: true}); // Stop after the flying around.
53+
54+
// At any time stop the animation.
55+
map3DElement.addEventListener('gmp-click', (event) => {
56+
map3DElement.stopCameraAnimation();
57+
});
58+
}
59+
60+
init();
61+
// [END maps_3d_camera_to_around]

‎samples/3d-camera-to-around/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "@js-api-samples/3d-camera-to-around",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"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",
6+
"test": "tsc && npm run build:vite --workspace=.",
7+
"start": "tsc && vite build --base './' && vite",
8+
"build:vite": "vite build --base './'",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
13+
}
14+
}

‎samples/3d-camera-to-around/style.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/*
2+
* Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
* * https://www.apache.org/licenses/LICENSE-2.0
8+
* * Unless required by applicable law or agreed to in writing, software
9+
* distributed under the License is distributed on an "AS IS" BASIS,
10+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
* See the License for the specific language governing permissions and
12+
* limitations under the License.
13+
*/
14+
/* [START maps_3d_camera_to_around] */
15+
/* * Always set the map height explicitly to define the size of the div element
16+
* that contains the map.
17+
*/
18+
html,
19+
map {
20+
height: 100%;
21+
}
22+
body {
23+
height: 100%;
24+
margin: 0;
25+
padding: 0;
26+
}
27+
/* [END maps_3d_camera_to_around] */

‎samples/3d-camera-to-around/tsconfig.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"target": "esnext",
5+
"strict": true,
6+
"noImplicitAny": false,
7+
"lib": [
8+
"es2015",
9+
"esnext",
10+
"es6",
11+
"dom",
12+
"dom.iterable"
13+
],
14+
"moduleResolution": "Node",
15+
"jsx": "preserve"
16+
}
17+
}

‎samples/3d-label-toggle/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<!-- [START maps_3d_label_toggle] -->
3+
<html>
4+
<head>
5+
<title>Map</title>
6+
7+
<link rel="stylesheet" type="text/css" href="./style.css" />
8+
<script type="module" src="./index.js"></script>
9+
</head>
10+
<body>
11+
<div id="map"></div>
12+
13+
<button class="toggleButton" id="toggleButton">Labels are off. (SATELLITE)</button>
14+
15+
<!-- prettier-ignore -->
16+
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
17+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha",});</script>
18+
</body>
19+
</html>
20+
<!-- [END maps_3d_label_toggle] -->

‎samples/3d-label-toggle/index.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
* Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
* * https://www.apache.org/licenses/LICENSE-2.0
8+
* * Unless required by applicable law or agreed to in writing, software
9+
* distributed under the License is distributed on an "AS IS" BASIS,
10+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
* See the License for the specific language governing permissions and
12+
* limitations under the License.
13+
*/
14+
15+
// @ts-nocheck
16+
// [START maps_3d_label_toggle]
17+
let map;
18+
async function init() {
19+
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
20+
21+
map = new Map3DElement(
22+
{ center: { lat: 37.79810773998413, lng: -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, }
23+
);
24+
25+
map.mode = MapMode.SATELLITE;
26+
27+
document.body.append(map);
28+
29+
const locationCamera = {
30+
center: { lat: 21.263523536467105, lng: -157.80663691939296, altitude: 80.28936069489404 },
31+
range: 1500.8202963253427, tilt: 76.9173260789542, heading: -44.59196007522445,
32+
};
33+
34+
// Get the button element by its ID
35+
const toggleButton = document.getElementById('toggleButton');
36+
toggleButton.addEventListener('click', function () {
37+
// Toggle the labels.
38+
if (map.mode == MapMode.SATELLITE) {
39+
// Setting the map mode to HYBRID turns the labels on.
40+
map.mode = MapMode.HYBRID;
41+
document.getElementById('toggleButton').innerText = "Labels are on. (HYBRID)";
42+
} else {
43+
// Setting the map mode to SATELLITE turns the labels on.
44+
map.mode = MapMode.SATELLITE;
45+
document.getElementById('toggleButton').innerText = "Labels are off. (SATELLITE)";
46+
}
47+
});
48+
}
49+
50+
init();
51+
// [END maps_3d_label_toggle]

‎samples/3d-label-toggle/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "@js-api-samples/3d-label-toggle",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"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",
6+
"test": "tsc && npm run build:vite --workspace=.",
7+
"start": "tsc && vite build --base './' && vite",
8+
"build:vite": "vite build --base './'",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
13+
}
14+
}

‎samples/3d-label-toggle/style.css

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/*
2+
* Copyright 2025 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
* * https://www.apache.org/licenses/LICENSE-2.0
8+
* * Unless required by applicable law or agreed to in writing, software
9+
* distributed under the License is distributed on an "AS IS" BASIS,
10+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
* See the License for the specific language governing permissions and
12+
* limitations under the License.
13+
*/
14+
/* [START maps_3d_label_toggle] */
15+
/* * Always set the map height explicitly to define the size of the div element
16+
* that contains the map.
17+
*/
18+
html,
19+
map {
20+
height: 100%;
21+
}
22+
body {
23+
height: 100%;
24+
margin: 0;
25+
padding: 0;
26+
}
27+
.toggleButton {
28+
background: rgb(235, 235, 235);
29+
color: black;
30+
border: none;
31+
padding: 10px 20px;
32+
text-align: center;
33+
text-decoration: none;
34+
display: inline-block;
35+
font-size: 16px;
36+
border-radius: 4px;
37+
cursor: pointer;
38+
position: fixed;
39+
bottom: 10px;
40+
left: 50%;
41+
transform: translateX(-50%);
42+
z-index: 1000;
43+
}
44+
45+
.toggleButton:hover {
46+
background-color: #007bff;
47+
color: white;
48+
}
49+
/* [END maps_3d_label_toggle] */

‎samples/3d-label-toggle/tsconfig.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"target": "esnext",
5+
"strict": true,
6+
"noImplicitAny": false,
7+
"lib": [
8+
"es2015",
9+
"esnext",
10+
"es6",
11+
"dom",
12+
"dom.iterable"
13+
],
14+
"moduleResolution": "Node",
15+
"jsx": "preserve"
16+
}
17+
}

0 commit comments

Comments
 (0)