diff --git a/samples/3d-marker-customization/index.html b/samples/3d-marker-customization/index.html index c466ccf4c..bc048bf6d 100644 --- a/samples/3d-marker-customization/index.html +++ b/samples/3d-marker-customization/index.html @@ -14,7 +14,8 @@ diff --git a/samples/3d-marker-customization/index.ts b/samples/3d-marker-customization/index.ts index 5b656cae7..1845e2ccc 100644 --- a/samples/3d-marker-customization/index.ts +++ b/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);