إنشاء علامات باستخدام 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>