শুরু করুন

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

এই টিউটোরিয়ালে, আপনি Maps JavaScript-এর 3D Maps ব্যবহার করে আপনার প্রথম জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন তৈরি করার পদ্ধতি শিখবেন: এটি একটি সাধারণ উইন্ডো যা পটভূমিতে মেরিন হেডল্যান্ডস সহ গোল্ডেন গেট ব্রিজের উপর থেকে দেখা একটি দৃশ্য প্রদর্শন করে।

টিউটোরিয়ালটি সম্পন্ন করার পর, আপনি আপনার ডেভেলপমেন্ট এনভায়রনমেন্টে নিম্নলিখিত ম্যাপটি দেখতে পাবেন:

আপনার পরিবেশ তৈরি করুন

কোড লেখা শুরু করার আগে, আপনাকে জাভাস্ক্রিপ্ট চালানোর মতো একটি পরিবেশ তৈরি করতে হবে। এই টিউটোরিয়ালের জন্য, আপনি আপনার পরিবেশ হিসেবে একটি ওয়েব ব্রাউজার ব্যবহার করবেন। সব আধুনিক ওয়েব ব্রাউজারে জাভাস্ক্রিপ্টের জন্য বিল্ট-ইন সাপোর্ট রয়েছে, তাই আপনার কোনো অতিরিক্ত সফটওয়্যার ইনস্টল করার প্রয়োজন নেই।

  1. আপনার পছন্দমতো একটি টেক্সট এডিটর খুলুন।
  2. একটি নতুন ফাইল তৈরি করুন এবং .html এক্সটেনশন দিয়ে সংরক্ষণ করুন (যেমন, hello-p3djs.html )।

একটি HTML পৃষ্ঠা লিখুন

শুরুতে, আপনাকে একটি সাধারণ HTML কাঠামো ব্যবহার করে একটি ওয়েব পেজ তৈরি করতে হবে:

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

জাভাস্ক্রিপ্ট যোগ করুন

এরপরে, ম্যাপ লোড করার জন্য আপনি একটি কাস্টম HTML এলিমেন্ট যোগ করবেন। কোডটিতে দুটি এলিমেন্ট রয়েছে:

  • gmp-map-3d ক্যামেরার প্রারম্ভিক অবস্থান এবং ভিউ নির্ধারণের জন্য ব্যবহৃত প্যারামিটারগুলো থাকে।
  • script ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করার কল রয়েছে। YOUR_KEY এর জায়গায় আপনার এপিআই কী বসাতে ভুলবেন না। 

<html>
    <head>
        <title>Map</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="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

অ্যাপ্লিকেশনটি চালান

অ্যাপ্লিকেশনটি চালাতে এবং আউটপুট দেখতে, এই ধাপগুলো অনুসরণ করুন:

  1. আপনার তৈরি করা HTML ফাইলটি সংরক্ষণ করুন।
  2. ফাইলটি একটি ওয়েব ব্রাউজারে খুলুন (আপনি ফাইলটিতে ডাবল-ক্লিক করতে পারেন, এটিকে একটি ব্রাউজার উইন্ডোতে টেনে আনতে পারেন, অথবা রাইট-ক্লিক করে 'Open with' ব্যবহার করতে পারেন)।
  3. আপনি আপনার ব্রাউজার উইন্ডোতে মানচিত্রটি দেখতে পাবেন।

অভিনন্দন! আপনি এইমাত্র গুগলের 3D ম্যাপ ব্যবহার করে Maps JavaScript API-এর একটি অ্যাপ্লিকেশন লিখেছেন।

পরবর্তী পদক্ষেপ