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