Puoi utilizzare HTML e CSS personalizzati per creare indicatori 3D con un impatto visivo elevato, che possono includere interattività e animazione. Tutte le istanze di Marker3DElement vengono aggiunte al DOM come elementi HTML, a cui puoi accedere utilizzando la proprietà Marker3DElement e manipolare nello stesso modo di qualsiasi altro elemento DOM.
Indicatore di base
Questa mappa di esempio mostra la creazione di un indicatore personalizzato di base in modo dichiarativo.
<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>
Indicatore interattivo
Questo esempio mostra la creazione di un indicatore interattivo utilizzando 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>