कस्टम एचटीएमएल और सीएसएस का इस्तेमाल करके, ज़्यादा विज़ुअल इफ़ेक्ट वाले 3D मार्कर बनाए जा सकते हैं. इनमें इंटरैक्टिविटी और ऐनिमेशन की सुविधा भी हो सकती है. सभी Marker3DElement इंस्टेंस, डीओएम में एचटीएमएल एलिमेंट के तौर पर जोड़े जाते हैं. इन्हें Marker3DElement प्रॉपर्टी का इस्तेमाल करके ऐक्सेस किया जा सकता है. साथ ही, इनमें किसी भी दूसरे डीओएम एलिमेंट की तरह बदलाव किया जा सकता है.
बुनियादी मार्कर
इस उदाहरण वाले मैप में, बुनियादी कस्टम मार्कर बनाने का तरीका बताया गया है.
<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>
इंटरैक्टिव मार्कर
इस उदाहरण में, एचटीएमएल का इस्तेमाल करके इंटरैक्टिव मार्कर बनाने का तरीका बताया गया है.
<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>