Etkileşimli ve animasyonlu, görsel açıdan yüksek etki yaratan 3D işaretçiler oluşturmak için özel HTML ve CSS kullanabilirsiniz. Tüm Marker3DElement örnekleri, DOM'a HTML öğeleri olarak eklenir. Marker3DElement mülkünü kullanarak bu öğelere erişebilir ve diğer DOM öğeleriyle aynı şekilde değiştirebilirsiniz.
Temel işaretçi
Bu örnek haritada, temel bir özel işaretçiyi açıklayıcı bir şekilde oluşturma işlemi gösterilmektedir.
<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>
Etkileşimli işaretçi
Bu örnekte, HTML kullanılarak etkileşimli bir işaretçi oluşturma işlemi gösterilmektedir.
<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>