HTML ile işaretçi oluşturma

Etkileşim ve animasyon içerebilen, yüksek görsel etkiye sahip 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.

Özel HTML işaretçiler, standart 3D işaretçilere kıyasla daha düşük performans sunar. Büyük veri kümeleri içeren uygulamalarda optimum performans için standart işaretçiler kullanılması kesinlikle önerilir.

CSS

@keyframes marker-bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-12px); }
  55%  { transform: translateY(-5px); }
  75%  { transform: translateY(-10px); }
  100% { transform: translateY(-8px); }
}

html,
gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

:root {
  --google-blue: #1a73e8;
  --google-gray: #3c4043;
  --google-silver: #dadce0;
  --google-white: #ffffff;
}

.custom-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background-color: var(--google-white);
  color: var(--google-blue);
  border: 1px solid var(--google-silver);
  border-radius: 20px;
  font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(60, 64, 67, 0.1), 0 1px 3px rgba(60, 64, 67, 0.2);
  white-space: nowrap;
  position: relative;
  cursor: default;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  user-select: none;
}

.custom-marker:hover {
  background-color: #f8f9fa;
  box-shadow: 0 8px 16px rgba(60, 64, 67, 0.2), 0 2px 4px rgba(60, 64, 67, 0.25);
  animation: marker-bounce 0.5s ease-out forwards;
}

.custom-marker::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--google-silver);
  transition: border-top-color 0.2s ease-in-out;
}

.custom-marker::before {
  content: '';
  position: absolute;
  top: 99%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--google-white);
  z-index: 1;
  transition: border-top-color 0.2s ease-in-out;
}

.custom-marker:hover::after {
  border-top-color: #cacdd2;
}

.custom-marker:hover::before {
  border-top-color: #f8f9fa;
}
style.css

HTML

<html>
    <head>
        <title>3D Marker HTML</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d center="40.7489,-73.9680,0" heading="315" tilt="65" range="800" mode="SATELLITE">
            <gmp-marker position="40.7489,-73.9680" title="UN Headquarters">
                <div class="custom-marker">United Nations Secretariat Building</div>
            </gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_3d-markers"></script>
    </body>
</html>
index.html

Örneği deneyin

Basit HTML işaretçisi

Aşağıdaki örnekte, temel bir özel işaretçinin nasıl oluşturulacağı 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şaretleyici

Bu örnekte, HTML kullanarak 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>