diff --git a/samples/3d-camera-to-around/index.ts b/samples/3d-camera-to-around/index.ts
index 806e36cb1..57341ee76 100644
--- a/samples/3d-camera-to-around/index.ts
+++ b/samples/3d-camera-to-around/index.ts
@@ -37,17 +37,19 @@ async function init() {
};
// Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively.
+ // [START maps_3d_camera_to_around_flyto]
map.flyCameraTo({
// Where we are going to.
endCamera: flyToCamera,
// How long we want the flight to take.
durationMillis: 30000,
});
-
+ // [END maps_3d_camera_to_around_flyto]
// When the animation has completed, fly around the location.
map.addEventListener(
'gmp-animationend',
() => {
+ // [START maps_3d_camera_to_around_flyaround]
map.flyCameraAround({
// Location to fly around.
camera: flyToCamera,
@@ -56,6 +58,7 @@ async function init() {
// Number of rotations to make in the specified time.
repeatCount: 1,
});
+ // [END maps_3d_camera_to_around_flyaround]
},
{ once: true }
); // Stop animation after flying around.
diff --git a/samples/3d-marker-collision-behavior/index.ts b/samples/3d-marker-collision-behavior/index.ts
index 4e427639f..d0646c157 100644
--- a/samples/3d-marker-collision-behavior/index.ts
+++ b/samples/3d-marker-collision-behavior/index.ts
@@ -20,11 +20,13 @@ async function init() {
});
for (const [lng, lat] of positions) {
+ // [START maps_3d_marker_collision_behavior_setbehavior]
const marker = new Marker3DElement({
position: { lat, lng },
// Try setting a different collision behavior here.
collisionBehavior: 'REQUIRED',
});
+ // [END maps_3d_marker_collision_behavior_setbehavior]
markers.push(marker);
map.append(marker);
@@ -59,7 +61,7 @@ dropdown.addEventListener('change', drawMap);
function drawMap() {
for (const marker of markers) {
marker.collisionBehavior =
- (dropdown.value as google.maps.CollisionBehavior) || 'REQUIRED';
+ dropdown.value as google.maps.CollisionBehavior;
}
}
diff --git a/samples/3d-marker-customization/index.ts b/samples/3d-marker-customization/index.ts
index 78283100c..2dbbec290 100644
--- a/samples/3d-marker-customization/index.ts
+++ b/samples/3d-marker-customization/index.ts
@@ -22,6 +22,7 @@ async function init() {
map.mode = 'SATELLITE';
+ // [START maps_3d_marker_customization_pin_border]
// Change the border color.
const pinBorder = new PinElement({
borderColor: '#FFFFFF',
@@ -30,6 +31,7 @@ async function init() {
position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);
+ // [END maps_3d_marker_customization_pin_border]
// Add a label.
const markerWithLabel = new Marker3DElement({
@@ -37,6 +39,7 @@ async function init() {
label: 'Simple label',
});
+ // [START maps_3d_marker_customization_scale]
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
@@ -45,7 +48,9 @@ async function init() {
position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);
+ // [END maps_3d_marker_customization_scale]
+ // [START maps_3d_marker_customization_glyph_color]
// Change the glyph color.
const pinGlyph = new PinElement({
glyphColor: 'white',
@@ -54,7 +59,9 @@ async function init() {
position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);
+ // [END maps_3d_marker_customization_glyph_color]
+ // [START maps_3d_marker_customization_glyph_text]
// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
background: '#F0F6FC',
@@ -68,6 +75,16 @@ async function init() {
altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);
+ // [END maps_3d_marker_customization_glyph_text]
+
+ // [START maps_3d_marker_customization_extruded]
+ // Change a marker's altitude and add an extrusion.
+ const extrudedMarker = new Marker3DElement({
+ position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
+ altitudeMode: 'RELATIVE_TO_GROUND',
+ extruded: true,
+ });
+ // [END maps_3d_marker_customization_extruded]
// Hide the glyph.
const pinNoGlyph = new PinElement({
@@ -77,7 +94,7 @@ async function init() {
position: { lat: 37.415, lng: -122.005 },
});
markerWithNoGlyph.append(pinNoGlyph);
-
+ // [START maps_3d_marker_customization_background]
// Change the background color.
const pinBackground = new PinElement({
background: '#FBBC04',
@@ -87,6 +104,7 @@ async function init() {
position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);
+ // [END maps_3d_marker_customization_background]
map.append(markerWithLabel);
map.append(markerWithScale);
@@ -95,6 +113,7 @@ async function init() {
map.append(markerWithGlyphColor);
map.append(markerWithGlyphText);
map.append(markerWithNoGlyph);
+ map.append(extrudedMarker);
document.body.append(map);
}
diff --git a/samples/3d-marker-graphics/index.ts b/samples/3d-marker-graphics/index.ts
index f33697d50..4aba123d8 100644
--- a/samples/3d-marker-graphics/index.ts
+++ b/samples/3d-marker-graphics/index.ts
@@ -21,6 +21,7 @@ async function init() {
gestureHandling: 'COOPERATIVE',
});
+ // [START maps_3d_marker_graphics_png]
// A marker with a with a URL pointing to a PNG.
const beachFlagImg = document.createElement('img');
beachFlagImg.src = String(new URL('images/beachflag.png', import.meta.url));
@@ -33,7 +34,9 @@ async function init() {
beachFlagMarker.append(templateForImg);
map.append(beachFlagMarker);
+ // [END maps_3d_marker_graphics_png]
+ // [START maps_3d_marker_graphics_glyph]
// A marker with a custom SVG glyph and white background.
const glyphImgUrl = new URL('images/192px.svg', import.meta.url);
const glyphSvgPinElement = new PinElement({
@@ -46,6 +49,7 @@ async function init() {
altitudeMode: 'ABSOLUTE',
});
glyphSvgMarker.append(glyphSvgPinElement);
+ // [END maps_3d_marker_graphics_glyph]
try {
map.append(glyphSvgMarker);
@@ -53,6 +57,7 @@ async function init() {
console.error(error);
}
+ // [START maps_3d_marker_graphics_place]
// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
@@ -78,7 +83,9 @@ async function init() {
placeIconMarker.append(pinElement);
map.append(placeIconMarker);
+ // [END maps_3d_marker_graphics_place]
+ // [START maps_3d_marker_graphics_svg]
// Used to parse the SVG string.
const parser = new DOMParser();
@@ -100,6 +107,7 @@ async function init() {
markerWithCustomSvg.append(templateForSvg);
map.append(markerWithCustomSvg);
+ // [END maps_3d_marker_graphics_svg]
document.body.append(map);
}
diff --git a/samples/3d-marker-interactive/index.ts b/samples/3d-marker-interactive/index.ts
index 827c32aa1..e5e096642 100644
--- a/samples/3d-marker-interactive/index.ts
+++ b/samples/3d-marker-interactive/index.ts
@@ -27,10 +27,12 @@ async function init() {
popover.append(position.name);
+ // [START maps_3d_marker_interactive_interaction]
const interactiveMarker = new Marker3DInteractiveElement({
position,
gmpPopoverTargetElement: popover,
});
+ // [END maps_3d_marker_interactive_interaction]
map.append(interactiveMarker);
map.append(popover);
diff --git a/samples/3d-mesh-flatten/index.html b/samples/3d-mesh-flatten/index.html
index 05ca51a28..340abb122 100644
--- a/samples/3d-mesh-flatten/index.html
+++ b/samples/3d-mesh-flatten/index.html
@@ -19,14 +19,17 @@
+
+ path="40.707680607935245,-74.00310353377735,500 40.70829665151717,-74.00193595590612,500 40.7073748659931,-74.00122787224885,500 40.706738652153156,-74.00232125268805,500 40.70738164589913,-74.0028721484274,500">
+
+