Added region tags to 3D samples

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.

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;
     }
 }
 

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,13 +31,15 @@ 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({
         position: { lat: 37.419, lng: -122.03 },
         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);
 }

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,13 +49,15 @@ async function init() {
         altitudeMode: 'ABSOLUTE',
     });
     glyphSvgMarker.append(glyphSvgPinElement);
+    // [END maps_3d_marker_graphics_glyph]
 
     try {
         map.append(glyphSvgMarker);
     } catch (error) {
         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);
 }

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);

samples/3d-mesh-flatten/index.html

@@ -19,14 +19,17 @@
         </script>
     </head>
     <body>
+        <!-- [START maps_3d_mesh_flatten_snippet] -->
         <gmp-map-3d
             center="40.70304023274898,-73.99453903360259,397.3687221767566"
             heading="-54.63577922139952"
             tilt="65.59195953953744"
             mode="SATELLITE">
             <gmp-flattener
-                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"></gmp-flattener>
+                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">
+            </gmp-flattener>
         </gmp-map-3d>
+        <!-- [END maps_3d_mesh_flatten_snippet] -->
 
         <button class="toggleButton" id="toggleButton" type="button">
             Disable Flattener