এই টিউটোরিয়ালে, আপনি ম্যাপ জাভাস্ক্রিপ্টে ফটোরিয়ালিস্টিক 3D মানচিত্র ব্যবহার করে আপনার প্রথম জাভাস্ক্রিপ্ট প্রোগ্রাম তৈরি করার মাধ্যমে নিজেকে গাইড করবেন: একটি সাধারণ উইন্ডো যা পটভূমিতে মেরিন হেডল্যান্ডস সহ গোল্ডেন গেট ব্রিজের ওভারহেড ভিউ প্রদর্শন করে।
টিউটোরিয়ালটি শেষ করার পরে, আপনার উন্নয়ন পরিবেশে নিম্নলিখিত মানচিত্রটি দেখতে হবে:
আপনার পরিবেশ সেট আপ করুন
আপনি কোড লেখা শুরু করার আগে, আপনাকে অবশ্যই একটি পরিবেশ সেট আপ করতে হবে যা জাভাস্ক্রিপ্ট চালায়। এই টিউটোরিয়ালের জন্য, আপনি আপনার পরিবেশ হিসাবে একটি ওয়েব ব্রাউজার ব্যবহার করবেন। সমস্ত আধুনিক ওয়েব ব্রাউজারে জাভাস্ক্রিপ্টের জন্য অন্তর্নির্মিত সমর্থন রয়েছে, তাই আপনাকে কোনও অতিরিক্ত সফ্টওয়্যার ইনস্টল করতে হবে না।
- আপনার পছন্দের একটি পাঠ্য সম্পাদক খুলুন।
- একটি নতুন ফাইল তৈরি করুন এবং একটি
.htmlএক্সটেনশন (যেমন,hello-p3djs.html) দিয়ে সংরক্ষণ করুন।
একটি HTML পৃষ্ঠা লিখুন
শুরু করার জন্য, আপনি একটি মৌলিক HTML গঠন সহ একটি ওয়েব পৃষ্ঠা তৈরি করবেন:
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
<!-- Your JavaScript code will go here -->
</body>
</html>
জাভাস্ক্রিপ্ট যোগ করুন
এর পরে, আপনি মানচিত্র লোড করতে জাভাস্ক্রিপ্ট কোড যোগ করবেন। কোড দুটি উপাদান রয়েছে:
-
gmp-map-3dপ্রারম্ভিক ক্যামেরার অবস্থান এবং দৃশ্য শুরু করার জন্য ব্যবহৃত প্যারামিটার রয়েছে। -
scriptমানচিত্র জাভাস্ক্রিপ্ট API লোড করার কল রয়েছে। আপনার API কী দিয়েYOUR_KEYপ্রতিস্থাপন করতে ভুলবেন না।
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<gmp-map-3d center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
</body>
</html>
প্রোগ্রাম চালান
প্রোগ্রামটি চালাতে এবং আউটপুট দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- আপনার তৈরি করা HTML ফাইলটি সংরক্ষণ করুন।
- একটি ওয়েব ব্রাউজারে ফাইলটি খুলুন (আপনি ফাইলটিকে ডাবল-ক্লিক করতে পারেন, এটিকে একটি ব্রাউজার উইন্ডোতে টেনে আনতে পারেন, অথবা ডান-ক্লিক করে "ওপেন উইথ" ব্যবহার করতে পারেন)।
- আপনি আপনার ব্রাউজার উইন্ডোতে মানচিত্র দেখতে হবে.
অভিনন্দন! আপনি এইমাত্র Google এর মানচিত্র জাভাস্ক্রিপ্ট API ফটোরিয়ালিস্টিক 3D মানচিত্র ব্যবহার করে একটি প্রোগ্রাম লিখেছেন৷
পরবর্তী পদক্ষেপ
- Google-এর বিদ্যমান নমুনাগুলি ব্যবহার করে আরও জটিল 3D মানচিত্রের অভিজ্ঞতা তৈরি করুন৷
- রেফারেন্স ডকুমেন্টেশন পড়ে Maps JavaScript API-এ 3D মানচিত্রের সম্পূর্ণ সম্ভাবনা আবিষ্কার করুন।
এই টিউটোরিয়ালে, আপনি ম্যাপ জাভাস্ক্রিপ্টে ফটোরিয়ালিস্টিক 3D মানচিত্র ব্যবহার করে আপনার প্রথম জাভাস্ক্রিপ্ট প্রোগ্রাম তৈরি করার মাধ্যমে নিজেকে গাইড করবেন: একটি সাধারণ উইন্ডো যা পটভূমিতে মেরিন হেডল্যান্ডস সহ গোল্ডেন গেট ব্রিজের ওভারহেড ভিউ প্রদর্শন করে।
টিউটোরিয়ালটি শেষ করার পরে, আপনার উন্নয়ন পরিবেশে নিম্নলিখিত মানচিত্রটি দেখতে হবে:
আপনার পরিবেশ সেট আপ করুন
আপনি কোড লেখা শুরু করার আগে, আপনাকে অবশ্যই একটি পরিবেশ সেট আপ করতে হবে যা জাভাস্ক্রিপ্ট চালায়। এই টিউটোরিয়ালের জন্য, আপনি আপনার পরিবেশ হিসাবে একটি ওয়েব ব্রাউজার ব্যবহার করবেন। সমস্ত আধুনিক ওয়েব ব্রাউজারে জাভাস্ক্রিপ্টের জন্য অন্তর্নির্মিত সমর্থন রয়েছে, তাই আপনাকে কোনও অতিরিক্ত সফ্টওয়্যার ইনস্টল করতে হবে না।
- আপনার পছন্দের একটি পাঠ্য সম্পাদক খুলুন।
- একটি নতুন ফাইল তৈরি করুন এবং একটি
.htmlএক্সটেনশন (যেমন,hello-p3djs.html) দিয়ে সংরক্ষণ করুন।
একটি HTML পৃষ্ঠা লিখুন
শুরু করার জন্য, আপনি একটি মৌলিক HTML গঠন সহ একটি ওয়েব পৃষ্ঠা তৈরি করবেন:
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
<!-- Your JavaScript code will go here -->
</body>
</html>
জাভাস্ক্রিপ্ট যোগ করুন
এর পরে, আপনি মানচিত্র লোড করতে জাভাস্ক্রিপ্ট কোড যোগ করবেন। কোড দুটি উপাদান রয়েছে:
-
gmp-map-3dপ্রারম্ভিক ক্যামেরার অবস্থান এবং দৃশ্য শুরু করার জন্য ব্যবহৃত প্যারামিটার রয়েছে। -
scriptমানচিত্র জাভাস্ক্রিপ্ট API লোড করার কল রয়েছে। আপনার API কী দিয়েYOUR_KEYপ্রতিস্থাপন করতে ভুলবেন না।
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<gmp-map-3d center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
</body>
</html>
প্রোগ্রাম চালান
প্রোগ্রামটি চালাতে এবং আউটপুট দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- আপনার তৈরি করা HTML ফাইলটি সংরক্ষণ করুন।
- একটি ওয়েব ব্রাউজারে ফাইলটি খুলুন (আপনি ফাইলটিকে ডাবল-ক্লিক করতে পারেন, এটিকে একটি ব্রাউজার উইন্ডোতে টেনে আনতে পারেন, অথবা ডান-ক্লিক করে "ওপেন উইথ" ব্যবহার করতে পারেন)।
- আপনি আপনার ব্রাউজার উইন্ডোতে মানচিত্র দেখতে হবে.
অভিনন্দন! আপনি এইমাত্র Google এর মানচিত্র জাভাস্ক্রিপ্ট API ফটোরিয়ালিস্টিক 3D মানচিত্র ব্যবহার করে একটি প্রোগ্রাম লিখেছেন৷
পরবর্তী পদক্ষেপ
- Google-এর বিদ্যমান নমুনাগুলি ব্যবহার করে আরও জটিল 3D মানচিত্রের অভিজ্ঞতা তৈরি করুন৷
- রেফারেন্স ডকুমেন্টেশন পড়ে Maps JavaScript API-এ 3D মানচিত্রের সম্পূর্ণ সম্ভাবনা আবিষ্কার করুন।
এই টিউটোরিয়ালে, আপনি ম্যাপ জাভাস্ক্রিপ্টে ফটোরিয়ালিস্টিক 3D মানচিত্র ব্যবহার করে আপনার প্রথম জাভাস্ক্রিপ্ট প্রোগ্রাম তৈরি করার মাধ্যমে নিজেকে গাইড করবেন: একটি সাধারণ উইন্ডো যা পটভূমিতে মেরিন হেডল্যান্ডস সহ গোল্ডেন গেট ব্রিজের ওভারহেড ভিউ প্রদর্শন করে।
টিউটোরিয়ালটি শেষ করার পরে, আপনার উন্নয়ন পরিবেশে নিম্নলিখিত মানচিত্রটি দেখতে হবে:
আপনার পরিবেশ সেট আপ করুন
আপনি কোড লেখা শুরু করার আগে, আপনাকে অবশ্যই একটি পরিবেশ সেট আপ করতে হবে যা জাভাস্ক্রিপ্ট চালায়। এই টিউটোরিয়ালের জন্য, আপনি আপনার পরিবেশ হিসাবে একটি ওয়েব ব্রাউজার ব্যবহার করবেন। সমস্ত আধুনিক ওয়েব ব্রাউজারে জাভাস্ক্রিপ্টের জন্য অন্তর্নির্মিত সমর্থন রয়েছে, তাই আপনাকে কোনও অতিরিক্ত সফ্টওয়্যার ইনস্টল করতে হবে না।
- আপনার পছন্দের একটি পাঠ্য সম্পাদক খুলুন।
- একটি নতুন ফাইল তৈরি করুন এবং একটি
.htmlএক্সটেনশন (যেমন,hello-p3djs.html) দিয়ে সংরক্ষণ করুন।
একটি HTML পৃষ্ঠা লিখুন
শুরু করার জন্য, আপনি একটি মৌলিক HTML গঠন সহ একটি ওয়েব পৃষ্ঠা তৈরি করবেন:
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
<!-- Your JavaScript code will go here -->
</body>
</html>
জাভাস্ক্রিপ্ট যোগ করুন
এর পরে, আপনি মানচিত্র লোড করতে জাভাস্ক্রিপ্ট কোড যোগ করবেন। কোড দুটি উপাদান রয়েছে:
-
gmp-map-3dপ্রারম্ভিক ক্যামেরার অবস্থান এবং দৃশ্য শুরু করার জন্য ব্যবহৃত প্যারামিটার রয়েছে। -
scriptমানচিত্র জাভাস্ক্রিপ্ট API লোড করার কল রয়েছে। আপনার API কী দিয়েYOUR_KEYপ্রতিস্থাপন করতে ভুলবেন না।
<!DOCTYPE html>
<html>
<head>
<title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<gmp-map-3d center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
</body>
</html>
প্রোগ্রাম চালান
প্রোগ্রামটি চালাতে এবং আউটপুট দেখতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- আপনার তৈরি করা HTML ফাইলটি সংরক্ষণ করুন।
- একটি ওয়েব ব্রাউজারে ফাইলটি খুলুন (আপনি ফাইলটিকে ডাবল-ক্লিক করতে পারেন, এটিকে একটি ব্রাউজার উইন্ডোতে টেনে আনতে পারেন, অথবা ডান-ক্লিক করে "ওপেন উইথ" ব্যবহার করতে পারেন)।
- আপনি আপনার ব্রাউজার উইন্ডোতে মানচিত্র দেখতে হবে.
অভিনন্দন! আপনি এইমাত্র Google এর মানচিত্র জাভাস্ক্রিপ্ট API ফটোরিয়ালিস্টিক 3D মানচিত্র ব্যবহার করে একটি প্রোগ্রাম লিখেছেন৷
পরবর্তী পদক্ষেপ
- Google-এর বিদ্যমান নমুনাগুলি ব্যবহার করে আরও জটিল 3D মানচিত্রের অভিজ্ঞতা তৈরি করুন৷
- রেফারেন্স ডকুমেন্টেশন পড়ে Maps JavaScript API-এ 3D মানচিত্রের সম্পূর্ণ সম্ভাবনা আবিষ্কার করুন।