Anda dapat menggunakan HTML dan CSS kustom untuk membuat penanda 3D dengan tampilan visual yang jelas, serta dapat menampilkan interaktivitas dan animasi. Semua instance Marker3DElement ditambahkan ke DOM sebagai elemen HTML, yang dapat diakses menggunakan properti Marker3DElement, dan dimanipulasi dengan cara yang sama seperti elemen DOM lainnya.
Penanda dasar
Contoh peta ini menunjukkan pembuatan penanda kustom dasar secara deklaratif.
<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>
Penanda interaktif
Contoh ini menunjukkan pembuatan penanda interaktif menggunakan 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>