diff --git a/dist/samples/3d-camera-to-around/app/index.ts b/dist/samples/3d-camera-to-around/app/index.ts
index 806e36cb1..57341ee76 100644
--- a/dist/samples/3d-camera-to-around/app/index.ts
+++ b/dist/samples/3d-camera-to-around/app/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/dist/samples/3d-camera-to-around/docs/index.js b/dist/samples/3d-camera-to-around/docs/index.js
index 2c7bcaf67..8629236eb 100644
--- a/dist/samples/3d-camera-to-around/docs/index.js
+++ b/dist/samples/3d-camera-to-around/docs/index.js
@@ -38,17 +38,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,
@@ -57,6 +59,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/dist/samples/3d-camera-to-around/docs/index.ts b/dist/samples/3d-camera-to-around/docs/index.ts
index 806e36cb1..57341ee76 100644
--- a/dist/samples/3d-camera-to-around/docs/index.ts
+++ b/dist/samples/3d-camera-to-around/docs/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/dist/samples/3d-camera-to-around/jsfiddle/demo.js b/dist/samples/3d-camera-to-around/jsfiddle/demo.js
index a6110a178..53971a3a0 100644
--- a/dist/samples/3d-camera-to-around/jsfiddle/demo.js
+++ b/dist/samples/3d-camera-to-around/jsfiddle/demo.js
@@ -37,6 +37,7 @@ async function init() {
};
// Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively.
+
map.flyCameraTo({
// Where we are going to.
endCamera: flyToCamera,
diff --git a/dist/samples/3d-marker-collision-behavior/app/index.ts b/dist/samples/3d-marker-collision-behavior/app/index.ts
index 4e427639f..d0646c157 100644
--- a/dist/samples/3d-marker-collision-behavior/app/index.ts
+++ b/dist/samples/3d-marker-collision-behavior/app/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/dist/samples/3d-marker-collision-behavior/dist/assets/index-Bksae6wd.js b/dist/samples/3d-marker-collision-behavior/dist/assets/index-DdMMonGb.js
similarity index 95%
rename from dist/samples/3d-marker-collision-behavior/dist/assets/index-Bksae6wd.js
rename to dist/samples/3d-marker-collision-behavior/dist/assets/index-DdMMonGb.js
index af869da86..3f21e5490 100644
--- a/dist/samples/3d-marker-collision-behavior/dist/assets/index-Bksae6wd.js
+++ b/dist/samples/3d-marker-collision-behavior/dist/assets/index-DdMMonGb.js
@@ -1 +1 @@
-(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var e=[];async function t(){let{Map3DElement:t,Marker3DElement:r}=await google.maps.importLibrary(`maps3d`),i=new t({center:{lat:47.6094,lng:-122.339,altitude:0},range:1e3,mode:`HYBRID`,gestureHandling:`COOPERATIVE`});for(let[t,a]of n){let n=new r({position:{lat:a,lng:t},collisionBehavior:`REQUIRED`});e.push(n),i.append(n)}document.body.append(i)}var n=[[-122.3402,47.6093],[-122.3402,47.6094],[-122.3403,47.6094],[-122.3384,47.6098],[-122.3389,47.6095],[-122.3396,47.6095],[-122.3379,47.6097],[-122.3378,47.6097],[-122.3396,47.6091],[-122.3383,47.6089],[-122.3379,47.6093],[-122.3381,47.6095],[-122.3378,47.6095]];t();var r=document.getElementById(`selectElementId`);r.addEventListener(`change`,i);function i(){for(let t of e)t.collisionBehavior=r.value||`REQUIRED`}
\ No newline at end of file
+(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var e=[];async function t(){let{Map3DElement:t,Marker3DElement:r}=await google.maps.importLibrary(`maps3d`),i=new t({center:{lat:47.6094,lng:-122.339,altitude:0},range:1e3,mode:`HYBRID`,gestureHandling:`COOPERATIVE`});for(let[t,a]of n){let n=new r({position:{lat:a,lng:t},collisionBehavior:`REQUIRED`});e.push(n),i.append(n)}document.body.append(i)}var n=[[-122.3402,47.6093],[-122.3402,47.6094],[-122.3403,47.6094],[-122.3384,47.6098],[-122.3389,47.6095],[-122.3396,47.6095],[-122.3379,47.6097],[-122.3378,47.6097],[-122.3396,47.6091],[-122.3383,47.6089],[-122.3379,47.6093],[-122.3381,47.6095],[-122.3378,47.6095]];t();var r=document.getElementById(`selectElementId`);r.addEventListener(`change`,i);function i(){for(let t of e)t.collisionBehavior=r.value}
\ No newline at end of file
diff --git a/dist/samples/3d-marker-collision-behavior/dist/index.html b/dist/samples/3d-marker-collision-behavior/dist/index.html
index 55d041bcc..dab514047 100644
--- a/dist/samples/3d-marker-collision-behavior/dist/index.html
+++ b/dist/samples/3d-marker-collision-behavior/dist/index.html
@@ -15,7 +15,7 @@
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
});
-
+
diff --git a/dist/samples/3d-marker-collision-behavior/docs/index.js b/dist/samples/3d-marker-collision-behavior/docs/index.js
index 6df137444..63fb4212c 100644
--- a/dist/samples/3d-marker-collision-behavior/docs/index.js
+++ b/dist/samples/3d-marker-collision-behavior/docs/index.js
@@ -21,11 +21,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);
@@ -57,7 +59,7 @@ dropdown.addEventListener('change', drawMap);
function drawMap() {
for (const marker of markers) {
- marker.collisionBehavior = dropdown.value || 'REQUIRED';
+ marker.collisionBehavior = dropdown.value;
}
}
diff --git a/dist/samples/3d-marker-collision-behavior/docs/index.ts b/dist/samples/3d-marker-collision-behavior/docs/index.ts
index 4e427639f..d0646c157 100644
--- a/dist/samples/3d-marker-collision-behavior/docs/index.ts
+++ b/dist/samples/3d-marker-collision-behavior/docs/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/dist/samples/3d-marker-collision-behavior/jsfiddle/demo.js b/dist/samples/3d-marker-collision-behavior/jsfiddle/demo.js
index ef1ae2531..5b6bf9a6a 100644
--- a/dist/samples/3d-marker-collision-behavior/jsfiddle/demo.js
+++ b/dist/samples/3d-marker-collision-behavior/jsfiddle/demo.js
@@ -56,6 +56,6 @@ dropdown.addEventListener('change', drawMap);
function drawMap() {
for (const marker of markers) {
- marker.collisionBehavior = dropdown.value || 'REQUIRED';
+ marker.collisionBehavior = dropdown.value;
}
}
diff --git a/dist/samples/3d-marker-customization/app/index.ts b/dist/samples/3d-marker-customization/app/index.ts
index 78283100c..2dbbec290 100644
--- a/dist/samples/3d-marker-customization/app/index.ts
+++ b/dist/samples/3d-marker-customization/app/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/dist/samples/3d-marker-customization/dist/assets/index-F8rmfRi2.js b/dist/samples/3d-marker-customization/dist/assets/index-DdOsP7L-.js
similarity index 78%
rename from dist/samples/3d-marker-customization/dist/assets/index-F8rmfRi2.js
rename to dist/samples/3d-marker-customization/dist/assets/index-DdOsP7L-.js
index f3be64aa8..02449cbdd 100644
--- a/dist/samples/3d-marker-customization/dist/assets/index-F8rmfRi2.js
+++ b/dist/samples/3d-marker-customization/dist/assets/index-DdOsP7L-.js
@@ -1 +1 @@
-(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();async function e(){let[{Map3DElement:e,Marker3DElement:t},{PinElement:n}]=await Promise.all([google.maps.importLibrary(`maps3d`),google.maps.importLibrary(`marker`)]),r=new e({center:{lat:37.4176,lng:-122.02,altitude:0},tilt:67.5,range:7e3,mode:`HYBRID`,gestureHandling:`COOPERATIVE`});r.mode=`SATELLITE`;let i=new n({borderColor:`#FFFFFF`}),a=new t({position:{lat:37.415,lng:-122.035}});a.append(i);let o=new t({position:{lat:37.419,lng:-122.03},label:`Simple label`}),s=new n({scale:1.5}),c=new t({position:{lat:37.419,lng:-122.02}});c.append(s);let l=new n({glyphColor:`white`}),u=new t({position:{lat:37.415,lng:-122.025}});u.append(l);let d=new n({background:`#F0F6FC`,glyphText:`E`,glyphColor:`red`,borderColor:`#0000FF`}),f=new t({position:{lat:37.415,lng:-122.015,altitude:50},extruded:!0,altitudeMode:`RELATIVE_TO_GROUND`});f.append(d);let p=new n({glyphText:``}),m=new t({position:{lat:37.415,lng:-122.005}});m.append(p);let h=new n({background:`#FBBC04`}),g=new t({position:{lat:37.419,lng:-122.01}});g.append(h),r.append(o),r.append(c),r.append(g),r.append(a),r.append(u),r.append(f),r.append(m),document.body.append(r)}e();
\ No newline at end of file
+(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();async function e(){let[{Map3DElement:e,Marker3DElement:t},{PinElement:n}]=await Promise.all([google.maps.importLibrary(`maps3d`),google.maps.importLibrary(`marker`)]),r=new e({center:{lat:37.4176,lng:-122.02,altitude:0},tilt:67.5,range:7e3,mode:`HYBRID`,gestureHandling:`COOPERATIVE`});r.mode=`SATELLITE`;let i=new n({borderColor:`#FFFFFF`}),a=new t({position:{lat:37.415,lng:-122.035}});a.append(i);let o=new t({position:{lat:37.419,lng:-122.03},label:`Simple label`}),s=new n({scale:1.5}),c=new t({position:{lat:37.419,lng:-122.02}});c.append(s);let l=new n({glyphColor:`white`}),u=new t({position:{lat:37.415,lng:-122.025}});u.append(l);let d=new n({background:`#F0F6FC`,glyphText:`E`,glyphColor:`red`,borderColor:`#0000FF`}),f=new t({position:{lat:37.415,lng:-122.015,altitude:50},extruded:!0,altitudeMode:`RELATIVE_TO_GROUND`});f.append(d);let p=new t({position:{lat:37.4239163,lng:-122.0947209,altitude:100},altitudeMode:`RELATIVE_TO_GROUND`,extruded:!0}),m=new n({glyphText:``}),h=new t({position:{lat:37.415,lng:-122.005}});h.append(m);let g=new n({background:`#FBBC04`}),_=new t({position:{lat:37.419,lng:-122.01}});_.append(g),r.append(o),r.append(c),r.append(_),r.append(a),r.append(u),r.append(f),r.append(h),r.append(p),document.body.append(r)}e();
\ No newline at end of file
diff --git a/dist/samples/3d-marker-customization/dist/index.html b/dist/samples/3d-marker-customization/dist/index.html
index c3c15bacf..dd4e83e57 100644
--- a/dist/samples/3d-marker-customization/dist/index.html
+++ b/dist/samples/3d-marker-customization/dist/index.html
@@ -15,7 +15,7 @@
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
});
-
+
diff --git a/dist/samples/3d-marker-customization/docs/index.js b/dist/samples/3d-marker-customization/docs/index.js
index 978b859b0..b046a16bf 100644
--- a/dist/samples/3d-marker-customization/docs/index.js
+++ b/dist/samples/3d-marker-customization/docs/index.js
@@ -23,6 +23,7 @@ async function init() {
map.mode = 'SATELLITE';
+ // [START maps_3d_marker_customization_pin_border]
// Change the border color.
const pinBorder = new PinElement({
borderColor: '#FFFFFF',
@@ -31,6 +32,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({
@@ -38,6 +40,7 @@ async function init() {
label: 'Simple label',
});
+ // [START maps_3d_marker_customization_scale]
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
@@ -46,7 +49,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',
@@ -55,7 +60,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',
@@ -69,6 +76,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({
@@ -78,7 +95,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',
@@ -88,6 +105,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);
@@ -96,6 +114,7 @@ async function init() {
map.append(markerWithGlyphColor);
map.append(markerWithGlyphText);
map.append(markerWithNoGlyph);
+ map.append(extrudedMarker);
document.body.append(map);
}
diff --git a/dist/samples/3d-marker-customization/docs/index.ts b/dist/samples/3d-marker-customization/docs/index.ts
index 78283100c..2dbbec290 100644
--- a/dist/samples/3d-marker-customization/docs/index.ts
+++ b/dist/samples/3d-marker-customization/docs/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/dist/samples/3d-marker-customization/jsfiddle/demo.js b/dist/samples/3d-marker-customization/jsfiddle/demo.js
index 8765d6e32..7fc05c5ab 100644
--- a/dist/samples/3d-marker-customization/jsfiddle/demo.js
+++ b/dist/samples/3d-marker-customization/jsfiddle/demo.js
@@ -69,6 +69,13 @@ async function init() {
});
markerWithGlyphText.append(pinTextGlyph);
+ // 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,
+ });
+
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyphText: '',
@@ -95,6 +102,7 @@ async function init() {
map.append(markerWithGlyphColor);
map.append(markerWithGlyphText);
map.append(markerWithNoGlyph);
+ map.append(extrudedMarker);
document.body.append(map);
}
diff --git a/dist/samples/3d-marker-graphics/app/index.ts b/dist/samples/3d-marker-graphics/app/index.ts
index f33697d50..4aba123d8 100644
--- a/dist/samples/3d-marker-graphics/app/index.ts
+++ b/dist/samples/3d-marker-graphics/app/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/dist/samples/3d-marker-graphics/docs/index.js b/dist/samples/3d-marker-graphics/docs/index.js
index e4252612c..29582ab61 100644
--- a/dist/samples/3d-marker-graphics/docs/index.js
+++ b/dist/samples/3d-marker-graphics/docs/index.js
@@ -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/dist/samples/3d-marker-graphics/docs/index.ts b/dist/samples/3d-marker-graphics/docs/index.ts
index f33697d50..4aba123d8 100644
--- a/dist/samples/3d-marker-graphics/docs/index.ts
+++ b/dist/samples/3d-marker-graphics/docs/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/dist/samples/3d-marker-interactive/app/index.ts b/dist/samples/3d-marker-interactive/app/index.ts
index 827c32aa1..e5e096642 100644
--- a/dist/samples/3d-marker-interactive/app/index.ts
+++ b/dist/samples/3d-marker-interactive/app/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/dist/samples/3d-marker-interactive/docs/index.js b/dist/samples/3d-marker-interactive/docs/index.js
index 975b935c6..cfe3a9915 100644
--- a/dist/samples/3d-marker-interactive/docs/index.js
+++ b/dist/samples/3d-marker-interactive/docs/index.js
@@ -28,10 +28,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/dist/samples/3d-marker-interactive/docs/index.ts b/dist/samples/3d-marker-interactive/docs/index.ts
index 827c32aa1..e5e096642 100644
--- a/dist/samples/3d-marker-interactive/docs/index.ts
+++ b/dist/samples/3d-marker-interactive/docs/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/dist/samples/3d-mesh-flatten/app/index.html b/dist/samples/3d-mesh-flatten/app/index.html
index 05ca51a28..340abb122 100644
--- a/dist/samples/3d-mesh-flatten/app/index.html
+++ b/dist/samples/3d-mesh-flatten/app/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">
+
+