Bạn có thể sử dụng HTML và CSS tuỳ chỉnh để tạo các điểm đánh dấu 3D có tác động mạnh về mặt thị giác, có thể có tính tương tác và ảnh động. Tất cả các thực thể Marker3DElement đều được thêm vào DOM dưới dạng các phần tử HTML. Bạn có thể truy cập bằng cách sử dụng thuộc tính Marker3DElement và thao tác theo cách tương tự như mọi phần tử DOM khác.
Điểm đánh dấu cơ bản
Bản đồ ví dụ này minh hoạ cách tạo một điểm đánh dấu tuỳ chỉnh cơ bản theo cách khai báo.
<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>
Điểm đánh dấu tương tác
Ví dụ này minh hoạ cách tạo một điểm đánh dấu tương tác bằng 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>