HTML ile işaretçi oluşturma

Etkileşim ve animasyon içerebilen, yüksek görsel etkiye sahip 3D işaretçiler oluşturmak için özel HTML ve CSS kullanabilirsiniz. Tüm Marker3DElement örnekleri, DOM'a HTML öğeleri olarak eklenir. Bu öğelere Marker3DElement özelliğini kullanarak erişebilir ve diğer tüm DOM öğeleriyle aynı şekilde değiştirebilirsiniz.

Temel işaretçi

Bu örnek harita, temel bir özel işaretçinin bildirimsel olarak nasıl oluşturulacağını gösterir.

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

Etkileşimli işaretleyici

Bu örnekte, HTML kullanarak etkileşimli işaretçi oluşturma işlemi gösterilmektedir.

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