মানচিত্রে নির্দিষ্ট স্থান প্রদর্শন করতে মার্কার ব্যবহার করুন। এই পৃষ্ঠায় দেখানো হয়েছে কীভাবে প্রোগ্রাম্যাটিকভাবে এবং HTML ব্যবহার করে মানচিত্রে মার্কার যুক্ত করা যায়।
HTML ব্যবহার করে একটি মার্কার যোগ করুন
HTML ব্যবহার করে একটি 3D মার্কার যোগ করতে, gmp-map-3d এলিমেন্টের মধ্যে একটি gmp-marker-3d চাইল্ড এলিমেন্ট যোগ করুন। নিচের কোড স্নিপেটটিতে একটি ওয়েব পেজে মার্কার যোগ করার পদ্ধতি দেখানো হলো:
<html>
<head>
<title>3D Marker HTML</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script
async
src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
</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>
</body>
</html>প্রোগ্রাম্যাটিকভাবে একটি মার্কার যোগ করুন
প্রোগ্রামের মাধ্যমে ম্যাপে একটি 3D মার্কার যোগ করতে, এই উদাহরণে দেখানো অনুযায়ী lat/lng স্থানাঙ্ক এবং বেসম্যাপের একটি রেফারেন্স দিয়ে একটি নতুন Marker3DElement তৈরি করুন:
async function init() { // Make sure the Marker3DElement is included. const { Map3DElement, Marker3DElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 37.4239163, lng: -122.0947209, altitude: 0 }, tilt: 67.5, range: 1000, mode: 'SATELLITE', gestureHandling: 'COOPERATIVE', }); const marker = new Marker3DElement({ position: { lat: 37.4239163, lng: -122.0947209, altitude: 50 }, // (Required) Marker must have a lat / lng, but doesn't need an altitude. altitudeMode: 'ABSOLUTE', // (Optional) Treated as CLAMP_TO_GROUND if omitted. extruded: true, // (Optional) Draws line from ground to the bottom of the marker. label: 'Basic Marker', // (Optional) Add a label to the marker. }); map.append(marker); // The marker must be appended to the map. document.body.append(map); } void init();