एचटीएमएल की मदद से मार्कर बनाना

कस्टम एचटीएमएल और सीएसएस का इस्तेमाल करके, ज़्यादा विज़ुअल इफ़ेक्ट वाले 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>