HTML দিয়ে মার্কার তৈরি করুন

আপনি কাস্টম HTML এবং CSS ব্যবহার করে আকর্ষণীয় ভিজ্যুয়াল মার্কার তৈরি করতে পারেন, যেগুলোতে ইন্টারঅ্যাকটিভিটি এবং অ্যানিমেশন থাকতে পারে। সমস্ত Marker3DElement ইনস্ট্যান্স DOM-এ HTML এলিমেন্ট হিসেবে যুক্ত হয়, যেগুলোকে আপনি Marker3DElement প্রপার্টি ব্যবহার করে অ্যাক্সেস করতে পারেন এবং অন্য যেকোনো DOM এলিমেন্টের মতোই ম্যানিপুলেট করতে পারেন।

কাস্টম এইচটিএমএল মার্কারগুলো স্ট্যান্ডার্ড ৩ডি মার্কারের তুলনায় কম পারফরম্যান্স দেয়। বৃহৎ ডেটাসেটযুক্ত অ্যাপ্লিকেশনগুলোর ক্ষেত্রে সর্বোত্তম পারফরম্যান্স নিশ্চিত করতে স্ট্যান্ডার্ড মার্কার ব্যবহারের জন্য জোরালোভাবে উৎসাহিত করা হয়।

সিএসএস 

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