Skip to content

Commit b9c18eb

Browse files
anglarettanglarett
authored
feat: add 3d-map-roadmap sample (#1279)
1 parent e1556b2 commit b9c18eb

6 files changed

Lines changed: 201 additions & 0 deletions

File tree

‎samples/3d-map-roadmap/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Google Maps JavaScript Sample
2+
3+
## 3d-map-roadmap
4+
5+
Set the map mode to roadmap and see the 3d map as abstract.
6+
7+
## Setup
8+
9+
### Before starting run:
10+
11+
`npm i`
12+
13+
### Run an example on a local web server
14+
15+
`cd samples/3d-map-roadmap`
16+
`npm start`
17+
18+
### Build an individual example
19+
20+
`cd samples/3d-map-roadmap`
21+
`npm run build`
22+
23+
From 'samples':
24+
25+
`npm run build --workspace=3d-map-roadmap/`
26+
27+
### Build all of the examples.
28+
29+
From 'samples':
30+
31+
`npm run build-all`
32+
33+
### Run lint to check for problems
34+
35+
`cd samples/3d-map-roadmap`
36+
`npx eslint index.ts`
37+
38+
## Feedback
39+
40+
For feedback related to this sample, please open a new issue on
41+
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).

‎samples/3d-map-roadmap/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2026 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START maps_3d_map_roadmap] -->
8+
<html>
9+
10+
<head>
11+
<title>3d-map-roadmap</title>
12+
13+
<link rel="stylesheet" type="text/css" href="./style.css" />
14+
<script type="module" src="./index.js"></script>
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+
</head>
19+
20+
<body>
21+
</body>
22+
23+
</html>
24+
<!-- [END maps_3d_map_roadmap] -->

‎samples/3d-map-roadmap/index.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
* @license
3+
* Copyright 2026 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
//@ts-nocheck
8+
// [START maps_3d_map_roadmap]
9+
async function init() {
10+
const { Map3DElement } = await google.maps.importLibrary('maps3d');
11+
12+
const map = new Map3DElement({
13+
center: {
14+
lat: 37.79334535092104,
15+
lng: -122.400742086205,
16+
altitude: 0,
17+
},
18+
range: 2400,
19+
tilt: 65,
20+
heading: 0,
21+
mode: 'ROADMAP',
22+
internalUsageAttributionIds: ['gmp_git_jsapisamples_v1_3d-rendering'],
23+
});
24+
25+
document.body.append(map);
26+
27+
// Create the controls container
28+
const controls = document.createElement('div');
29+
controls.id = 'controls';
30+
controls.classList.add('map-mode-control');
31+
32+
// Create the select element
33+
const selector = document.createElement('select');
34+
selector.id = 'map-mode';
35+
36+
const modes = ['ROADMAP', 'SATELLITE', 'HYBRID'];
37+
modes.forEach((modeName) => {
38+
const option = document.createElement('option');
39+
option.value = modeName;
40+
option.textContent = modeName;
41+
if (modeName === 'ROADMAP') {
42+
option.selected = true;
43+
}
44+
selector.appendChild(option);
45+
});
46+
47+
selector.addEventListener('change', (event) => {
48+
map.mode = (event.target as HTMLSelectElement).value;
49+
});
50+
51+
controls.appendChild(selector);
52+
document.body.appendChild(controls);
53+
}
54+
55+
init();
56+
// [END maps_3d_map_roadmap]

‎samples/3d-map-roadmap/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "@js-api-samples/3d-map-roadmap",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"build": "tsc && bash ../jsfiddle.sh 3d-map-roadmap && bash ../app.sh 3d-map-roadmap && bash ../docs.sh 3d-map-roadmap && npm run build:vite --workspace=. && bash ../dist.sh 3d-map-roadmap",
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+
}

‎samples/3d-map-roadmap/style.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/*
2+
* @license
3+
* Copyright 2026 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
/* [START maps_3d_map_roadmap] */
8+
9+
html,
10+
body {
11+
height: 100%;
12+
margin: 0;
13+
padding: 0;
14+
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
15+
}
16+
17+
gmp-map-3d {
18+
height: 100%;
19+
width: 100%;
20+
}
21+
22+
.map-mode-control {
23+
position: fixed;
24+
bottom: 24px;
25+
right: 75px;
26+
display: flex;
27+
align-items: center;
28+
background-color: rgba(255, 255, 255, 0.9);
29+
padding: 8px;
30+
border-radius: 8px;
31+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
32+
backdrop-filter: blur(8px);
33+
z-index: 1;
34+
}
35+
36+
.map-mode-control select {
37+
font-size: 13px;
38+
padding: 4px 8px;
39+
border: 1px solid #dadce0;
40+
border-radius: 6px;
41+
background-color: white;
42+
color: #3c4043;
43+
cursor: pointer;
44+
outline: none;
45+
transition: border-color 0.2s, box-shadow 0.2s;
46+
}
47+
48+
.map-mode-control select:hover {
49+
border-color: #1a73e8;
50+
}
51+
52+
.map-mode-control select:focus {
53+
border-color: #1a73e8;
54+
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
55+
}
56+
57+
/* [END maps_3d_map_roadmap] */

‎samples/3d-map-roadmap/tsconfig.json‎

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

0 commit comments

Comments
 (0)