1. আপনি শুরু করার আগে
এই টিউটোরিয়ালটি কীভাবে আপনার অ্যাপ্লিকেশনে 3D মার্কার যুক্ত এবং স্টাইল করতে হয় তা অন্বেষণ করে। এছাড়াও আপনি নির্দিষ্ট স্থানে এবং আশেপাশে উড়ে আপনার অ্যাপ্লিকেশনটিকে কীভাবে অ্যানিমেট করবেন তাও শিখবেন।
এই টিউটোরিয়ালটি প্রথম কোডল্যাবে আচ্ছাদিত ধারণাগুলির উপর তৈরি করে। যদি আপনি ইতিমধ্যেই না করে থাকেন, তাহলে এই অ্যাপ্লিকেশনটির জন্য প্রয়োজনীয় মৌলিক জ্ঞান অর্জন করতে সেই কোডল্যাবটি সম্পূর্ণ করুন।
আপনি কি করবেন
এই অ্যাপ্লিকেশনটি ইউরোপের প্রধান Google অফিসগুলির একটি ওভারভিউ প্রদান করে৷ ব্যবহারকারীরা একটি অফিস নির্বাচন করতে পারেন, অন্বেষণ করতে এটির ভিতরে এবং চারপাশে উড়তে পারেন এবং তারপরে সাধারণ দৃশ্যে ফিরে যেতে জুম আউট করতে পারেন৷ এই বৈশিষ্ট্যগুলি, সাধারণত ভ্রমণ এবং অন্বেষণ অ্যাপ্লিকেশনগুলিতে পাওয়া যায়, ব্যবহারকারীদের জন্য আরও নিমগ্ন অভিজ্ঞতা প্রদান করে।
এই কোডল্যাবে, আপনি একটি 3D ওয়েব অ্যাপ তৈরি করবেন যা নিম্নলিখিতগুলি করে:
- মানচিত্র জাভাস্ক্রিপ্ট API গতিশীলভাবে লোড করে।
- মানচিত্রে 3D মার্কার যোগ করে।
- SVG ব্যবহার করে মার্কার স্টাইল করে।
- মার্কার এবং চারপাশে উড়ে যাওয়ার ক্ষমতা যোগ করে।
- কোড থেকে একটি অ্যারেতে অবস্থানগুলিকে বিমূর্ত করে।
আপনি কি শিখবেন
- মার্কার কিভাবে কাজ করে।
- কিভাবে স্টাইল মার্কার.
- বিল্ট ইন ফাংশনগুলির সাথে অ্যানিমেশন কীভাবে কাজ করে।
- ভাল ফ্রেমিং এর জন্য ক্যামেরা অবস্থান বনাম পয়েন্ট অবস্থান.
- আইটেমগুলিকে আরও ভালভাবে ফ্রেম করতে ক্যামেরা প্যারামিটারগুলি ক্যাপচার করতে সহায়ক হ্যাক৷
পূর্বশর্ত
এই কোডল্যাবটি সম্পূর্ণ করার জন্য আপনাকে এখানকার আইটেমগুলির সাথে নিজেকে পরিচিত করতে হবে। আপনি যদি ইতিমধ্যেই Google মানচিত্র প্ল্যাটফর্মের সাথে কাজ করার সাথে পরিচিত হন তবে কোডল্যাবে এগিয়ে যান।
প্রয়োজনীয় Google মানচিত্র প্ল্যাটফর্ম পণ্য
এই কোডল্যাবে, আপনি নিম্নলিখিত Google মানচিত্র প্ল্যাটফর্ম পণ্যগুলি ব্যবহার করবেন:
- মানচিত্র জাভাস্ক্রিপ্ট API
এই কোডল্যাবের জন্য অন্যান্য প্রয়োজনীয়তা
এই কোডল্যাবটি সম্পূর্ণ করতে, আপনার নিম্নলিখিত অ্যাকাউন্ট, পরিষেবা এবং সরঞ্জামগুলির প্রয়োজন হবে:
- বিলিং সক্ষম সহ একটি Google ক্লাউড অ্যাকাউন্ট৷
- Maps JavaScript API সক্ষম সহ একটি Google মানচিত্র প্ল্যাটফর্ম API কী।
- জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস এর প্রাথমিক জ্ঞান।
- একটি টেক্সট এডিটর বা আপনার পছন্দের IDE, দেখার জন্য একটি সম্পাদনা ফাইল সংরক্ষণ করতে।
- আপনি কাজ করার সাথে সাথে ফাইলটি দেখার জন্য একটি ওয়েব ব্রাউজার।
2. সেট আপ করুন
Google Maps প্ল্যাটফর্ম সেট আপ করুন
আপনার যদি ইতিমধ্যেই একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট না থাকে এবং বিলিং সক্ষম করা একটি প্রকল্প থাকে, তাহলে অনুগ্রহ করে একটি বিলিং অ্যাকাউন্ট এবং একটি প্রকল্প তৈরি করতে Google মানচিত্র প্ল্যাটফর্মের সাথে শুরু করা নির্দেশিকাটি দেখুন৷
- ক্লাউড কনসোলে , প্রকল্পের ড্রপ-ডাউন মেনুতে ক্লিক করুন এবং এই কোডল্যাবের জন্য আপনি যে প্রকল্পটি ব্যবহার করতে চান সেটি নির্বাচন করুন।
- Google ক্লাউড মার্কেটপ্লেসে এই কোডল্যাবের জন্য প্রয়োজনীয় Google মানচিত্র প্ল্যাটফর্ম API এবং SDK সক্ষম করুন৷ এটি করতে, এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করুন৷
- ক্লাউড কনসোলের শংসাপত্র পৃষ্ঠায় একটি API কী তৈরি করুন। আপনি এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করতে পারেন। Google মানচিত্র প্ল্যাটফর্মের সমস্ত অনুরোধের জন্য একটি API কী প্রয়োজন৷
3. সরল গ্লোব
অ্যাপ্লিকেশান তৈরি করা শুরু করার জন্য, ভিত্তিগত সেটআপ স্থাপন করা অপরিহার্য। এটি পৃথিবীর সবচেয়ে প্রয়োজনীয় আকারে একটি "নীল মার্বেল" দৃশ্য তৈরি করবে, যেমনটি ছবিতে দেখানো হয়েছে:
স্টার্টার পৃষ্ঠার জন্য কোড যোগ করুন
সাইটে গ্লোব যোগ করার জন্য, আপনাকে আপনার পৃষ্ঠায় নিম্নলিখিত কোড যোগ করতে হবে। এটি মানচিত্র জাভাস্ক্রিপ্ট API-এর লোডারের জন্য একটি বিভাগ এবং একটি init ফাংশন যোগ করবে যা পৃষ্ঠার মধ্যে মানচিত্র 3D উপাদান তৈরি করে যেখানে আপনি মার্কারগুলির জন্য কোড যোগ করবেন।
নিশ্চিত করুন যে আপনি পৃষ্ঠায় আপনার নিজস্ব কী ( গেট সেট আপ বিভাগে তৈরি করা হয়েছে) যোগ করেছেন অন্যথায় 3D উপাদানটি আরম্ভ করা যাবে না।
<!DOCTYPE html>
<html>
<head>
<title>Step 1 - Simple Globe</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
mode: MapMode.HYBRID,
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
এটি হয়ে গেলে, আপনি আগ্রহের অবস্থান তৈরি করা শুরু করতে প্রস্তুত, যা আপনি পরবর্তী ধাপে করবেন।
4. ফ্রেম ফার্স্ট ভিউ
এখন আপনি এখন একটি গ্লোব ভিউ সহ একটি মানচিত্র তৈরি করেছেন, আপনার পরবর্তী বাস্তবায়ন পদক্ষেপটি সঠিক শুরুর অবস্থানটি ফ্রেম করা। এটি আপনার ব্যবহারকারীকে তারা কোথায় কাজ করছে তার একটি তাত্ক্ষণিক ওভারভিউ পেতে অনুমতি দেয়।
যদিও এই উদাহরণটি ইউরোপের Google অফিসগুলিতে ফোকাস করে, আপনি এই পদ্ধতিটি বিশ্বব্যাপী যেকোন অবস্থানে প্রয়োগ করতে পারেন - সমগ্র দেশ থেকে একটি একক শহরের ব্লক পর্যন্ত৷ পণ্যের গতি এবং নমনীয়তা আপনাকে সর্বনিম্ন কোড পরিবর্তনের সাথে বিশ্বব্যাপী থেকে স্থানীয় পর্যন্ত আপনার অ্যাপ্লিকেশন স্কেল করতে দেয়।
3D মানচিত্রটি দেখতে আপনি প্রাথমিক ফ্রেমিং দিয়ে শুরু করবেন:
ইউরোপে ক্যামেরা ফ্রেম করুন
দেখানো হিসাবে ডিসপ্লে পেতে, আপনাকে সঠিকভাবে ডিসপ্লেটি এমনভাবে ফ্রেম করতে হবে যেন আপনি অবস্থানের দিকে নিচের দিকে তাকিয়ে স্পেসে একটি ক্যামেরা স্থাপন করছেন।
এটি করার জন্য, মানচিত্র নিয়ন্ত্রণে বেশ কয়েকটি পরামিতি ক্যামেরার বিবরণ সেট করতে ব্যবহার করা যেতে পারে। আপনি দেখতে পারেন কিভাবে প্যারামিটারগুলি "বাস্তব" জগতে ইন্টারঅ্যাক্ট করে তা চিত্রে দেখানো হয়েছে। বিশেষত ক্যামেরাটি যে কেন্দ্রবিন্দুর দিকে তাকাচ্ছে এবং আপনি যেখান থেকে তাকাচ্ছেন সেখান থেকে দূরত্ব রয়েছে ( পরিসীমা )। আপনাকে ক্যামেরার দৃষ্টিকোণটির কাতও সেট করতে হবে (অন্যথায় আপনি সরাসরি পৃথিবীর দিকে তাকাবেন)।
চূড়ান্ত সেটিং, শিরোনাম , ক্যামেরার দিক নির্ধারণ করে। এটি উত্তর থেকে অফসেট হিসাবে পরিমাপ করা হয়। এই মানগুলি প্রাথমিক প্রদর্শন সেট আপ করার জন্য একটি বস্তু হিসাবে 3D মানচিত্র উপাদানে প্রয়োগ করা হয়। আপনি আপডেট করা 3D এলিমেন্ট কনস্ট্রাক্টরের সাথে কোডে এটি দেখতে পারেন।
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID
});
ক্যামেরা প্যারামিটার ক্যাপচার করুন
একটি 3D মানচিত্রে একটি দৃশ্য ফ্রেম করার জন্য সুনির্দিষ্ট ক্যামেরা বসানো প্রয়োজন, যা শুধুমাত্র কোডের মাধ্যমে অর্জন করা চ্যালেঞ্জিং হতে পারে। এই প্রক্রিয়াটিকে সহজ করার জন্য, এই সহায়ক হ্যাকটি ব্যবহার করুন: আপনার পৃষ্ঠায় একটি ফাংশন যোগ করুন যেটি ক্যামেরা প্যারামিটারগুলি ক্যাপচার করে যখন আপনি প্রয়োজনীয় ভিউতে ক্লিক করেন৷ প্যারামিটারগুলি কনসোলে আউটপুট হবে, আপনার বস্তুর ক্যামেরা সেটিংসে অনুলিপি করার জন্য প্রস্তুত।
আপনি যে কোডটি পরে ব্যবহার করতে চান তা খুঁজে পেতে পারেন, এটি দেখানো এই পৃষ্ঠার নমুনায় এটি যোগ করা হয়েছে, যদিও এটি পরবর্তী পৃষ্ঠাগুলির নমুনায় থাকবে না কারণ কোডল্যাবের জন্য এটির প্রয়োজন নেই, তবে আপনি যদি আরও ভাল ক্যামেরা অবস্থানের মাধ্যমে আরও নিমজ্জিত ডেমো তৈরি করতে চান তবে এটি মনে রাখার মতো বিষয়।
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
// Stop the camera animation when the map is clicked.
map3D.stopCameraAnimation();
});
stopCameraAnimation ফাংশনের ব্যবহার লক্ষ্য করুন। যদি পৃষ্ঠাটি জুম করে বা কক্ষপথে ঘুরতে থাকে, তবে অ্যানিমেশনটি ঘটতে থামাতে সক্ষম হওয়া কার্যকর যাতে আপনি সেই মুহূর্তে ডিসপ্লেতে অবস্থান ক্যাপচার করতে পারেন। কোডের এই টুকরা আপনাকে এটি করতে দেয়। stopCameraAnimation ডকুমেন্টেশনে আরও বিশদ রয়েছে।
ক্লিক থেকে উদাহরণ আউটপুট, যেমন কনসোলে দেখানো হয়েছে।
camera: { center: { lat: 51.39870122020001, lng : -0.08573187165829443, altitude: 51.66845062662254 }, range: 716.4743880553578, tilt: 50.5766672986501 ,heading: -1.048260134782318, }
step2.html:40 { lat: 51.398158351120536, lng : -0.08561139388593597, altitude: 51.860469133677626 }
ক্যামেরা টেক্সটটি 3D মানচিত্রের বিভিন্ন অবজেক্টে json ইনপুট হিসাবে ব্যবহার করা যেতে পারে, দ্বিতীয় আউটপুট হল প্রকৃত পয়েন্টের অবস্থান যেখানে ক্লিক হয়েছে, এছাড়াও পয়েন্ট তৈরির জন্য বা মার্কারগুলির অবস্থান নির্ধারণের জন্য কিছু দরকারী।
পৃষ্ঠাটি সঠিকভাবে ফ্রেম করা হলে, আপনি এখন মার্কার যোগ করতে পারেন। কিভাবে শিখতে পরবর্তী ধাপে এগিয়ে যান।
বিভাগের সমাধান
এই পদক্ষেপের জন্য, সম্পূর্ণ পৃষ্ঠাটি আপনার বাস্তবায়ন যাচাই করার জন্য একটি সমাধান হিসাবে প্রদান করা হয়েছে। (যদি অনুলিপি করা হয় তবে নিশ্চিত করুন যে আপনি নিজের API কী ব্যবহার করছেন)।
<!DOCTYPE html>
<html>
<head>
<title>Step 2 - Europe View</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID,
});
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
map3D.stopCameraAnimation();
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
5. সরল মার্কার
এই বিভাগে, আপনি শিখবেন কিভাবে আপনার প্রথম মার্কার যোগ করবেন। প্রথমত, আপনি মার্কার সম্পর্কে সাধারণ বিবরণ শিখবেন।
3D মানচিত্র দুটি ভিন্ন মার্কার ক্লাস তৈরি করতে সমর্থন করে, Marker3DElement ক্লাস এবং Marker3DInteractiveElement ক্লাস, যেগুলির পছন্দ আপনি মার্কার ক্লিকগুলি সক্ষম করতে চান কিনা তা দ্বারা নির্ধারিত হয়। এটি ছাড়াও, এগুলি মূলত একই, তাই আপনি প্রথমে একটি Marker3DElement তৈরি করবেন এবং তারপরে ভবিষ্যতের ধাপে এটিকে Marker3DInteractiveElement- এ "আপগ্রেড" করবেন৷
আপনি এখানে এই পদক্ষেপের জন্য সম্পূর্ণ সমাধান দেখতে পারেন:
আপনার মার্কার কিছু উচ্চতা যোগ করুন
প্রথম জিনিসটি জানতে হবে যে মার্কারগুলি 3D মানচিত্রের সমস্ত কিছুর মতো 3D। তার মানে অবস্থানটির একটি উচ্চতা (উচ্চতা) থাকতে পারে এবং সেই উচ্চতা সমুদ্রপৃষ্ঠ, স্থল, জাল বা মাটিতে আটকে রাখা এবং উচ্চতার অবস্থান উপেক্ষা করার জন্য একটি অবস্থান হিসাবে প্রতিনিধিত্ব করতে পারে। আপনি AltitudeMode-এর জন্য ডকুমেন্টেশনের Altitude ধ্রুবক বিভাগে আরও বিশদ দেখতে পারেন।
আপনি মার্কার এক্সট্রুড বা এক্সট্রুড মান ব্যবহার না করে সেট করতে পারেন। এটি নির্ধারণ করবে যে মার্কারটির উচ্চতার সাথে প্রকৃত অবস্থান দেখাতে সাহায্য করার জন্য মাটিতে একটি ছোট রেখা টানা হবে, যা মাটিতে বিন্দু বাছাই করার জন্য দরকারী। আপনি Google UK অবস্থানের সাথে এর একটি উদাহরণ দেখতে পারেন। উভয়ই এক্সট্রুড এবং তাদের অবস্থান একটি পরম উচ্চতায় সেট করা আছে। প্রথমটি 75 মিটারে এবং দ্বিতীয়টি 125 মিটারে৷
|
|
উচ্চতা 75 মিটার। | উচ্চতা 125 মিটার। |
লুকান বা অক্লুশন এবং সংঘর্ষ সহ মার্কার দেখান
যদিও এটি আমাদের প্রদর্শনে গুরুত্বপূর্ণ নাও হতে পারে, যেহেতু অবস্থানগুলি বেশ দূরে, সেই সমস্ত মার্কারগুলির জন্য যেগুলি একে অপরের সাথে ওভারল্যাপ করতে পারে বা বিল্ডিংয়ের পিছনে পড়ে যেতে পারে সেগুলির জন্য আপনি সংঘর্ষের আচরণ বা আঁকতে গেলে অনির্দিষ্ট মানগুলির সাথে কী ঘটবে তা নিয়ন্ত্রণ করতে পারেন৷
সংঘর্ষের আচরণের জন্য আপনার কাছে নিম্নলিখিত বিকল্পগুলি রয়েছে:
-
REQUIRED: (ডিফল্ট) সংঘর্ষ নির্বিশেষে সর্বদা মার্কার প্রদর্শন করুন। -
OPTIONAL_AND_HIDES_LOWER_PRIORITYশুধুমাত্র মার্কারটি প্রদর্শন করুন যদি এটি অন্য মার্কারের সাথে ওভারল্যাপ না করে। যদি এই ধরনের দুটি মার্কার ওভারল্যাপ হয়, তাহলে উচ্চতরzIndexসহ একটি দেখানো হয়। তাদের একইzIndexথাকলে, নিচের উল্লম্ব স্ক্রিনের অবস্থান দেখানো হয়। -
REQUIRED_AND_HIDES_OPTIONALসংঘর্ষ নির্বিশেষে সর্বদা মার্কার প্রদর্শন করুন, এবং যে কোনোOPTIONAL_AND_HIDES_LOWER_PRIORITYমার্কার বা লেবেল লুকান যা মার্কারটির সাথে ওভারল্যাপ হবে৷
সংজ্ঞায়িত সংঘর্ষের আচরণের উপর ভিত্তি করে মার্কারগুলি কীভাবে দেখানো হচ্ছে তার পার্থক্যগুলি চিত্রগুলিতে দেখানো হয়েছে। REQUIRED সেট করার সময় সমস্ত মার্কার দেখানো হয়, কিন্তু আপনি যদি REQUIRED_AND_HIDES_OPTIONAL ব্যবহার করেন তবে এই ক্ষেত্রে স্ক্রিনে নীচের মার্কারগুলি প্রদর্শিত হবে (আপনি যদি চান অন্য মার্কারগুলিকে শীর্ষে প্রদর্শন করতে আপনি zIndex এর সাথে খেলতে পারেন)।
|
|
প্রয়োজন | REQUIRED_AND_HIDES_OPTIONAL |
আবদ্ধতার জন্য, আপনি বিল্ডিংয়ের পিছনে মার্কার টানা বা না বেছে নিতে পারেন। এটি নিম্নলিখিত ছবিতে দেখানো হয়েছে। যখন drawsWhenOccluded সত্যে সেট করা হয়, এটি বিল্ডিংয়ের পিছনে আঁকা হলে মার্কারগুলিকে কিছুটা ম্লান দেখায়, যখন মিথ্যাতে সেট করা হয় তখন এটি একটি বিল্ডিংয়ের পিছনে থাকা মার্কারগুলিকে লুকিয়ে রাখে। আরও বিশদ নিম্নলিখিত টেবিলে পাওয়া যাবে:
|
|
| |
উল্লিখিত হিসাবে, সংঘর্ষের মাধ্যমে লুকানো মার্কারগুলিকে ম্লান দেখানো হবে যদি আটকে থাকা মার্কারগুলির অঙ্কন অনুমোদিত হয়৷ ছবিতে, আপনি ভবনগুলির দ্বারা লুকানো কিছু চিহ্নিতকারী এবং কিছু অন্যান্য চিহ্নিতকারী দ্বারা লুকানো দেখতে পারেন৷
আরও বিশদ বিবরণের জন্য একটি 2D মানচিত্রে সংঘর্ষ-আচরণ উদাহরণটি পড়ুন।
ক্যানভাস সাফ করুন
এখন আপনার প্রথম মার্কার তৈরি করার সময়। ব্যবহারকারী মার্কারগুলিতে ফোকাস করে তা নিশ্চিত করতে, আপনি 3D মানচিত্রে ডিফল্ট লেবেলগুলি অক্ষম করতে পারেন৷
3D মানচিত্র উপাদানটির mode মান SATELLITE এ সেট করুন।
আরও তথ্যের জন্য, মোড দেখুন।
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE
});
এটি নিম্নলিখিত 3D মানচিত্রের ফলাফল:
প্রথম মার্কার যোগ করুন
একটি পরিষ্কার ক্যানভাস দিয়ে, আপনি এখন প্রথম মার্কার যোগ করতে পারেন। মূল পরামিতিগুলির মধ্যে অবস্থান এবং লেবেল অন্তর্ভুক্ত।
একটি মার্কার যোগ করতে, মার্কার অবস্থান সেট করুন. আপনি একটি লেবেলও অন্তর্ভুক্ত করতে পারেন, যা মার্কার উপরে প্রদর্শিত হয়, এবং অন্যান্য উপাদানগুলি যেমন Marker3DElement ডকুমেন্টেশনে বর্ণিত হয়েছে।
আমাদের মার্কার যোগ করতে আপনি লাইনের পরে নিম্নলিখিত কোড যোগ করবেন যা দেখানো হিসাবে ডিফল্ট লেবেলগুলিকে লুকিয়ে রাখে:
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
মার্কার তৈরি করার পরে, এটিকে 3D মানচিত্রে যোগ করুন অ্যাপেন্ড পদ্ধতি ব্যবহার করে। মনে রাখবেন যে মার্কারগুলি 3D মানচিত্রের মধ্যে চাইল্ড উপাদানগুলির একটি অ্যারে হিসাবে সংরক্ষণ করা হয়৷ একটি মার্কার পরিবর্তন করতে, আপনাকে এই অ্যারের মাধ্যমে এটি অ্যাক্সেস করতে হবে।
API লোড করার সময় লাইব্রেরির তালিকায় যোগ করে Maps JavaScript API থেকে Marker3DElement লোড হয়েছে তা নিশ্চিত করুন।
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
এখন পৃষ্ঠাটি লোড হলে লন্ডন অফিসের উপরে একটি মার্কার সহ সমগ্র ইউরোপ দৃশ্যমান হবে। অ্যানিমেশনে দেখানো হিসাবে, আপনি তৈরি করা অবস্থানের উপর মার্কার দেখতে ম্যানুয়ালি জুম করতে পারেন।
এখন আপনি আপনার প্রথম মার্কার লোড করেছেন, পরবর্তী ধাপ হল এটিকে আরও সুন্দর দেখান৷
বিভাগের সমাধান
এই পদক্ষেপের জন্য, সম্পূর্ণ পৃষ্ঠাটি আপনার বাস্তবায়ন যাচাই করার জন্য একটি সমাধান হিসাবে প্রদান করা হয়েছে। (যদি অনুলিপি করা হয়, নিশ্চিত করুন যে আপনি নিজের API কী ব্যবহার করছেন)।
<!DOCTYPE html>
<html>
<head>
<title>Step 3 - Simple Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
6. SVG মার্কার
এই ধাপে আপনি মার্কার পরিবর্তন করে মার্কারটিকে আরও সুন্দর করে তুলবেন যাতে মার্কারটিতে একটি পতাকা যুক্ত করা যায় যাতে এটি রয়েছে। আসুন দেখি কিভাবে এটি করা হয় এবং এর জন্য আপনাকে PinElement এর সাথে পরিচিত হতে হবে।
শেষ পর্যন্ত আপনি দেখানো হিসাবে একটি নতুন চেহারা পাবেন:
PinElement এর সাথে মৌলিক কাস্টমাইজেশন
জাভাস্ক্রিপ্ট এপিআই-এর মার্কারগুলির মধ্যে ভাগ করা উপাদানগুলির মধ্যে একটি, সেই 2D বা 3D মানচিত্রগুলি হল PinElement ৷ আপনি Map3DElement- এ একটি Marker3DElement যোগ করার সময়, আপনি সেই উপাদানটিতে শিশু হিসাবে Marker3DElement- এ একটি PinElement যোগ করবেন।
PinElement একটি মৌলিক স্তরে সাধারণ মার্কারকে পরিবর্তন করে তার সীমানার রঙ, অভ্যন্তরীণ বিন্দু (বা গ্লিফ) রঙ এবং পটভূমির রঙ সেট করার ক্ষমতা রাখে। আপনি একটি 2D মার্কার দেখানো ছবিতে এইগুলি দেখতে পারেন।
আপনি উপাদানটির স্কেল মান সেট করে একটি মার্কার আকারও সেট করতে পারেন (>1 স্বাভাবিকের চেয়ে বড় এবং অনুপাত হিসাবে <1 ছোট।)
আপনি যদি আরও কাস্টম লুক দিতে চান তবে এখনও স্ট্যান্ডার্ড PinElement ম্যাপ পিন লুক বজায় রাখতে চাইলে আপনি একটি ইমেজ বা svg ফাইল দিয়ে Glyph প্রতিস্থাপন করতে পারেন।
পিনএলিমেন্টের বাইরে
এই পদক্ষেপের জন্য আপনি একটি svg পতাকা এবং বিভিন্ন রঙের সাথে স্ট্যান্ডার্ড PinElement আপডেট করতে যাচ্ছেন, তবে এটি সচেতন হওয়াও ভাল যে আপনি একটি মার্কারের চেহারা সম্পূর্ণরূপে পরিবর্তন করতে পারেন যাতে এটি একটি মানচিত্রের পিনের মতোও না দেখায়। মার্কার-এর মধ্যে আপনি HTMLImageElement এবং SVGElement-এর মতো টেমপ্লেট ব্যবহারের মাধ্যমেও নতুন গ্রাফিক্সে স্লট করতে পারেন। আপনি Marker3DElement-Slots ডকুমেন্টেশনে এটি করার বিষয়ে আরও বিশদ জানতে পারেন।
সম্পূর্ণরূপে কী সম্ভব তা দেখতে নিম্নলিখিত নমুনাগুলি দেখুন যা বিভিন্ন কৌশল ব্যবহার করে স্টাইলিং মার্কারগুলির উদাহরণ দেখায়৷
|
|
PinElement এর মাধ্যমে মৌলিক কাস্টমাইজেশন সহ মার্কার, নমুনা দেখুন। | SVG এবং চিত্রের মাধ্যমে টেমপ্লেটের মাধ্যমে জটিল কাস্টমাইজেশন সহ মার্কার, নমুনা দেখুন। |
PinElement যোগ করুন
মার্কারের চেহারা পরিবর্তন করতে প্রথমে যা করতে হবে তা হল নিশ্চিত করা যে PinElement লাইব্রেরিটি পৃষ্ঠায় যোগ করা হয়েছে। maps3d লাইব্রেরি আমদানি করার পরে কোডের নিম্নলিখিত লাইন যোগ করে এটি করা হয়:
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
এখন উপাদানটি লোড করা হয়েছে PinElement রেফারেন্স এবং তৈরি করা যেতে পারে। কোডটি দেখুন, যেখানে মার্কার তৈরি করা হয়েছে তার মধ্যে এটি যোগ করুন এবং মার্কারটিকে 3D মানচিত্রে যুক্ত করুন।
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
কারণ আপনি শুধুমাত্র একটি মৌলিক পিন লোড করছেন না, এর সাথে সম্পর্কিত ব্যাকগ্রাউন্ডের রঙ এবং স্কেল সহ শুধুমাত্র PinElement সেট আপ করার বাইরেও অনেকগুলি জিনিস করা দরকার।
প্রথমে পতাকা আইকনের জন্য একটি রেফারেন্স একটি svg চিত্র তৈরি করতে হবে, এই ক্ষেত্রে একটি ইউনিয়ন জ্যাক। আপনি এগুলি https://flagicons.lipis.dev/- এ এই ধরনের সংগ্রহ থেকে পেতে পারেন।
একবার আপনার কাছে আইকনটি হয়ে গেলে আপনি এমন একটি জায়গায় রাখতে পারেন যা সাইটটি সনাক্ত করতে পারে, এই ক্ষেত্রে আপনি চিত্রটির অবস্থানটি হার্ড কোড করতে পারেন বা ডিরেক্টরির স্টাব হিসাবে বর্তমান সাইটের অবস্থান ব্যবহার করতে পারেন, যেমন বেস ভেরিয়েবলের সাথে এখানে দেখানো হয়েছে। তারপর আপনি এটিকে সার্ভারের অবস্থানের সাথে সঠিক পতাকার সাথে লিঙ্ক করতে পারেন, যা এখানে '/images/gb.svg' এর অধীনে রয়েছে।
এটি একটি PinElement তৈরি করে যা দেখানোর মতো দেখাচ্ছে:
সুতরাং একবার আপনি পতাকাটি সঠিক জায়গায় রেখে এবং কোডটি সঠিক জায়গায় রাখলে আপনার একটি 3D মানচিত্র থাকা উচিত যা এইরকম দেখায়:
এখন আমাদের মার্কার সব সাজিয়ে নিন, এটিকে পরিবর্তন করা যেতে পারে যাতে এটিকে ক্লিকযোগ্য করে তোলে যাতে ইন্টারঅ্যাক্টিভিটি যোগ করা যায়। এটি পরবর্তী ধাপে করা হবে।
বিভাগের সমাধান
এই পদক্ষেপের জন্য, সম্পূর্ণ পৃষ্ঠাটি আপনার বাস্তবায়ন যাচাই করার জন্য একটি সমাধান হিসাবে প্রদান করা হয়েছে। (যদি অনুলিপি করা হয়, নিশ্চিত করুন যে আপনি নিজের API কী ব্যবহার করছেন)।
এছাড়াও ভুলে যাবেন না যে আপনাকে পতাকা svg (অথবা আপনার পছন্দের png ফাইল!) ফাইলটি পেতে হবে এবং এটিকে একটি ডিরেক্টরি সংরক্ষণ করতে হবে যা আপনার পৃষ্ঠায় পাওয়া যাবে (এখানে এটি চিত্র ফোল্ডারে সংরক্ষিত আছে)।
<!DOCTYPE html>
<html>
<head>
<title>Step 4 - SVG Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
7. ইন্টারেক্টিভ মার্কার
শেষ ধাপে পৃষ্ঠায় একটি মার্কার যোগ করা হয়েছিল, কিন্তু দেখতে ভালো হওয়া ছাড়াও এটি তেমন কিছু করে না এবং আপনাকে এখনও একইভাবে 3D মানচিত্রের সাথে যোগাযোগ করতে হবে। পরবর্তী পদক্ষেপটি হল মার্কারটির সাথে কিছু করার ক্ষমতা যোগ করা যখন আপনি এটিতে ক্লিক করেন, মার্কারটিকে ব্যবহারকারীর মিথস্ক্রিয়ায় প্রতিক্রিয়া জানাতে অনুমতি দেয়।
এই বৈশিষ্ট্যটি যোগ করার জন্য আপনাকে Marker3DElement- কে একটি Marker3DInteractiveElement- এ রূপান্তর করতে হবে শেষ পর্যন্ত আপনার কাছে একই রকম দেখতে একটি পৃষ্ঠা থাকবে, কিন্তু একটি ক্লিকের মধ্যে মার্কারটি এখন একটি সতর্কতা পপ আপ করবে এবং এটি দেখতে এরকম কিছু দেখাবে:
প্রথমে মার্কার ক্লাস পরিবর্তন করুন
একটি মার্কারে ইন্টারঅ্যাক্টিভিটি যোগ করার জন্য আপনাকে নিশ্চিত করতে হবে যে এটি সঠিক শ্রেণী ব্যবহার করছে। Marker3DInteractiveElement একটি প্রয়োজন, কিন্তু এটি Marker3DElement-এর একটি এক্সটেনশন হওয়ায় আপনাকে নতুন ক্লাস লোড করা এবং কন্সট্রাক্টরে ক্লাসের নাম পরিবর্তন করা ছাড়া আর কিছু করতে হবে না।
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
দ্বিতীয়ত মার্কারে ক্লিক ইভেন্ট যোগ করুন
পরবর্তীতে ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনা করতে এবং প্রতিক্রিয়া জানাতে মার্কারটিতে একটি ক্লিক ইভেন্ট যুক্ত করুন। স্নিপেটে আপনি দেখতে পাচ্ছেন ক্লিক ইভেন্টটি মার্কারে যোগ করা হয়েছে। এই ক্ষেত্রে একটি সতর্কতা বহিস্কার করা হয় এবং টেক্সটটি পপ-আপ করে যা মার্কার থেকে লেবেল প্রদর্শন করে, বহিস্কার করা ইভেন্টের লক্ষ্য থেকে প্রাপ্ত যা আমাদের লেবেল সম্পত্তি অ্যাক্সেস করতে দেয়। মার্কার তৈরি হওয়ার পরেই আপনার অ্যাপ্লিকেশনে নিম্নলিখিত কোডটি যোগ করুন।
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
নোট স্টপ প্রোপাগেশন ইভেন্টটি নিশ্চিত করতে ব্যবহার করা হয় যে স্ট্যাকের অন্য কোন ক্লিক শ্রোতারা 3D ম্যাপ প্রধান ক্যানভাসের মতো অন্তর্নিহিত বস্তুগুলিতে ফায়ার করা হয়েছে।
সুতরাং এখন আপনি যখন আপনার অ্যাপ্লিকেশনটি চালাবেন তখন আপনার নিম্নলিখিত ফলাফল পাওয়া উচিত:
মার্কার ক্লিক করা হলে কিছু করার ক্ষমতার সাথে পরবর্তী ধাপে পৃষ্ঠায় কিছু অ্যানিমেশন যোগ করা সম্ভব।
বিভাগের সমাধান
এই পদক্ষেপের জন্য, সম্পূর্ণ পৃষ্ঠাটি আপনার বাস্তবায়ন যাচাই করার জন্য একটি সমাধান হিসাবে প্রদান করা হয়েছে। (যদি অনুলিপি করা হয়, নিশ্চিত করুন যে আপনি নিজের API কী ব্যবহার করছেন)।
<!DOCTYPE html>
<html>
<head>
<title>Step 5 - Interactive Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
8. উড়ে যান
এই ধাপে আপনি মার্কারকে ক্লিক করার ক্ষমতা ব্যবহার করবেন অ্যানিমেশন যোগ করতে এর অবস্থানে উড়তে। আপনি এখানে কর্ম এটি দেখতে পারেন.
flyCameraTo দিয়ে অ্যানিমেটিং
পৃষ্ঠায় এটি যোগ করার জন্য আপনি 3D মানচিত্রের flyCameraTo পদ্ধতি ব্যবহার করবেন, যেখানে ক্যামেরাটি আপনি যে ক্যামেরা অবস্থানে আছেন সেটির মধ্যে আপনি যে ক্যামেরা অবস্থানটি দেখতে চান সেখানে অ্যানিমেট করে, উভয়ের মধ্যে ইন্টারপোলেট করে এবং 3D মানচিত্রের মধ্যে ফ্লাইটটিকে অ্যানিমেট করে।
flyCameraTo ব্যবহার করার সময় আপনাকে FlyToAnimationOptions নির্দিষ্ট করতে হবে যার দুটি বৈশিষ্ট্য রয়েছে, endCamera , যে অবস্থানে ক্যামেরাটি অ্যানিমেশনের শেষে নির্দেশ করবে এবং durationMillis , যা স্থানান্তর করতে মিলিসেকেন্ডে সময় লাগবে।
উদাহরণে 65 ডিগ্রী, 500 মিটার রেঞ্জ এবং 0 ডিগ্রী শিরোনাম সহ উত্তরে পয়েন্ট ডুয়েট সহ মার্কার অবস্থান, বিল্ডিংটি দেখার জন্য ক্যামেরা সেট করুন। 12500 মিলিসেকেন্ড (12.5 সেকেন্ড) অ্যানিমেশন টাইমিং সেট করুন।
flyCameraTo স্নিপেট দিয়ে পৃষ্ঠায় বর্তমান সতর্কতা ইভেন্টটি প্রতিস্থাপন করুন:
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
এটিই, এখন আপনি পৃষ্ঠাটি রিফ্রেশ করতে সক্ষম হবেন এবং মার্কারটিতে ক্লিক করুন এবং অ্যানিমেশনে দেখানো হিসাবে Google UK-তে উড়ে যাবেন:
এই ধাপে আপনি একটি ক্লিকযোগ্য মার্কার যোগ করেছেন যা ক্যামেরাটিকে মার্কারের অবস্থানে উড়ে যায়। পরবর্তী ধাপে আপনি ক্যামেরাটিকে বিন্দুর চারপাশে উড়ানোর ক্ষমতা যোগ করবেন যাতে এটি অবস্থানটিকে প্রদক্ষিণ করে।
বিভাগের সমাধান
এই পদক্ষেপের জন্য, সম্পূর্ণ পৃষ্ঠাটি আপনার বাস্তবায়ন যাচাই করার জন্য একটি সমাধান হিসাবে প্রদান করা হয়েছে। (যদি অনুলিপি করা হয়, নিশ্চিত করুন যে আপনি নিজের API কী ব্যবহার করছেন)।
<!DOCTYPE html>
<html>
<head>
<title>Step 6 - Zoom To</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
9. চারপাশে উড়ান
আমাদের অ্যানিমেশনের চূড়ান্ত উপাদান হল বিল্ডিংয়ের চারপাশে একটি কক্ষপথ অ্যানিমেট করতে flyCameraAround পদ্ধতি ব্যবহার করা। শেষ পর্যন্ত আপনার কাছে একটি অ্যানিমেশন থাকবে যা বিল্ডিংয়ে উড়ে যাবে এবং তারপরে অ্যানিমেশনে দেখানো মতো এটির চারপাশে উড়বে। এটি সম্ভবত একটি বাস্তব উদাহরণের জন্য একটু দ্রুত কিন্তু অ্যাকশনটি কীভাবে কাজ করে তা দেখানোর জন্য দরকারী, এটি খুব দীর্ঘ না হয়ে, আপনি আপনার জন্য কাজ করে এমন একটি মান না পাওয়া পর্যন্ত আপনি সময় নিয়ে খেলতে পারেন।
এর চারপাশে উড়ে আসা যাক!
flyCameraAround পদ্ধতিটি flyCameraTo ফাংশনের অনুরূপ যে এটি একটি ইনপুট হিসাবে অনেকগুলি বিকল্প গ্রহণ করে যা নিয়ন্ত্রণ করে কোন অবস্থানটি নিয়ন্ত্রণ করবে, ক্যামেরার পরামিতি এবং মিলিসেকেন্ডে কক্ষপথে যেতে সময়। অবশেষে আপনি নির্দিষ্ট সময়ে ঘটতে পারে এমন ঘূর্ণনের সংখ্যাও নির্দিষ্ট করতে পারেন। আপনি এখানে FlyAroundAnimationOptions- এ সমস্ত বিকল্প দেখতে পারেন
কিন্তু এক মিনিট অপেক্ষা করুন!
অ্যানিমেশনে আপনি অ্যানিমেশনটিকে লোকেশনে উড়ে যেতে এবং তারপর অ্যানিমেশনগুলিকে চেইন করে এর চারপাশে উড়তে দেখতে পারেন। এটি করার জন্য আপনি 3D মানচিত্র gmp-animationend ইভেন্টটি ব্যবহার করুন যাতে নিশ্চিত হয়ে যায় যে পরবর্তীটি ফায়ার করার আগে বর্তমান অ্যানিমেশনটি শেষ হয়েছে। এই অ্যানিমেশনটি থামার আগে একবার হওয়া উচিত।
কোডটি একবার দেখুন, আগের বিভাগে যোগ করা কোডের পরে এটি প্রবেশ করান।
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
জিএমপি-অ্যানিমেশনএন্ড ইভেন্টের জন্য শোনার ক্ষমতা যোগ করার ফলে এটি ফ্লাইক্যামেরাআরাউন্ড ইভেন্টটি চালু করতে দেয়। ফ্লাই টু মেথডের শেষ ক্যামেরার জন্য যেটি ব্যবহার করা হয়েছিল সেটিকে প্রারম্ভিক বিন্দুতে সেট করার মানে হল একটি মসৃণ পরিবর্তন (যাতে একটি নতুন অবস্থানে কোনো বিড়ম্বনা সৃষ্টি না হয়)। আবার অ্যানিমেশন করতে কতটা সময় লাগে তা নিয়ন্ত্রণ করতে ডিউরেশনমিলিস সেট করা হয়। এই ক্ষেত্রে পদ্ধতিটি অন্য বিকল্পও নেয়, rounds , এবং এটি 1 হতে সেট করা হয়।
এর মানে ক্যামেরাটি 5 সেকেন্ডে একবার পয়েন্টের চারপাশে ঘুরবে। আপনার জন্য কাজ করে এমন নম্বর খুঁজে পেতে আপনি এই মানগুলিকে উপযুক্ত হিসাবে পরীক্ষা করতে পারেন।
এই মুহুর্তে অ্যানিমেশন শেষ হয়ে যাবে, কিন্তু আপনি এই বিট কোড দিয়ে জিএমপি-অ্যানিমেশনএন্ড ইভেন্টটি আবার ফায়ার করতে চান না, যার ফলে কক্ষপথটি অসীমভাবে ঘটবে। এটি এড়াতে শ্রোতাদের কাছে একটি অপশন দিয়ে সেটিকে একবার সত্যের সমান করতে হবে। এর অর্থ হল ইভেন্টটি সম্পূর্ণ হয়ে গেলে, অসীম লুপ এড়িয়ে গিয়ে সরিয়ে দেওয়া হবে।
একবার এটি যোগ করা হলে, আপনি সমাধানটি চালাতে সক্ষম হবেন এবং অ্যানিমেশনটি এখন মার্কারের চারপাশে উড়তে দেখা যাবে, যেমন অ্যানিমেশনে দেখানো হয়েছে:
এই ধাপে আপনি এখন একটি মার্কার যোগ করেছেন যা ক্লিক করা যেতে পারে, ক্যামেরা তারপর মার্কার অবস্থানে এবং চারপাশে উড়ে যায়। পরবর্তী পর্যায়ে এটি আরও পয়েন্ট যোগ করা শুরু করার এবং আমাদের তাদের মধ্যে স্থানান্তর করার অনুমতি দেওয়ার সময়।
বিভাগের সমাধান
এই পদক্ষেপের জন্য, সম্পূর্ণ পৃষ্ঠাটি আপনার বাস্তবায়ন যাচাই করার জন্য একটি সমাধান হিসাবে প্রদান করা হয়েছে। (যদি অনুলিপি করা হয়, নিশ্চিত করুন যে আপনি নিজের API কী ব্যবহার করছেন)।
<!DOCTYPE html>
<html>
<head>
<title>Step 7 - Zoom Around</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
10. প্যারিস!
যদিও লন্ডন একটি মহান শহর, এটি পৃষ্ঠায় একটু একাকী মনে হয় তাই আসুন প্যারিস থেকে শুরু করে কিছু নতুন অবস্থান যোগ করা শুরু করি। এটি করার জন্য একটি অ্যারে ব্যবহার করা যেতে পারে সমস্ত অবস্থানের নির্দিষ্ট বিশদ ধারণ করতে এবং তারপরে সেটিকে ইনপুট হিসাবে ব্যবহার করা যেতে পারে ফাংশন এবং ভেরিয়েবলের জন্য যা মার্কার ডিসপ্লে প্যারামিটার সেট করে এবং ক্যামেরা অবস্থানের চারপাশে উড়তে পারে। উল্লিখিত হিসাবে যা একটি বিল্ডিং এর একটি ভাল ক্যামেরা শট ফ্রেম করার উদ্দেশ্যে মার্কার পয়েন্ট অবস্থান থেকে ভিন্ন হতে পারে, উদাহরণস্বরূপ।
অবস্থান অ্যারে
একটি নির্দিষ্ট অবস্থান সম্পর্কে সমস্ত বিবরণ হার্ড কোড না করার জন্য, যেমন ক্যামেরা দেখা, মার্কার পয়েন্ট এবং প্রদর্শন বিকল্পগুলি আপনি এই ডেটা ধরে রাখতে json অবজেক্টের একটি ছোট অ্যারে ব্যবহার করতে পারেন। মার্কার তৈরি এবং অ্যাপ্লিকেশনে ব্যবহার করা হলে এটি প্রয়োগ করা যেতে পারে। আপনি কোড স্নিপেটে এই উদাহরণটি দেখতে পারেন, অ্যারে ধরে রাখার জন্য officeLocations নামে একটি ভেরিয়েবল তৈরি করে।
init ফাংশনের ঠিক আগে নিম্নলিখিত কোড যোগ করুন। এছাড়াও নোট করুন যে বেস ভেরিয়েবলটি init ফাংশনের বাইরে সরানো হয়েছে যাতে এটি অফিসের সমস্ত অবস্থানে প্রয়োগ করা যেতে পারে।
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
প্রতিটি অফিস অবস্থানের নিম্নলিখিত বৈশিষ্ট্য রয়েছে:
- নাম: অবস্থানের নাম।
- ক্যামেরা: প্রাথমিক ভিউ যা চারপাশে উড়ে যাওয়ার জন্য অবস্থানের দিকে তাকাতে পারে।
- পয়েন্ট: মার্কার স্থাপন করার অবস্থান।
- পিন: মার্কার পিনের রঙ এবং গ্লাইফ বৈশিষ্ট্যের বিশদ বিবরণ
একটি ভিন্ন কোণ
আপনি এখানে লক্ষ্য করতে পারেন যে UK-এর জন্য ক্যামেরা কেন্দ্র এবং মার্কার পয়েন্ট একই (উচ্চতা ছাড়াও), যেখানে ফ্রান্সের জন্য ক্যামেরা এবং পয়েন্ট ভিন্ন। এর কারণ হল ফ্রান্সের অবস্থানের জন্য মার্কারটিকে প্রারম্ভিক ক্যামেরা ভিউ থেকে আলাদা অবস্থানে থাকতে হবে, যা মার্কার পয়েন্ট ব্যবহার করা হলে দেওয়া হতে পারে তার চেয়ে এবং চারপাশে উড়ে যাওয়ার সময় পুরো বিল্ডিংটির একটি ভাল দৃশ্য দেয়।
ইউরোপে ফিরে যান
আরও পয়েন্ট থাকার একটি ফাংশন হল যে এটি তাদের মধ্যে সরাতে সক্ষম হওয়ার জন্য একটি প্রয়োজনীয়তা যোগ করে। আপনি নির্বাচনের অনুমতি দিতে একটি ড্রপ ডাউন ব্যবহার করতে পারেন, তবে এই উদাহরণে ব্যবহারকারীকে অন্য অবস্থান নির্বাচন করার অনুমতি দেওয়ার জন্য ক্যামেরাটি প্রতিবার ইউরোপীয় দৃশ্যে ফিরে আসবে।
এটি করার জন্য প্রাথমিক ভিউটিকে একটি ভেরিয়েবলে সংরক্ষণ করতে হবে যা ক্যামেরাটিকে ইউরোপের পুরো দৃশ্যে রিসেট করতে ব্যবহার করা যেতে পারে। এই উদাহরণে europeCamera নামে একটি নতুন ভেরিয়েবল যোগ করুন যা পরবর্তীতে ব্যবহারের জন্য সংরক্ষণ করতে পারে।
init ফাংশন আপডেট করুন
Map3DElement তৈরি করার সময় আপনাকে প্রথম সম্পাদনাটি একটি ইনপুট হিসাবে europeCamera অবজেক্ট ব্যবহার করতে হবে।
ভেরিয়েবলের মধ্যে সংরক্ষিত পরামিতিগুলির সাথে আপডেট করার জন্য আপনাকে দ্বিতীয় সম্পাদনাটি লুপে মার্কার তৈরির অংশটি মুড়ে ফেলতে হবে, আপনি দেখানো কোডে এগুলি দেখতে পারেন:
- office.point: মার্কার অবস্থান।
- office.name : মার্কার লেবেলের জন্য ব্যবহৃত অফিসের নাম।
- office.camera: প্রাথমিক ক্যামেরা অবস্থান।
- office.pin : ডিসপ্লে পার্থক্যের জন্য PinElement অপশন
এছাড়াও ফ্রেঞ্চ পতাকার জন্য একটি svg ফাইল বা ছবি পেতে ভুলবেন না!
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
মনে রাখবেন flyCameraAround অ্যানিমেশনের পরে সংরক্ষিত europeCamera ভেরিয়েবল ব্যবহার করে ইউরোপীয় ভিউতে ফিরে যাওয়ার জন্য একটি দ্বিতীয় জিএমপি-অ্যানিমেশনএন্ড ফাংশন যোগ করা হয়েছে। অ্যানিমেশনে দেখানো হয়েছে:
এই পর্যায়ে অ্যানিমেশন এবং একটি অবস্থান অ্যারে ব্যবহার করে দুটি অবস্থান এবং তাদের মধ্যে উড়তে সক্ষম হওয়ার জন্য অ্যাপ্লিকেশনটি বাড়ানো হয়েছে। পরবর্তী পর্যায়ে অফিসের বাকি স্থানগুলি অ্যারেতে যুক্ত করা হবে।
বিভাগের সমাধান
এই পদক্ষেপের জন্য, সম্পূর্ণ পৃষ্ঠাটি আপনার বাস্তবায়ন যাচাই করার জন্য একটি সমাধান হিসাবে প্রদান করা হয়েছে। (যদি অনুলিপি করা হয়, নিশ্চিত করুন যে আপনি নিজের API কী ব্যবহার করছেন)।
এছাড়াও ভুলে যাবেন না যে আপনাকে পতাকা svgs (বা আপনার পছন্দের png ফাইলগুলি) ফাইলটি পেতে হবে এবং এটিকে একটি ডিরেক্টরি সংরক্ষণ করতে হবে যা আপনার পৃষ্ঠা দ্বারা পাওয়া যেতে পারে (এখানে এটি চিত্র ফোল্ডারে সংরক্ষণ করা হয়েছে)।
<!DOCTYPE html>
<html>
<head>
<title>Step 8 - Paris!</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
11. আরও জায়গা
যদিও অ্যাপ্লিকেশনটিতে এখন প্রয়োজনীয় সমস্ত বৈশিষ্ট্য রয়েছে, 3D মানচিত্রটি এখনও কিছুটা বিচ্ছিন্ন দেখায়, তাই আপনি এখন এটিকে একটু ব্যস্ত করতে আরও কয়েকটি অবস্থান যুক্ত করবেন। একটি অ্যারের ব্যবহারের মাধ্যমে তাদের নিজস্ব অনন্য মার্কার সহ নতুন অবস্থানগুলিকে জনবহুল করা সহজ। শেষ ধাপ হল নিম্নলিখিত ভিউ না হওয়া পর্যন্ত মার্কার যোগ করা চালিয়ে যাওয়া।
আরো মার্কার যোগ করা হচ্ছে.
ইউরোপের অনেক দেশে গুগলের বেশ কয়েকটি অফিস রয়েছে, তাই আসুন সেগুলির কয়েকটিকে মানচিত্রে যুক্ত করি। এটা শুধু অ্যারে আপডেট করার ব্যাপার. এটি একটি ওয়েব পরিষেবা থেকে পাওয়া যেতে পারে বা কোথাও একটি স্ট্যাটিক ফাইল থেকে পরিবেশন করা যেতে পারে, আমাদের ক্ষেত্রে সরলতার উদ্দেশ্যে এটি একই পৃষ্ঠায় রাখা হবে।
আপনি যত খুশি তত মার্কার যোগ করতে পারেন, যেগুলি পৃষ্ঠা দ্বারা তোলা হয় এবং তারপর স্বয়ংক্রিয়ভাবে ভিউতে যুক্ত হয়৷ সঠিক পতাকাগুলি পেতে মনে রাখবেন এবং সেগুলিকে চিত্র ডিরেক্টরিতে সংরক্ষণ করুন (বা যেখানে সুবিধাজনক)।
const officeLocations = [
{
name: "Google France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
একবার আপনি এটি সম্পন্ন করার পরে দেখানো চিত্রের মতো একটি সম্পূর্ণ পৃষ্ঠা থাকা উচিত, যা একজন ব্যবহারকারীকে যেকোন অবস্থানে ক্লিক করতে এবং এটির চারপাশে উড়তে এবং তারপর ফিরে আসতে দেয়!
অভিনন্দন আপনি কোডল্যাব সম্পূর্ণ করেছেন, আসুন আমরা পরবর্তী বিভাগে শেষ করি এবং চেষ্টা করার জন্য অন্যান্য নতুন জিনিসগুলি সন্ধান করি!
বিভাগের সমাধান
এই পদক্ষেপের জন্য, সম্পূর্ণ পৃষ্ঠাটি আপনার বাস্তবায়ন যাচাই করার জন্য একটি সমাধান হিসাবে প্রদান করা হয়েছে। (যদি অনুলিপি করা হয়, নিশ্চিত করুন যে আপনি নিজের API কী ব্যবহার করছেন)।
এছাড়াও ভুলে যাবেন না যে আপনাকে পতাকা svgs (বা আপনার পছন্দের png ফাইলগুলি) ফাইলটি পেতে হবে এবং এটিকে একটি ডিরেক্টরি সংরক্ষণ করতে হবে যা আপনার পৃষ্ঠা দ্বারা পাওয়া যেতে পারে (এখানে এটি চিত্র ফোল্ডারে সংরক্ষণ করা হয়েছে)।
<!DOCTYPE html>
<html>
<head>
<title>Step 9 - More Places!</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
name: "Google France",
details: "8 Rue de Londres, 75009 Paris, France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
details: "6 Pancras Square, London N1C 4AG, UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
details: "Chau. d'Etterbeek 180, 1040 Brussel",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
details: "Stroupežnického 3191/17, 150 00 Praha 5-Smíchov",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
details: "Fragkokklisias 6, Athina 151 25",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
details: "ABC-Straße 19, 20354 Hamburg",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
details: "Gordon House, 4 Barrow St, Grand Canal Dock, Dublin 4, D04 V4X7",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
details: "Isola Building C, Via Federico Confalonieri, 4, 20124 Milano",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
details: "Vilnius Tech Park, Antakalnis st. 17, 2nd building, LT-10312, Vilnius",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
details: "Claude Debussylaan 34, 1082 MD Amsterdam",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
details: "Bryggegata 6, 0250 Oslo",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
details: "Rondo Daszynskiego 2, 00-843 Warsaw",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
details: "R. Duque de Palmela 37 Piso 4, 1250-097 Lisboa",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
details: "Bulevardul Corneliu Coposu 6-8, București 030167",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
details: "Torre Picasso, Pl. Pablo Ruiz Picasso, 1, Tetuán, 28020 Madrid",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
details: "Kungsbron 2, 111 22 Stockholm",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
details: "Brandschenkestrasse 110, 8002 Zürich",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'RELATIVE_TO_GROUND',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 2000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 2000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 2000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
12. পরবর্তী পদক্ষেপ
এই কোডল্যাবে, আপনি Maps JavaScript API-এ 3D দিয়ে কী করতে পারেন তার মূল বিষয়গুলি কভার করেছেন৷ এর পরে, মানচিত্রে এই বৈশিষ্ট্যগুলির মধ্যে কিছু যোগ করার চেষ্টা করুন:
- একটি অফিস নির্বাচনের অনুমতি দিতে একটি ড্রপ ডাউন তালিকা যোগ করুন।
- আরও কিছু ফ্লেয়ার দেখানোর জন্য অন্যান্য মার্কার স্টাইলিং বিকল্পগুলির কিছু ব্যবহার করুন!
- মানচিত্র জাভাস্ক্রিপ্ট API-এর জন্য উপলব্ধ অতিরিক্ত লাইব্রেরিগুলি দেখুন যা অতিরিক্ত বৈশিষ্ট্যগুলি সক্ষম করে, যেমন স্থানগুলি প্রতিটি অফিসের স্থান আইডি ব্যবহার করে রেটিং দেখাতে!
আপনি ওয়েবে Google মানচিত্র প্ল্যাটফর্ম এবং 3D এর সাথে কাজ করতে পারেন এমন আরও উপায় শেখা চালিয়ে যেতে, এই লিঙ্কগুলি দেখুন: