Collision

samples/3d-marker-customization/index.html

@@ -14,7 +14,8 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "GOOGLE_MAPS_API_KEY"
+                key: "GOOGLE_MAPS_API_KEY",
+                v: "alpha"
             });
         </script>
     </head>

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

@@ -4,23 +4,29 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
 // [START maps_3d_marker_customization]
 async function init() {
-    const [{ Map3DElement, Marker3DElement }, { PinElement }] =
-        await Promise.all([
-            google.maps.importLibrary('maps3d'),
-            google.maps.importLibrary('marker'),
-        ]);
+    const [
+        // @ts-expect-error - Label3DElement is not yet in @types/google.maps
+        { Map3DElement, Marker3DElement, Label3DElement },
+        { PinElement, CollisionBehavior },
+    ] = await Promise.all([
+        google.maps.importLibrary('maps3d'),
+        google.maps.importLibrary('marker'),
+    ]);
 
     const map = new Map3DElement({
         center: { lat: 37.4176, lng: -122.02, altitude: 0 },
         tilt: 67.5,
         range: 7000,
-        mode: 'HYBRID',
+        mode: 'SATELLITE',
     });
 
-    map.mode = 'SATELLITE';
-
     // [START maps_3d_marker_customization_pin_border]
     // Change the border color.
     const pinBorder = new PinElement({
@@ -105,6 +111,20 @@ async function init() {
     markerWithBackground.append(pinBackground);
     // [END maps_3d_marker_customization_background]
 
+    // [START maps_3d_marker_customization_collisionbehavior]
+    const markerWithIndependentLabel = new Marker3DElement({
+        position: { lat: 37.423, lng: -122.015 },
+    });
+    markerWithIndependentLabel.id = 'marker-1';
+    const label = new Label3DElement({
+        collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
+        for: 'marker-1',
+    });
+    label.append('Independent label example');
+    map.append(markerWithIndependentLabel);
+    map.append(label);
+    // [END maps_3d_marker_customization_collisionbehavior]
+
     map.append(markerWithLabel);
     map.append(markerWithScale);
     map.append(markerWithBackground);