You can use custom HTML and CSS to create markers with high visual impact, that can feature interactivity and animation. All Marker3DElement instances are added to the DOM as HTML elements, which you can access using the Marker3DElement property, and manipulate in the same way as any other DOM element.
Basic marker
This example map shows creating a basic custom marker declaratively.
<html> <head> <title>3D Map - Declarative</title> <style> html, body { height: 100%; margin: 0; padding: 0; } gmp-map-3d { height: 100%; } </style> </head> <body> <gmp-map-3d center="37.4239163, -122.0947209, 0" tilt="67.5" range="1000" mode="hybrid"> <gmp-marker-3d position="37.4239163, -122.0947209,50" altitude-mode="absolute" extruded="true" label="Basic Marker"></gmp-marker-3d> </gmp-map-3d> <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=beta&libraries=maps3d"></script> </body> </html> Interactive marker
This example shows creating an interactive marker using HTML.
<html> <head> <title>Pure HTML Interactive Marker Demo</title> <style> html, body { height:100%; margin: 0; padding: 0; } gmp-map-3d { height: 400px; width: 800px; } </style> </head> <body> <gmp-map-3d center="37.819852,-122.478549" tilt="75" range="2000" heading="330" mode="hybrid"> <gmp-marker-3d-interactive position="37.819852,-122.478549,100"></gmp-marker-3d-interactive> </gmp-map-3d> <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=alpha&libraries=maps3d"> </script> </body> </html>