Skip to content

Commit dfec2c4

Browse files
oppenheimerawillum070
oppenheimera
and
willum070
authored
Added region tags to 3D samples (#1458)
* Added region tags to 3D samples * updated region tags * 'prettier' formatting fixes * prettier fix in interactive sample * fix region tag styling and unneccessary boolean * fix region tag styling and unneccessary boolean --------- Co-authored-by: William French <wfrench@google.com>
1 parent 2b8b5af commit dfec2c4

6 files changed

Lines changed: 41 additions & 4 deletions

File tree

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,19 @@ async function init() {
3737
};
3838

3939
// Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively.
40+
// [START maps_3d_camera_to_around_flyto]
4041
map.flyCameraTo({
4142
// Where we are going to.
4243
endCamera: flyToCamera,
4344
// How long we want the flight to take.
4445
durationMillis: 30000,
4546
});
46-
47+
// [END maps_3d_camera_to_around_flyto]
4748
// When the animation has completed, fly around the location.
4849
map.addEventListener(
4950
'gmp-animationend',
5051
() => {
52+
// [START maps_3d_camera_to_around_flyaround]
5153
map.flyCameraAround({
5254
// Location to fly around.
5355
camera: flyToCamera,
@@ -56,6 +58,7 @@ async function init() {
5658
// Number of rotations to make in the specified time.
5759
repeatCount: 1,
5860
});
61+
// [END maps_3d_camera_to_around_flyaround]
5962
},
6063
{ once: true }
6164
); // Stop animation after flying around.

‎samples/3d-marker-collision-behavior/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,13 @@ async function init() {
2020
});
2121

2222
for (const [lng, lat] of positions) {
23+
// [START maps_3d_marker_collision_behavior_setbehavior]
2324
const marker = new Marker3DElement({
2425
position: { lat, lng },
2526
// Try setting a different collision behavior here.
2627
collisionBehavior: 'REQUIRED',
2728
});
29+
// [END maps_3d_marker_collision_behavior_setbehavior]
2830

2931
markers.push(marker);
3032
map.append(marker);
@@ -59,7 +61,7 @@ dropdown.addEventListener('change', drawMap);
5961
function drawMap() {
6062
for (const marker of markers) {
6163
marker.collisionBehavior =
62-
(dropdown.value as google.maps.CollisionBehavior) || 'REQUIRED';
64+
dropdown.value as google.maps.CollisionBehavior;
6365
}
6466
}
6567

‎samples/3d-marker-customization/index.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ async function init() {
2222

2323
map.mode = 'SATELLITE';
2424

25+
// [START maps_3d_marker_customization_pin_border]
2526
// Change the border color.
2627
const pinBorder = new PinElement({
2728
borderColor: '#FFFFFF',
@@ -30,13 +31,15 @@ async function init() {
3031
position: { lat: 37.415, lng: -122.035 },
3132
});
3233
markerWithBorder.append(pinBorder);
34+
// [END maps_3d_marker_customization_pin_border]
3335

3436
// Add a label.
3537
const markerWithLabel = new Marker3DElement({
3638
position: { lat: 37.419, lng: -122.03 },
3739
label: 'Simple label',
3840
});
3941

42+
// [START maps_3d_marker_customization_scale]
4043
// Adjust the scale.
4144
const pinScaled = new PinElement({
4245
scale: 1.5,
@@ -45,7 +48,9 @@ async function init() {
4548
position: { lat: 37.419, lng: -122.02 },
4649
});
4750
markerWithScale.append(pinScaled);
51+
// [END maps_3d_marker_customization_scale]
4852

53+
// [START maps_3d_marker_customization_glyph_color]
4954
// Change the glyph color.
5055
const pinGlyph = new PinElement({
5156
glyphColor: 'white',
@@ -54,7 +59,9 @@ async function init() {
5459
position: { lat: 37.415, lng: -122.025 },
5560
});
5661
markerWithGlyphColor.append(pinGlyph);
62+
// [END maps_3d_marker_customization_glyph_color]
5763

64+
// [START maps_3d_marker_customization_glyph_text]
5865
// Change many elements together and extrude marker.
5966
const pinTextGlyph = new PinElement({
6067
background: '#F0F6FC',
@@ -68,6 +75,16 @@ async function init() {
6875
altitudeMode: 'RELATIVE_TO_GROUND',
6976
});
7077
markerWithGlyphText.append(pinTextGlyph);
78+
// [END maps_3d_marker_customization_glyph_text]
79+
80+
// [START maps_3d_marker_customization_extruded]
81+
// Change a marker's altitude and add an extrusion.
82+
const extrudedMarker = new Marker3DElement({
83+
position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
84+
altitudeMode: 'RELATIVE_TO_GROUND',
85+
extruded: true,
86+
});
87+
// [END maps_3d_marker_customization_extruded]
7188

7289
// Hide the glyph.
7390
const pinNoGlyph = new PinElement({
@@ -77,7 +94,7 @@ async function init() {
7794
position: { lat: 37.415, lng: -122.005 },
7895
});
7996
markerWithNoGlyph.append(pinNoGlyph);
80-
97+
// [START maps_3d_marker_customization_background]
8198
// Change the background color.
8299
const pinBackground = new PinElement({
83100
background: '#FBBC04',
@@ -87,6 +104,7 @@ async function init() {
87104
position: { lat: 37.419, lng: -122.01 },
88105
});
89106
markerWithBackground.append(pinBackground);
107+
// [END maps_3d_marker_customization_background]
90108

91109
map.append(markerWithLabel);
92110
map.append(markerWithScale);
@@ -95,6 +113,7 @@ async function init() {
95113
map.append(markerWithGlyphColor);
96114
map.append(markerWithGlyphText);
97115
map.append(markerWithNoGlyph);
116+
map.append(extrudedMarker);
98117

99118
document.body.append(map);
100119
}

‎samples/3d-marker-graphics/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ async function init() {
2121
gestureHandling: 'COOPERATIVE',
2222
});
2323

24+
// [START maps_3d_marker_graphics_png]
2425
// A marker with a with a URL pointing to a PNG.
2526
const beachFlagImg = document.createElement('img');
2627
beachFlagImg.src = String(new URL('images/beachflag.png', import.meta.url));
@@ -33,7 +34,9 @@ async function init() {
3334
beachFlagMarker.append(templateForImg);
3435

3536
map.append(beachFlagMarker);
37+
// [END maps_3d_marker_graphics_png]
3638

39+
// [START maps_3d_marker_graphics_glyph]
3740
// A marker with a custom SVG glyph and white background.
3841
const glyphImgUrl = new URL('images/192px.svg', import.meta.url);
3942
const glyphSvgPinElement = new PinElement({
@@ -46,13 +49,15 @@ async function init() {
4649
altitudeMode: 'ABSOLUTE',
4750
});
4851
glyphSvgMarker.append(glyphSvgPinElement);
52+
// [END maps_3d_marker_graphics_glyph]
4953

5054
try {
5155
map.append(glyphSvgMarker);
5256
} catch (error) {
5357
console.error(error);
5458
}
5559

60+
// [START maps_3d_marker_graphics_place]
5661
// A marker customized using a place icon and color, name, and geometry.
5762
const place = new Place({
5863
id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
@@ -78,7 +83,9 @@ async function init() {
7883
placeIconMarker.append(pinElement);
7984

8085
map.append(placeIconMarker);
86+
// [END maps_3d_marker_graphics_place]
8187

88+
// [START maps_3d_marker_graphics_svg]
8289
// Used to parse the SVG string.
8390
const parser = new DOMParser();
8491

@@ -100,6 +107,7 @@ async function init() {
100107
markerWithCustomSvg.append(templateForSvg);
101108

102109
map.append(markerWithCustomSvg);
110+
// [END maps_3d_marker_graphics_svg]
103111

104112
document.body.append(map);
105113
}

‎samples/3d-marker-interactive/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,12 @@ async function init() {
2727

2828
popover.append(position.name);
2929

30+
// [START maps_3d_marker_interactive_interaction]
3031
const interactiveMarker = new Marker3DInteractiveElement({
3132
position,
3233
gmpPopoverTargetElement: popover,
3334
});
35+
// [END maps_3d_marker_interactive_interaction]
3436

3537
map.append(interactiveMarker);
3638
map.append(popover);

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,17 @@
1919
</script>
2020
</head>
2121
<body>
22+
<!-- [START maps_3d_mesh_flatten_snippet] -->
2223
<gmp-map-3d
2324
center="40.70304023274898,-73.99453903360259,397.3687221767566"
2425
heading="-54.63577922139952"
2526
tilt="65.59195953953744"
2627
mode="SATELLITE">
2728
<gmp-flattener
28-
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>
29+
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">
30+
</gmp-flattener>
2931
</gmp-map-3d>
32+
<!-- [END maps_3d_mesh_flatten_snippet] -->
3033

3134
<button class="toggleButton" id="toggleButton" type="button">
3235
Disable Flattener

0 commit comments

Comments
 (0)