יצירת סמנים באמצעות HTML

אפשר להשתמש ב-HTML וב-CSS מותאמים אישית כדי ליצור סמנים תלת-ממדיים עם השפעה חזותית רבה, שיכולים לכלול אינטראקטיביות ואנימציה. כל המופעים של Marker3DElement מתווספים ל-DOM כרכיבי HTML. אפשר לגשת אליהם באמצעות המאפיין Marker3DElement ולבצע בהם שינויים באותו אופן שבו מבצעים שינויים בכל רכיב DOM אחר.

סמן בסיסי

במפה הזו מוצגת יצירת סימן בסיס בהתאמה אישית באופן דקלרטיבי.

<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.

<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>