Za pomocą niestandardowego kodu HTML i CSS możesz tworzyć znaczniki 3D o wysokiej jakości wizualnej, które mogą zawierać interaktywność i animację. Wszystkie wystąpienia Marker3DElement są dodawane do DOM jako elementy HTML, do których możesz uzyskać dostęp za pomocą właściwości Marker3DElement. Możesz nimi manipulować w taki sam sposób jak dowolnym innym elementem DOM.
Podstawowy znacznik
Ta przykładowa mapa pokazuje deklaratywnie tworzenie podstawowego znacznika niestandardowego.
<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>
Znacznik interaktywny
Ten przykład pokazuje tworzenie interaktywnego znacznika za pomocą kodu 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>