Sie können benutzerdefinierten HTML- und CSS-Code verwenden, um optisch ansprechende, interaktive und animierte 3D-Markierungen zu erstellen. Alle Marker3DElement-Instanzen werden dem DOM als HTML-Elemente hinzugefügt. Sie können über die Eigenschaft Marker3DElement auf sie zugreifen und sie auf die gleiche Weise wie jedes andere DOM-Element bearbeiten.
Einfache Markierung
Diese Beispielkarte zeigt, wie eine einfache benutzerdefinierte Markierung deklarativ erstellt wird.
<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>
Interaktive Markierung
In diesem Beispiel wird gezeigt, wie Sie eine interaktive Markierung mit HTML erstellen.
<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>