-
Click on a marker to get the name of the Google Office.
-
-
Navigate to a place
-
-
-
-
+
diff --git a/samples/3d-places-autocomplete/index.ts b/samples/3d-places-autocomplete/index.ts
index 70675f41..2ae62225 100644
--- a/samples/3d-places-autocomplete/index.ts
+++ b/samples/3d-places-autocomplete/index.ts
@@ -1,15 +1,15 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
// @ts-nocheck
// [START maps_3d_places_autocomplete]
-let map = null;
+let map = null
async function init() {
- const { Map3DElement } = await google.maps.importLibrary("maps3d");
+ const { Map3DElement } = await google.maps.importLibrary('maps3d')
map = new Map3DElement({
center: { lat: 0, lng: 0, altitude: 16000000 },
@@ -17,81 +17,100 @@ async function init() {
range: 0,
heading: 0,
roll: 0,
- mode: 'HYBRID'
- });
+ mode: 'HYBRID',
+ })
- document.body.append(map);
+ document.body.append(map)
- initAutocomplete();
+ 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;
+ 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)
}
- flyToPlace(place);
- });
+ )
}
const flyToPlace = async (place) => {
- const { AltitudeMode, Polyline3DElement, Polygon3DElement, Marker3DElement } = await google.maps.importLibrary("maps3d");
+ const {
+ AltitudeMode,
+ Polyline3DElement,
+ Polygon3DElement,
+ Marker3DElement,
+ } = await google.maps.importLibrary('maps3d')
- const location = place.location;
+ 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 elevation = await getElevationforPoint(location)
const marker = new Marker3DElement({
- position: { lat: location.lat(), lng: location.lng(), altitude: elevation + 50 },
+ position: {
+ lat: location.lat(),
+ lng: location.lng(),
+ altitude: elevation + 50,
+ },
altitudeMode: AltitudeMode.ABSOLUTE,
extruded: true,
label: place.displayName,
- });
+ })
// Add the marker.
- map.append(marker);
+ map.append(marker)
// Fly to the marker.
map.flyCameraTo({
endCamera: {
- center: { lat: location.lat(), lng: location.lng(), altitude: elevation + 50 },
+ center: {
+ lat: location.lat(),
+ lng: location.lng(),
+ altitude: elevation + 50,
+ },
tilt: 65,
heading: 0,
- range: 1000
+ range: 1000,
},
durationMillis: 10000,
- });
-};
+ })
+}
async function getElevationforPoint(location) {
- const { ElevationService } = await google.maps.importLibrary("elevation");
+ const { ElevationService } = await google.maps.importLibrary('elevation')
// Get place elevation using the ElevationService.
- const elevatorService = new google.maps.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;
+ window.alert(`Insufficient elevation data for place: ${place.name}`)
+ return
}
- const elevation = elevationResponse.results[0].elevation || 10;
+ const elevation = elevationResponse.results[0].elevation || 10
- return elevation;
+ return elevation
}
-init();
+init()
// [END maps_3d_places_autocomplete]
diff --git a/samples/3d-places-autocomplete/style.css b/samples/3d-places-autocomplete/style.css
index 785b9f19..e1965f66 100644
--- a/samples/3d-places-autocomplete/style.css
+++ b/samples/3d-places-autocomplete/style.css
@@ -9,12 +9,12 @@
*/
html,
map {
- height: 100%;
+ height: 100%;
}
body {
- height: 100%;
- margin: 0;
- padding: 0;
+ height: 100%;
+ margin: 0;
+ padding: 0;
}
.pac-controls {
display: inline-block;
@@ -34,7 +34,10 @@ body {
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;
+ font:
+ 400 18px Roboto,
+ Arial,
+ sans-serif;
/* overflow: hidden; */
font-family: Roboto;
padding: 0;
diff --git a/samples/3d-places/index.html b/samples/3d-places/index.html
index 1f39e940..549e9e87 100644
--- a/samples/3d-places/index.html
+++ b/samples/3d-places/index.html
@@ -6,26 +6,26 @@
-->
-
-
Map
+
+
Map
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
Click on a place to get details.
-
-
+
+
+
Click on a place to get details.
+
+
diff --git a/samples/3d-places/index.ts b/samples/3d-places/index.ts
index 75a69754..886c06a2 100644
--- a/samples/3d-places/index.ts
+++ b/samples/3d-places/index.ts
@@ -1,43 +1,46 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
//@ts-nocheck
// [START maps_3d_places]
-let map3DElement = null;
+let map3DElement = null
async function init() {
- const { Map3DElement } = await google.maps.importLibrary("maps3d");
- { }
+ const { Map3DElement } = await google.maps.importLibrary('maps3d')
+ {
+ }
map3DElement = new Map3DElement({
- center: { lat: 51.532, lng : -0.124, altitude: 30 },
- range: 1400,
+ center: { lat: 51.532, lng: -0.124, altitude: 30 },
+ range: 1400,
tilt: 64,
heading: -5,
- mode: 'HYBRID'
- });
+ mode: 'HYBRID',
+ })
- document.body.append(map3DElement);
+ document.body.append(map3DElement)
map3DElement.addEventListener('gmp-click', async (event) => {
- event.preventDefault();
+ event.preventDefault()
if (event.placeId) {
- const place = await event.fetchPlace();
- await place.fetchFields({ fields: ['*'] });
+ 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 :";
-
+ 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('placeType').innerHTML +=
+ '
' + type
}
- document.getElementById("details").style.display = "block";
+ document.getElementById('details').style.display = 'block'
}
- });
-
+ })
}
-init();
+init()
// [END maps_3d_places]
diff --git a/samples/3d-places/style.css b/samples/3d-places/style.css
index 85bfe863..072544cb 100644
--- a/samples/3d-places/style.css
+++ b/samples/3d-places/style.css
@@ -12,7 +12,15 @@ body {
height: 100%;
margin: 0;
padding: 0;
- font-family: "Centra No2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ font-family:
+ 'Centra No2',
+ -apple-system,
+ BlinkMacSystemFont,
+ 'Segoe UI',
+ Roboto,
+ 'Helvetica Neue',
+ Arial,
+ sans-serif;
font-size: 0.9em;
}
@@ -36,10 +44,10 @@ body {
overflow: hidden;
position: absolute;
top: 100px;
- left : 10px;
+ left: 10px;
padding: 10px;
z-index: 1000;
- display:none;
+ display: none;
color: white;
border-radius: 15px;
}
diff --git a/samples/3d-polygon-click-event/index.html b/samples/3d-polygon-click-event/index.html
index 0383e4f4..8146aa5d 100644
--- a/samples/3d-polygon-click-event/index.html
+++ b/samples/3d-polygon-click-event/index.html
@@ -6,18 +6,18 @@
-->
-
- Map
+
+ Map
-
-
-
-
-
+
+
+
+
+
-
-
-
+
diff --git a/samples/3d-polygon-click-event/index.ts b/samples/3d-polygon-click-event/index.ts
index 849bed12..a81cb559 100644
--- a/samples/3d-polygon-click-event/index.ts
+++ b/samples/3d-polygon-click-event/index.ts
@@ -1,69 +1,72 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @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 { 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);
+ document.body.append(map)
const polygonOptions = {
- strokeColor: "#0000ff80",
+ strokeColor: '#0000ff80',
strokeWidth: 8,
- fillColor: "#ff000080",
+ fillColor: '#ff000080',
drawsOccludedSegments: false,
}
- const examplePolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);
+ const examplePolygon = new google.maps.maps3d.Polygon3DInteractiveElement(
+ polygonOptions
+ )
examplePolygon.path = [
{ lat: 40.7144, lng: -74.0208 },
{ lat: 40.6993, lng: -74.019 },
{ lat: 40.7035, lng: -74.0004 },
- { lat: 40.7144, lng: -74.0208 }
- ];
+ { 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);
- });
+ event.target.fillColor = randomizeHexColor(event.target.fillColor)
+ event.target.strokeColor = randomizeHexColor(event.target.fillColor)
+ console.log(event)
+ })
- map.append(examplePolygon);
+ map.append(examplePolygon)
}
function randomizeHexColor(originalHexColor) {
- console.log(originalHexColor);
- let alpha = '';
- alpha = originalHexColor.substring(7);
+ 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);
+ 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);
+ 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);
+ 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}`;
+ return `#${rHex}${gHex}${bHex}${alpha}`
}
-init();
+init()
// [END maps_3d_polygon_click_event]
diff --git a/samples/3d-polygon-click-event/style.css b/samples/3d-polygon-click-event/style.css
index f0bba123..2a89f955 100644
--- a/samples/3d-polygon-click-event/style.css
+++ b/samples/3d-polygon-click-event/style.css
@@ -9,11 +9,11 @@
*/
html,
map {
- height: 100%;
+ height: 100%;
}
body {
- height: 100%;
- margin: 0;
- padding: 0;
+ height: 100%;
+ margin: 0;
+ padding: 0;
}
/* [END maps_3d_polygon_click_event] */
diff --git a/samples/3d-polygon-extruded-hole/index.html b/samples/3d-polygon-extruded-hole/index.html
index d7a6cd6f..e034bda2 100644
--- a/samples/3d-polygon-extruded-hole/index.html
+++ b/samples/3d-polygon-extruded-hole/index.html
@@ -6,18 +6,18 @@
-->
-
- Map
+
+ Map
-
-
-
-
-
+
+
+
+
+
-
-
-
+
diff --git a/samples/3d-polygon-extruded-hole/index.ts b/samples/3d-polygon-extruded-hole/index.ts
index 53c1c6bf..30c4d54e 100644
--- a/samples/3d-polygon-extruded-hole/index.ts
+++ b/samples/3d-polygon-extruded-hole/index.ts
@@ -1,50 +1,53 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @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, 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",
+ strokeColor: '#0000ff80',
strokeWidth: 8,
- fillColor: "#ff000080",
+ fillColor: '#ff000080',
drawsOccludedSegments: false,
extruded: true,
- altitudeMode : AltitudeMode.RELATIVE_TO_GROUND
+ altitudeMode: AltitudeMode.RELATIVE_TO_GROUND,
}
- const examplePolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
+ const examplePolygon = new google.maps.maps3d.Polygon3DElement(
+ polygonOptions
+ )
examplePolygon.path = [
{ 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.7035, lng: -74.0004, altitude: 200 },
+ ]
examplePolygon.innerPaths = [
[
{ 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.7035, lng: -74.006, altitude: 200 },
+ ],
+ ]
- map3DElement.append(examplePolygon);
+ map3DElement.append(examplePolygon)
- document.body.append(map3DElement);
+ document.body.append(map3DElement)
}
-init();
+init()
// [END maps_3d_polygon_extruded_hole]
diff --git a/samples/3d-polygon-extruded-hole/style.css b/samples/3d-polygon-extruded-hole/style.css
index 81dc8ef9..2fbbb162 100644
--- a/samples/3d-polygon-extruded-hole/style.css
+++ b/samples/3d-polygon-extruded-hole/style.css
@@ -9,11 +9,11 @@
*/
html,
map {
- height: 100%;
+ height: 100%;
}
body {
- height: 100%;
- margin: 0;
- padding: 0;
+ height: 100%;
+ margin: 0;
+ padding: 0;
}
/* [END maps_3d_polygon_extruded_hole] */
diff --git a/samples/3d-polygon/index.html b/samples/3d-polygon/index.html
index 511cf4f6..197a98d0 100644
--- a/samples/3d-polygon/index.html
+++ b/samples/3d-polygon/index.html
@@ -6,18 +6,18 @@
-->
-
- Map
+
+ Map
-
-
-
-
-
+
+
+
+
+
-
-
-
+
diff --git a/samples/3d-polygon/index.ts b/samples/3d-polygon/index.ts
index ef63c38d..e4d01f2c 100644
--- a/samples/3d-polygon/index.ts
+++ b/samples/3d-polygon/index.ts
@@ -1,40 +1,43 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @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, 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",
+ strokeColor: '#0000ff80',
strokeWidth: 8,
- fillColor: "#ff000080",
+ fillColor: '#ff000080',
drawsOccludedSegments: false,
}
- const examplePolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
+ const examplePolygon = new google.maps.maps3d.Polygon3DElement(
+ polygonOptions
+ )
examplePolygon.path = [
{ lat: 40.7144, lng: -74.0208 },
{ lat: 40.6993, lng: -74.019 },
- { lat: 40.7035, lng: -74.0004 }
- ];
+ { lat: 40.7035, lng: -74.0004 },
+ ]
- map3DElement.append(examplePolygon);
+ map3DElement.append(examplePolygon)
- document.body.append(map3DElement);
+ document.body.append(map3DElement)
}
-init();
+init()
// [END maps_3d_polygon]
diff --git a/samples/3d-polygon/style.css b/samples/3d-polygon/style.css
index 04901599..53f5c208 100644
--- a/samples/3d-polygon/style.css
+++ b/samples/3d-polygon/style.css
@@ -9,11 +9,11 @@
*/
html,
map {
- height: 100%;
+ height: 100%;
}
body {
- height: 100%;
- margin: 0;
- padding: 0;
+ height: 100%;
+ margin: 0;
+ padding: 0;
}
/* [END maps_3d_polygon] */
diff --git a/samples/3d-polyline-click-event/index.html b/samples/3d-polyline-click-event/index.html
index 6da0ceb9..3e7daf08 100644
--- a/samples/3d-polyline-click-event/index.html
+++ b/samples/3d-polyline-click-event/index.html
@@ -6,18 +6,18 @@
-->
-
- Map
+
+ Map
-
-
-
-
-
+
+
+
+
+
-
-
-
+
diff --git a/samples/3d-polyline-click-event/index.ts b/samples/3d-polyline-click-event/index.ts
index d018216e..095d0b0c 100644
--- a/samples/3d-polyline-click-event/index.ts
+++ b/samples/3d-polyline-click-event/index.ts
@@ -1,21 +1,29 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
// @ts-nocheck
// [START maps_3d_polyline_click_event]
-let map;
+let map
async function init() {
- const { Map3DElement, MapMode, AltitudeMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");
+ 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,
+ map = new Map3DElement({
+ center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
+ range: 3362.87,
+ tilt: 64.01,
+ heading: 25.0,
mode: MapMode.SATELLITE,
- });
+ })
- document.body.append(map);
+ document.body.append(map)
const polyline = new Polyline3DInteractiveElement({
coordinates: [
@@ -29,23 +37,23 @@ async function init() {
{ lat: 37.78861484290265, lng: -122.4019489189814 },
{ lat: 37.78618687561075, lng: -122.398969592545 },
{ lat: 37.7892310309145, lng: -122.3951458683092 },
- { lat: 37.7916358762409, lng: -122.3981969390652 }
- ],
+ { 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;
- });
+ event.target.drawsOccludedSegments = !event.target.drawsOccludedSegments
+ })
- map.append(polyline);
+ map.append(polyline)
}
-init();
+init()
// [END maps_3d_polyline_click_event]
diff --git a/samples/3d-polyline-click-event/style.css b/samples/3d-polyline-click-event/style.css
index f64defcf..92a3fb4e 100644
--- a/samples/3d-polyline-click-event/style.css
+++ b/samples/3d-polyline-click-event/style.css
@@ -9,11 +9,11 @@
*/
html,
map {
- height: 100%;
+ height: 100%;
}
body {
- height: 100%;
- margin: 0;
- padding: 0;
+ height: 100%;
+ margin: 0;
+ padding: 0;
}
/* [END maps_3d_polyline_click_event] */
diff --git a/samples/3d-polyline-extruded/index.html b/samples/3d-polyline-extruded/index.html
index 0004b5b2..a5eac517 100644
--- a/samples/3d-polyline-extruded/index.html
+++ b/samples/3d-polyline-extruded/index.html
@@ -6,18 +6,18 @@
-->
-
- Map
+
+ Map
-
-
-
-
-
+
+
+
+
+
-
-
-
+
diff --git a/samples/3d-polyline-extruded/index.ts b/samples/3d-polyline-extruded/index.ts
index 72cdd184..cc913498 100644
--- a/samples/3d-polyline-extruded/index.ts
+++ b/samples/3d-polyline-extruded/index.ts
@@ -1,21 +1,25 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
// @ts-nocheck
// [START maps_3d_polyline_extruded]
-let map;
+let map
async function init() {
- const { Map3DElement, MapMode, AltitudeMode, Polyline3DElement } = await google.maps.importLibrary("maps3d");
+ 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,
+ center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
+ range: 3362.87,
+ tilt: 64.01,
+ heading: 25.0,
mode: MapMode.SATELLITE,
- });
+ })
- document.body.append(map);
+ document.body.append(map)
const polyline = new Polyline3DElement({
path: [
@@ -29,16 +33,16 @@ async function init() {
{ 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 }
+ { 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
- });
+ extruded: true,
+ })
- map.append(polyline);
+ map.append(polyline)
}
-init();
+init()
// [END maps_3d_polyline_extruded]
diff --git a/samples/3d-polyline-extruded/style.css b/samples/3d-polyline-extruded/style.css
index 5b6968df..d3cc2546 100644
--- a/samples/3d-polyline-extruded/style.css
+++ b/samples/3d-polyline-extruded/style.css
@@ -9,11 +9,11 @@
*/
html,
map {
- height: 100%;
+ height: 100%;
}
body {
- height: 100%;
- margin: 0;
- padding: 0;
+ height: 100%;
+ margin: 0;
+ padding: 0;
}
/* [END maps_3d_polyline_extruded] */
diff --git a/samples/3d-polyline/index.html b/samples/3d-polyline/index.html
index 5674d881..5fc5862e 100644
--- a/samples/3d-polyline/index.html
+++ b/samples/3d-polyline/index.html
@@ -6,18 +6,18 @@
-->
-
- Map
+
+ Map
-
-
-
-
-
+
+
+
+
+
-
-
-
+
diff --git a/samples/3d-polyline/index.ts b/samples/3d-polyline/index.ts
index af4a9e34..8fbc9622 100644
--- a/samples/3d-polyline/index.ts
+++ b/samples/3d-polyline/index.ts
@@ -1,21 +1,25 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
// @ts-nocheck
// [START maps_3d_polyline]
-let map;
+let map
async function init() {
- const { Map3DElement, MapMode, AltitudeMode, Polyline3DElement } = await google.maps.importLibrary("maps3d");
+ 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,
+ map = new Map3DElement({
+ center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
+ range: 3362.87,
+ tilt: 64.01,
+ heading: 25.0,
mode: MapMode.SATELLITE,
- });
+ })
- document.body.append(map);
+ document.body.append(map)
const polyline = new Polyline3DElement({
path: [
@@ -29,18 +33,18 @@ async function init() {
{ lat: 37.78861484290265, lng: -122.4019489189814 },
{ lat: 37.78618687561075, lng: -122.398969592545 },
{ lat: 37.7892310309145, lng: -122.3951458683092 },
- { lat: 37.7916358762409, lng: -122.3981969390652 }
- ],
+ { 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);
+ map.append(polyline)
}
-init();
+init()
// [END maps_3d_polyline]
diff --git a/samples/3d-polyline/style.css b/samples/3d-polyline/style.css
index cd5e3276..47f5a48f 100644
--- a/samples/3d-polyline/style.css
+++ b/samples/3d-polyline/style.css
@@ -9,11 +9,11 @@
*/
html,
map {
- height: 100%;
+ height: 100%;
}
body {
- height: 100%;
- margin: 0;
- padding: 0;
+ height: 100%;
+ margin: 0;
+ padding: 0;
}
/* [END maps_3d_polyline] */
diff --git a/samples/3d-popover-location/index.html b/samples/3d-popover-location/index.html
index abde9e26..2f8b27f4 100644
--- a/samples/3d-popover-location/index.html
+++ b/samples/3d-popover-location/index.html
@@ -6,18 +6,18 @@
-->
-
- Map
+
+ Map
-
-
-
-
-
+
+
+
+
+
-
-
-
+
-
\ No newline at end of file
+
diff --git a/samples/3d-popover-location/index.ts b/samples/3d-popover-location/index.ts
index aa8c8e7b..9b09f4b3 100644
--- a/samples/3d-popover-location/index.ts
+++ b/samples/3d-popover-location/index.ts
@@ -1,32 +1,35 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
// @ts-nocheck
// [START maps_3d_popover_location]
async function init() {
-const { AltitudeMode, Map3DElement, MapMode, PopoverElement } = await google.maps.importLibrary("maps3d");
+ 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 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 },
-});
+ const popover = new PopoverElement({
+ altitudeMode: AltitudeMode.ABSOLUTE,
+ open: true,
+ positionAnchor: { lat: 37.819852, lng: -122.478549, altitude: 150 },
+ })
-popover.append('Golden Gate Bridge');
+ popover.append('Golden Gate Bridge')
-map.append(popover);
-
-document.body.append(map);
+ map.append(popover)
+ document.body.append(map)
}
-init();
+init()
// [END maps_3d_popover_location]
diff --git a/samples/3d-popover-location/style.css b/samples/3d-popover-location/style.css
index 0e4ebafb..894fb328 100644
--- a/samples/3d-popover-location/style.css
+++ b/samples/3d-popover-location/style.css
@@ -14,6 +14,6 @@ body {
padding: 0;
}
map {
- height: 100%;
+ height: 100%;
}
/* [END maps_3d_popover_location] */
diff --git a/samples/3d-popover-marker/index.html b/samples/3d-popover-marker/index.html
index 653e3f0a..6e94f07d 100644
--- a/samples/3d-popover-marker/index.html
+++ b/samples/3d-popover-marker/index.html
@@ -6,18 +6,18 @@
-->
-
- Map
+
+ Map
-
-
-
-
-
+
+
+
+
+
-
-
-
+
-
\ No newline at end of file
+
diff --git a/samples/3d-popover-marker/index.ts b/samples/3d-popover-marker/index.ts
index 18ef6383..e59b81c0 100644
--- a/samples/3d-popover-marker/index.ts
+++ b/samples/3d-popover-marker/index.ts
@@ -1,43 +1,51 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
// @ts-nocheck
// [START maps_3d_popover_marker]
async function init() {
- const { AltitudeMode, Map3DElement, Marker3DInteractiveElement, MapMode, PopoverElement } = await google.maps.importLibrary("maps3d");
+ 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,
+ 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 }
- });
+ position: { lat: 37.819852, lng: -122.478549, altitude: 100 },
+ })
const popover = new PopoverElement({
open: false,
positionAnchor: interactiveMarker,
- });
+ })
- popover.append('Golden Gate Bridge');
+ 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;
- });
+ popover.open = !popover.open
+ })
- map.append(interactiveMarker);
- map.append(popover);
-
- document.body.append(map);
+ map.append(interactiveMarker)
+ map.append(popover)
+ document.body.append(map)
}
-init();
+init()
// [END maps_3d_popover_marker]
diff --git a/samples/3d-popover-marker/style.css b/samples/3d-popover-marker/style.css
index 18fccad3..59461c24 100644
--- a/samples/3d-popover-marker/style.css
+++ b/samples/3d-popover-marker/style.css
@@ -9,7 +9,7 @@
*/
html,
map {
- height: 100%;
+ height: 100%;
}
body {
height: 100%;
diff --git a/samples/3d-simple-map-declarative/index.html b/samples/3d-simple-map-declarative/index.html
index bf89cc27..528f2077 100644
--- a/samples/3d-simple-map-declarative/index.html
+++ b/samples/3d-simple-map-declarative/index.html
@@ -6,15 +6,21 @@
-->
-
- Map
-
-
-
-
+
+ Map
+
+
+
+
-
-
+
+
diff --git a/samples/3d-simple-map-declarative/index.ts b/samples/3d-simple-map-declarative/index.ts
index ce09c184..aa62c7ce 100644
--- a/samples/3d-simple-map-declarative/index.ts
+++ b/samples/3d-simple-map-declarative/index.ts
@@ -1,8 +1,8 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
// @ts-nocheck
// [START maps_3d_simple_map_declarative]
diff --git a/samples/3d-simple-map/index.html b/samples/3d-simple-map/index.html
index ace75ec5..1c9e371b 100644
--- a/samples/3d-simple-map/index.html
+++ b/samples/3d-simple-map/index.html
@@ -6,17 +6,16 @@
-->
-
- Simple Map
+
+ Simple Map
-
-
-
-
-
-
-
+
+
+
+
-
+
diff --git a/samples/3d-simple-map/index.ts b/samples/3d-simple-map/index.ts
index d968476d..3e4ed8ca 100644
--- a/samples/3d-simple-map/index.ts
+++ b/samples/3d-simple-map/index.ts
@@ -1,22 +1,22 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
//@ts-nocheck
// [START maps_3d_simple_map]
async function initMap() {
- const { Map3DElement } = await google.maps.importLibrary("maps3d");
+ 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'
- });
+ mode: 'HYBRID',
+ })
- document.body.append(map);
+ document.body.append(map)
}
-initMap();
+initMap()
// [END maps_3d_simple_map]
diff --git a/samples/3d-simple-map/style.css b/samples/3d-simple-map/style.css
index 7624a816..db29d516 100644
--- a/samples/3d-simple-map/style.css
+++ b/samples/3d-simple-map/style.css
@@ -8,7 +8,7 @@
* that contains the map.
*/
#gmp-map-3d {
- height: 100%;
+ height: 100%;
}
html,
body {
diff --git a/samples/3d-simple-marker/index.html b/samples/3d-simple-marker/index.html
index f57f3e23..b082ff87 100644
--- a/samples/3d-simple-marker/index.html
+++ b/samples/3d-simple-marker/index.html
@@ -6,18 +6,18 @@
-->
-
- Map
+
+ Map
-
-
-
-
-
+
+
+
+
+
-
-
-
+
diff --git a/samples/3d-simple-marker/index.ts b/samples/3d-simple-marker/index.ts
index ed01fe1e..2ad6f500 100644
--- a/samples/3d-simple-marker/index.ts
+++ b/samples/3d-simple-marker/index.ts
@@ -1,31 +1,32 @@
/*
-* @license
-* Copyright 2025 Google LLC. All Rights Reserved.
-* SPDX-License-Identifier: Apache-2.0
-*/
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
//@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 { 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'
- });
-
+ mode: 'SATELLITE',
+ })
+
const marker = new Marker3DElement({
position: { lat: 37.4239163, lng: -122.0947209, altitude: 50 }, // (Required) Marker must have a lat / lng, but doesn't 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.
- });
+ 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 must be appended to the map.
- document.body.append(map);
+ map.append(marker) // The marker must be appended to the map.
+ document.body.append(map)
}
-init();
+init()
// [END maps_3d_simple_marker]
diff --git a/samples/add-map/index.html b/samples/add-map/index.html
index d7835b23..f2ab99c9 100644
--- a/samples/add-map/index.html
+++ b/samples/add-map/index.html
@@ -4,24 +4,24 @@
Copyright 2025 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
-
+
-
- Add a Map
+
+ Add a Map
-
-
-
-
-
- My Google Maps Demo
-
-
-
-
-
-
+
+
+
+ My Google Maps Demo
+
+
+
+
+
+
-
+
-
\ No newline at end of file
+
diff --git a/samples/add-map/index.ts b/samples/add-map/index.ts
index 5549814c..22a4a0db 100644
--- a/samples/add-map/index.ts
+++ b/samples/add-map/index.ts
@@ -6,30 +6,32 @@
// [START maps_add_map]
// Initialize and add the map.
-let map;
+let map
async function initMap(): Promise {
- // [START maps_add_map_instantiate_map]
- // The location of Uluru, Australia.
- const position = {lat: -25.344, lng: 131.031};
+ // [START maps_add_map_instantiate_map]
+ // The location of Uluru, Australia.
+ const position = { lat: -25.344, lng: 131.031 }
- // Request the needed libraries.
- const {Map} =
- await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
- const {AdvancedMarkerElement} =
- await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;
+ // Request the needed libraries.
+ const { Map } = (await google.maps.importLibrary(
+ 'maps'
+ )) as google.maps.MapsLibrary
+ const { AdvancedMarkerElement } = (await google.maps.importLibrary(
+ 'marker'
+ )) as google.maps.MarkerLibrary
- // The map, centered at Uluru, Australia.
- map = new Map(document.getElementById('map') as HTMLElement, {
- zoom: 4,
- center: position,
- mapId: 'DEMO_MAP_ID',
- });
- // [END maps_add_map_instantiate_map]
+ // The map, centered at Uluru, Australia.
+ map = new Map(document.getElementById('map') as HTMLElement, {
+ zoom: 4,
+ center: position,
+ mapId: 'DEMO_MAP_ID',
+ })
+ // [END maps_add_map_instantiate_map]
- // [START maps_add_map_instantiate_marker]
- // The marker, positioned at Uluru.
- const marker = new AdvancedMarkerElement({map, position, title: 'Uluru'});
- // [END maps_add_map_instantiate_marker]
+ // [START maps_add_map_instantiate_marker]
+ // The marker, positioned at Uluru.
+ const marker = new AdvancedMarkerElement({ map, position, title: 'Uluru' })
+ // [END maps_add_map_instantiate_marker]
}
-initMap();
+initMap()
// [END maps_add_map]
diff --git a/samples/add-map/style.css b/samples/add-map/style.css
index 561a4b33..313e5966 100644
--- a/samples/add-map/style.css
+++ b/samples/add-map/style.css
@@ -4,22 +4,21 @@
* SPDX-License-Identifier: Apache-2.0
*/
/* [START maps_add_map] */
- /*
+/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
- #map {
+#map {
height: 100%;
- }
-
- /*
+}
+
+/*
* Optional: Makes the sample page fill the window.
*/
- html,
- body {
+html,
+body {
height: 100%;
margin: 0;
padding: 0;
- }
- /* [END maps_add_map] */
-
\ No newline at end of file
+}
+/* [END maps_add_map] */
diff --git a/samples/address-validation/index.html b/samples/address-validation/index.html
index 366386db..eb30e123 100644
--- a/samples/address-validation/index.html
+++ b/samples/address-validation/index.html
@@ -4,132 +4,186 @@
Copyright 2025 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
-
+
-
- Address Validation
+
+ Address Validation
-
-
-
-
-
-