শুরু করুন

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

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

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

আপনার পরিবেশ সেট-আপ করুন

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

  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-এ Maps JavaScript API লোড করার কল রয়েছে। YOUR_KEY-এর জায়গায় আপনার API 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=GOOGLE_MAPS_API_KEY&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. ওয়েব ব্রাউজারে ফাইলটি খুলুন (আপনি ফাইলটিতে ডবল-ক্লিক করতে পারেন, এটি টেনে এনে ব্রাউজার উইন্ডোতে ফেলতে পারেন অথবা মাউসের ডানদিকের বোতামে ক্লিক করে "এর মাধ্যমে খুলুন" বিকল্প ব্যবহার করতে পারেন)।
  3. আপনার ব্রাউজার উইন্ডোতে ম্যাপ দেখতে পাবেন।

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

পরবর্তী ধাপ