Membuat penanda dengan HTML

Anda dapat menggunakan HTML dan CSS kustom untuk membuat penanda dengan tampilan visual yang jelas, serta dapat menampilkan interaktivitas dan animasi. Semua instance Marker3DElement ditambahkan ke DOM sebagai elemen HTML, yang dapat diakses menggunakan properti Marker3DElement, dan dimanipulasi dengan cara yang sama seperti elemen DOM lainnya.

Penanda HTML kustom menawarkan performa yang lebih rendah daripada penanda 3D standar. Untuk aplikasi dengan set data besar, sangat disarankan untuk menggunakan penanda standar guna memastikan performa yang optimal.

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

Mencoba Contoh

Penanda HTML sederhana

Contoh berikut menunjukkan cara membuat penanda kustom dasar:

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

Penanda interaktif

Contoh ini menunjukkan pembuatan penanda interaktif menggunakan 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>