إنشاء علامات باستخدام HTML

يمكنك استخدام HTML وCSS مخصّصَين لإنشاء علامات ذات تأثير بصري كبير، يمكن أن تتضمّن ميزات تفاعلية وصورًا متحركة. تتم إضافة جميع مثيلات Marker3DElement إلى DOM كعناصر HTML، ويمكنك الوصول إليها باستخدام السمة Marker3DElement، والتعامل معها بالطريقة نفسها التي تتعامل بها مع أي عنصر DOM آخر.

تقدّم علامات HTML المخصّصة أداءً أقل من علامات 3D العادية. بالنسبة إلى التطبيقات التي تتضمّن مجموعات بيانات كبيرة، ننصح بشدة باستخدام علامات قياسية لضمان تحقيق الأداء الأمثل.

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

تجربة عيّنة

علامة HTML بسيطة

يوضّح المثال التالي كيفية إنشاء محدّد موقع مخصّص أساسي:

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