HTML ile işaretçi oluşturma

Etkileşimli ve animasyonlu, görsel açıdan yüksek etki yaratan 3D işaretçiler oluşturmak için özel HTML ve CSS kullanabilirsiniz. Tüm Marker3DElement örnekleri, DOM'a HTML öğeleri olarak eklenir. Marker3DElement mülkünü kullanarak bu öğelere erişebilir ve diğer DOM öğeleriyle aynı şekilde değiştirebilirsiniz.

Temel işaretçi

Bu örnek haritada, temel bir özel işaretçiyi açıklayıcı bir şekilde oluşturma işlemi gösterilmektedir.

<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şaretçi

Bu örnekte, HTML kullanılarak etkileşimli bir 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>