আপনার Maps JavaScript API অ্যাপ্লিকেশন V2 থেকে V3-তে আপগ্রেড করা

Maps JavaScript API v2 ২৬ মে, ২০২১ থেকে আর উপলভ্য নেই। এর ফলে, আপনার সাইটের v2 ম্যাপ কাজ করা বন্ধ করে দেবে এবং JavaScript সংক্রান্ত সমস্যা দেখাবে। আপনার সাইটে ম্যাপ ব্যবহার করা চালিয়ে যেতে, Maps JavaScript API v3-এ মাইগ্রেট করুন। এই নির্দেশিকা আপনাকে প্রসেসটি সম্পূর্ণ করতে সাহায্য করবে।

এক নজরে

প্রতিটি অ্যাপ্লিকেশনের মাইগ্রেশন প্রসেস কিছুটা আলাদা হবে; তবে, কিছু ধাপ আছে যা সব প্রোজেক্টের ক্ষেত্রে একই:

  1. নতুন 'কী' পান। Maps JavaScript API এখন 'কী' ম্যানেজ করার জন্য Google Cloud কনসোল ব্যবহার করে। আপনি এখনও v2 কী ব্যবহার করলে, মাইগ্রেশন শুরু করার আগে আপনার নতুন API কী পেতে ভুলবেন না।
  2. আপনার API বুটস্ট্র্যাপ আপডেট করুন। বেশিরভাগ অ্যাপ্লিকেশন নিম্নলিখিত কোড ব্যবহার করে Maps JavaScript API v3 লোড করবে:
    <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  3. আপনার কোড আপডেট করুন। কতটা পরিবর্তন করতে হবে তা আপনার অ্যাপ্লিকেশনের উপর নির্ভর করে। সাধারণত যেসব পরিবর্তন করা হয়:
    • সবসময় google.maps নেমস্পেস রেফারেন্স হিসেবে ব্যবহার করুন। v3-তে, সব Maps JavaScript API কোড গ্লোবাল নেমস্পেসের পরিবর্তে google.maps.* নেমস্পেসে স্টোর করা হয়। এই প্রসেসের অংশ হিসেবে বেশিরভাগ অবজেক্টের নামও পরিবর্তন করা হয়েছে। যেমন, GMap2-এর পরিবর্তে, আপনি এখন google.maps.Map লোড করবেন।
    • পুরনো পদ্ধতির কোনও রেফারেন্স থাকলে তা সরিয়ে দিন। সাধারণ উদ্দেশ্যে ব্যবহার করা হয় এমন বেশ কিছু ইউটিলিটি পদ্ধতি সরিয়ে দেওয়া হয়েছে, যেমন GDownloadURL এবং GLog। হয় এই কার্যকারিতা থার্ড-পার্টি ইউটিলিটি লাইব্রেরি দিয়ে পরিবর্তন করুন, অথবা আপনার কোড থেকে এইসব রেফারেন্স সরিয়ে দিন।
    • (ঐচ্ছিক) আপনার কোডে লাইব্রেরি যোগ করুন। অনেক ফিচার ইউটিলিটি লাইব্রেরিতে এক্সটার্নালাইজ করা হয়েছে যাতে প্রতিটি অ্যাপকে শুধুমাত্র API-এর সেই অংশগুলি লোড করতে হবে যা ব্যবহার করা হবে।
    • (ঐচ্ছিক) v3 এক্সটার্ন ব্যবহার করার জন্য আপনার প্রোজেক্ট কনফিগার করুন। v3 এক্সটার্ন ব্যবহার করে আপনার কোড Closure Compiler-এর মাধ্যমে যাচাই করতে পারেন অথবা আপনার IDE-তে অটোমেটিক সম্পূর্ণ করার ফিচার ট্রিগার করতে পারেন। Advanced Compilation এবং Externs সম্পর্কে আরও জানুন।
  4. পরীক্ষা ও আইটারেট করুন। এই পর্যায়ে আপনাকে এখনও কিছু কাজ করতে হবে, তবে সুখবর হল যে আপনি আপনার নতুন v3 Maps অ্যাপ্লিকেশন তৈরি করার পথে অনেকটাই এগিয়ে গেছেন!

Maps JavaScript API-এর V3-তে পরিবর্তন

মাইগ্রেশনের পরিকল্পনা করার আগে, Maps JavaScript API v2 এবং Maps JavaScript API v3-এর মধ্যে পার্থক্যগুলি বোঝার জন্য আপনার সময় নেওয়া উচিত। Maps JavaScript API-এর নতুন ভার্সনটি একেবারে শুরু থেকে লেখা হয়েছে, যেখানে আধুনিক JavaScript প্রোগ্রামিং টেকনিক, লাইব্রেরির আরও বেশি ব্যবহার এবং একটি সরলীকৃত API-এর উপর ফোকাস করা হয়েছে। API-তে অনেক নতুন ফিচার যোগ করা হয়েছে এবং বেশ কিছু পরিচিত ফিচার পরিবর্তন করা হয়েছে বা সরিয়ে দেওয়া হয়েছে। এই বিভাগে দুটি রিলিজের মধ্যে কিছু মূল পার্থক্য হাইলাইট করা হয়েছে।

v3 API-তে করা কিছু পরিবর্তনের মধ্যে রয়েছে:

  • একটি স্ট্রিমলাইনড কোর লাইব্রেরি। অনেক সাপ্লিমেন্টারি ফাংশন লাইব্রেরিতে সরিয়ে দেওয়া হয়েছে, যা Core API-এর লোড ও পার্সিংয়ের সময় কমাতে সাহায্য করে, যার ফলে যেকোনও ডিভাইসে আপনার ম্যাপ দ্রুত লোড হয়।
  • পলিগন রেন্ডারিং ও মার্কার প্লেসমেন্টের মতো বিভিন্ন ফিচারের পারফর্ম্যান্স উন্নত করা হয়েছে।
  • মোবাইল প্রক্সি ও কর্পোরেট ফায়ারওয়াল দ্বারা ব্যবহৃত শেয়ার করা অ্যাড্রেস আরও ভালোভাবে ম্যানেজ করার জন্য ক্লায়েন্ট-সাইড ব্যবহারের সীমার ক্ষেত্রে নতুন পদ্ধতি।
  • বেশ কিছু আধুনিক ব্রাউজার ও মোবাইল ব্রাউজারের জন্য সহায়তা যোগ করা হয়েছে। Internet Explorer 6-এর জন্য সহায়তা সরিয়ে দেওয়া হয়েছে।
  • সাধারণ-উদ্দেশ্যের অনেক হেল্পার ক্লাস ( GLog বা GDownloadUrl) সরিয়ে দেওয়া হয়েছে। বর্তমানে, অনেক চমৎকার জাভাস্ক্রিপ্ট লাইব্রেরি আছে যা একই ধরনের কার্যকারিতা প্রদান করে, যেমন Closure বা jQuery।
  • HTML5 Street View-এর প্রয়োগ যা যেকোনও মোবাইল ডিভাইসে লোড হবে।
  • কাস্টম Street View প্যানোরামা আপনার নিজস্ব ফটোর সাথে, যা আপনাকে স্কি স্লোপ, বিক্রির জন্য বাড়ি বা অন্যান্য আকর্ষণীয় জায়গার প্যানোরামা শেয়ার করতে দেয়।
  • স্টাইল করা ম্যাপ কাস্টমাইজেশন আপনাকে বেস ম্যাপে এলিমেন্টের ডিসপ্লে পরিবর্তন করতে দেয় যাতে আপনার অনন্য ভিজ্যুয়াল স্টাইলের সাথে তা ম্যাচ করে।
  • বেশ কিছু নতুন পরিষেবার জন্য সহায়তা, যেমন ElevationService এবং Distance Matrix।
  • উন্নত দিকনির্দেশ পরিষেবা বিকল্প রুট, রুট অপ্টিমাইজেশন ( ট্রাভেলিং সেলসপার্সন সমস্যার আনুমানিক সমাধান), সাইকেলের দিকনির্দেশ ( সাইকেলের লেয়ার সহ), ট্রানজিটের দিকনির্দেশ এবং ড্র্যাগেবল দিকনির্দেশ প্রদান করে।
  • Geocoding API v2 থেকে accuracy ভ্যালুর চেয়ে আরও সঠিক টাইপ সংক্রান্ত তথ্য প্রদান করে এমন একটি আপডেট করা Geocoding ফর্ম্যাট।
  • একটি ম্যাপে একাধিক তথ্য উইন্ডোর জন্য সহায়তা

আপনার অ্যাপ্লিকেশন আপগ্রেড করুন

আপনার নতুন 'কী'

Maps JavaScript API v3, v2 থেকে একটি নতুন কী সিস্টেম ব্যবহার করে। আপনি হয়ত আগে থেকেই আপনার অ্যাপ্লিকেশনের সাথে v3 কী ব্যবহার করছেন, সেক্ষেত্রে কোনও পরিবর্তন করার প্রয়োজন নেই। যাচাই করতে, যে URL থেকে Maps JavaScript API লোড করেন, সেটির key প্যারামিটার চেক করুন। 'ABQIAA' দিয়ে 'কী' ভ্যালু শুরু হলে, আপনি v2 'কী' ব্যবহার করছেন। আপনার কাছে v2 কী থাকলে, মাইগ্রেশনের অংশ হিসেবে আপনাকে অবশ্যই v3 কী-তে আপগ্রেড করতে হবে, যা:

Maps JavaScript API v3 লোড করার সময় কী পাস করা হয়। API কী তৈরি করা সম্পর্কে আরও জানুন।

মনে রাখবেন, আপনি Google Maps APIs for Work-এর গ্রাহক হলে, key প্যারামিটার ব্যবহার করার পরিবর্তে client প্যারামিটার সহ ক্লায়েন্ট আইডি ব্যবহার করতে পারেন। Maps JavaScript API v3-তে এখনও ক্লায়েন্ট আইডি কাজ করে এবং 'কী' আপগ্রেড করার প্রসেস সম্পূর্ণ করার প্রয়োজন হয় না।

API লোড করুন

আপনার কোডে প্রথম যে পরিবর্তনটি করতে হবে তা হল আপনি কীভাবে API লোড করবেন। v2-এ, আপনি http://maps.google.com/maps-এ অনুরোধের মাধ্যমে Maps JavaScript API লোড করেন। আপনি যদি Maps JavaScript API v3 লোড করেন, তাহলে আপনাকে নিম্নলিখিত পরিবর্তনগুলি করতে হবে:

  1. //maps.googleapis.com/maps/api/js থেকে API লোড করুন
  2. file প্যারামিটার সরিয়ে দিন।
  3. আপনার নতুন v3 কী দিয়ে key প্যারামিটার আপডেট করুন। Google Maps APIs for Work গ্রাহকদের client প্যারামিটার ব্যবহার করা উচিত।
  4. (শুধুমাত্র Google Maps Platform প্রিমিয়াম প্ল্যান) Google Maps Platform প্রিমিয়াম প্ল্যান ডেভেলপার গাইডে যেভাবে ব্যাখ্যা করা হয়েছে সেই অনুযায়ী client প্যারামিটার দেওয়া হয়েছে কিনা তা যাচাই করুন।
  5. লেটেস্ট রিলিজ করা ভার্সনের জন্য অনুরোধ করতে v প্যারামিটার সরান অথবা v3 ভার্সনিং স্কিম অনুযায়ী এর ভ্যালু পরিবর্তন করুন।
  6. (ঐচ্ছিক) hl প্যারামিটারটি language দিয়ে প্রতিস্থাপন করুন এবং এর মান সংরক্ষণ করুন।
  7. (ঐচ্ছিক) ঐচ্ছিক লাইব্রেরি লোড করতে libraries প্যারামিটার যোগ করুন।

সবচেয়ে সহজ ক্ষেত্রে, v3 বুটস্ট্র্যাপ শুধুমাত্র আপনার API কী প্যারামিটার নির্দিষ্ট করবে:

<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

নিচের উদাহরণে জার্মান ভাষায় Maps JavaScript API v2-এর লেটেস্ট ভার্সনের জন্য অনুরোধ করা হয়েছে:

<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>

নিচের উদাহরণটি v3-এর জন্য একটি সমতুল্য অনুরোধ।

<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>

google.maps নেমস্পেস

Maps JavaScript API v3-তে সবচেয়ে উল্লেখযোগ্য পরিবর্তন হল google.maps নেমস্পেসের সূচনা। v2 API ডিফল্ট হিসেবে গ্লোবাল নেমস্পেসে সব অবজেক্ট প্লেস করে, যার ফলে নামের মধ্যে সংঘর্ষ হতে পারে। v3-এর মধ্যে, সব অবজেক্ট google.maps নেমস্পেসের মধ্যে থাকে।

v3-তে আপনার অ্যাপ্লিকেশন মাইগ্রেট করার সময়, নতুন নেমস্পেস ব্যবহার করার জন্য আপনাকে কোড পরিবর্তন করতে হবে। "G" সার্চ করে "google.maps." দিয়ে রিপ্লেস করলে সম্পূর্ণ কাজ হবে না; তবে, আপনার কোড পর্যালোচনা করার সময় এটি প্রয়োগ করা একটি ভালো থাম্ব রুল। v2 এবং v3-তে সমতুল্য ক্লাসের কিছু উদাহরণ নিচে দেওয়া হল।

v2 v3
GMap2 google.maps.Map
GLatLng google.maps.LatLng
GInfoWindow google.maps.InfoWindow
GMapOptions google.map.MapOptions
G_API_VERSION google.maps.version
GPolyStyleOptions google.maps.PolygonOptions
or google.maps.PolylineOptions

পুরনো কোড সরান

Maps JavaScript API v3-এ v2-এর বেশিরভাগ কার্যকারিতার সমান্তরাল রয়েছে; তবে, কিছু ক্লাস আছে যা আর কাজ করে না। মাইগ্রেশনের অংশ হিসেবে, আপনাকে হয় থার্ড-পার্টি ইউটিলিটি লাইব্রেরির মাধ্যমে এইসব ক্লাস পরিবর্তন করতে হবে অথবা আপনার কোড থেকে এইসব রেফারেন্স সরিয়ে দিতে হবে। অনেক চমৎকার জাভাস্ক্রিপ্ট লাইব্রেরি আছে যা একই ধরনের কার্যকারিতা প্রদান করে, যেমন Closure বা jQuery।

Maps JavaScript API v3-তে নিম্নলিখিত ক্লাসগুলির কোনও সমান্তরাল নেই:

GBoundsGLanguage
GBrowserIsCompatibleGLayer
GControlGLog
GControlAnchorGMercatorProjection
GControlImplGNavLabelControl
GControlPositionGObliqueMercator
GCopyrightGOverlay
GCopyrightCollectionGPhotoSpec
GDownloadUrlGPolyEditingOptions
GDraggableObjectGScreenOverlay
GDraggableObjectOptionsGStreetviewFeatures
GFactualGeocodeCacheGStreetviewLocation
GGeoAddressAccuracyGStreetviewOverlay
GGeocodeCacheGStreetviewUserPhotosOptions
GGoogleBarGTileLayerOptions
GGoogleBarAdsOptionsGTileLayerOverlayOptions
GGoogleBarLinkTargetGTrafficOverlayOptions
GGoogleBarListingTypesGUnload
GGoogleBarOptionsGXml
GGoogleBarResultListGXmlHttp
GInfoWindowTabGXslt
GKeyboardHandler

কোড তুলনা করুন

v2 এবং v3 API-এর মাধ্যমে লেখা দুটি অ্যাপ্লিকেশনের তুলনা এখানে দেওয়া হল।

<!DOCTYPE html>
<html>
  <head>
    <script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script>
    <style>
      html, body, #map { height: 100%; margin: 0; }
    </style>
    <script>
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(
            document.getElementById('map'));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();

        map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));

      }
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map"></div>
  </body>
</html>
    
<!DOCTYPE html>
<html>
  <head>
    <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
      html, body, #map { height: 100%; margin: 0; }
    </style>
    <script>
    function initialize() {
      var map = new google.maps.Map(
        document.getElementById('map'), {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var marker = new google.maps.Marker({
            position: new google.maps.LatLng(37.4419, -122.1419),
            map: map
      });

    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

আপনি দেখতেই পাচ্ছেন যে দুটি অ্যাপ্লিকেশনের মধ্যে বেশ কিছু পার্থক্য রয়েছে। উল্লেখযোগ্য পরিবর্তনের মধ্যে রয়েছে:

  • যে ঠিকানা থেকে API লোড করা হয় সেটি পরিবর্তন করা হয়েছে।
  • v3-তে GBrowserIsCompatible() এবং GUnload() পদ্ধতির আর প্রয়োজন নেই এবং API থেকে সরিয়ে দেওয়া হয়েছে।
  • API-তে সেন্ট্রাল অবজেক্ট হিসেবে GMap2 অবজেক্টটি google.maps.Map দ্বারা প্রতিস্থাপিত হয়।
  • প্রপার্টি এখন বিকল্প ক্লাসের মাধ্যমে লোড করা হয়। উপরের উদাহরণে, আমরা ম্যাপ লোড করার জন্য প্রয়োজনীয় তিনটি প্রপার্টি সেট করেছি — center, zoom এবং mapTypeId — ইনলাইন করা MapOptions অবজেক্ট ব্যবহার করে।
  • v3-এ ডিফল্ট UI ডিফল্ট হিসেবে চালু থাকে। আপনি MapOptions অবজেক্টে disableDefaultUI প্রপার্টি 'সত্য' হিসেবে সেট করে এটি বন্ধ করতে পারবেন।

সারাংশ

এই পর্যায়ে আপনি Maps JavaScript API-এর v2 থেকে v3-তে মাইগ্রেট করার সাথে জড়িত কিছু মূল পয়েন্ট সম্পর্কে জানতে পারবেন। আরও কিছু তথ্য আছে যা আপনার জানা প্রয়োজন হতে পারে, তবে এটি আপনার অ্যাপ্লিকেশনের উপর নির্ভর করবে। নিম্নলিখিত বিভাগে, আমরা নির্দিষ্ট কেসের জন্য মাইগ্রেশন সংক্রান্ত নির্দেশাবলী অন্তর্ভুক্ত করেছি যা আপনার ক্ষেত্রে প্রযোজ্য হতে পারে। এছাড়াও, আপগ্রেড করার সময় কাজে লাগতে পারে এমন কিছু রিসোর্স এখানে দেওয়া হল।

  • Maps JavaScript API v3 ডেভেলপার ডকুমেন্টেশন হল API এবং এটি কীভাবে কাজ করে সেই সম্পর্কে আরও জানার সেরা জায়গা।
  • Maps JavaScript API v3 রেফারেন্স আপনাকে v3 API-তে নতুন ক্লাস ও পদ্ধতি সম্পর্কে আরও জানতে সাহায্য করবে।
  • Stack Overflow কমিউনিটি হল আপনার কোড সম্পর্কিত প্রশ্ন জিজ্ঞাসা করার একটি দুর্দান্ত জায়গা। সাইটে, Maps JavaScript API সম্পর্কিত প্রশ্ন ও উত্তর 'google-maps' বা 'google-maps-api-3' ট্যাগ ব্যবহার করে।
  • Google Maps Platform প্রিমিয়াম প্ল্যান ব্যবহারকারী গ্রাহকরা Google Maps Platform প্রিমিয়াম প্ল্যান ডকুমেন্টেশন পড়তে চাইবেন।
  • Google Geo Developers ব্লগ থেকে API-তে হওয়া লেটেস্ট পরিবর্তন সম্পর্কে জানতে পারবেন।

এই ডকুমেন্ট সম্পর্কে আপনার কোনও সমস্যা বা প্রশ্ন থাকলে, এই পৃষ্ঠার উপরে মতামত পাঠান লিঙ্ক ব্যবহার করুন।

বিস্তারিত রেফারেন্স

এই বিভাগে Maps JavaScript API-এর v2 এবং v3 ভার্সনের সবচেয়ে জনপ্রিয় ফিচারগুলির বিস্তারিত তুলনা করা হয়েছে। রেফারেন্সের প্রতিটি বিভাগ আলাদাভাবে পড়ার জন্য ডিজাইন করা হয়েছে। আমরা সাজেস্ট করি যে আপনি এই রেফারেন্সটি সম্পূর্ণভাবে পড়বেন না; পরিবর্তে, কেস-বাই-কেস ভিত্তিতে আপনার মাইগ্রেশনে সহায়তা করার জন্য এই মেটেরিয়াল ব্যবহার করুন।

  • ইভেন্ট - ইভেন্ট রেজিস্টার ও ম্যানেজ করা।
  • কন্ট্রোল - ম্যাপে দেখানো নেভিগেশনাল কন্ট্রোল পরিবর্তন করা।
  • ওভারলে - ম্যাপে অবজেক্ট যোগ করা এবং এডিট করা।
  • ম্যাপের ধরন - বেসম্যাপ তৈরি করে এমন টাইল।
  • লেয়ার - গ্রুপ হিসেবে কন্টেন্ট যোগ ও এডিট করা, যেমন KML বা ট্রাফিক লেয়ার।
  • পরিষেবা - Google-এর জিওকোডিং, দিকনির্দেশ বা Street View পরিষেবার সাথে কাজ করা।

ইভেন্ট

Maps JavaScript API v3-এর ইভেন্ট মডেল v2-এর মতোই, যদিও এর ব্যাকগ্রাউন্ডে অনেক পরিবর্তন করা হয়েছে।

কন্ট্রোল

Maps JavaScript API এমন UI কন্ট্রোল দেখায় যা ব্যবহারকারীদের আপনার ম্যাপের সাথে ইন্টার‍্যাক্ট করার অনুমতি দেয়। এইসব কন্ট্রোল কীভাবে দেখানো হবে তা কাস্টমাইজ করতে আপনি API ব্যবহার করতে পারবেন।

ওভারলে

ওভারলেতে সেইসব অবজেক্ট দেখানো হয় যেগুলি আপনি ম্যাপে "যোগ" করেন, যেমন পয়েন্ট, লাইন, এলাকা বা অবজেক্টের সংগ্রহ।

ম্যাপের ধরন

v2 এবং v3-তে উপলভ্য ম্যাপের ধরনগুলি কিছুটা আলাদা, তবে সব মৌলিক ম্যাপের ধরন API-এর উভয় ভার্সনেই উপলভ্য। ডিফল্ট হিসেবে, v2 স্ট্যান্ডার্ড "পেইন্ট করা" রোড ম্যাপ টাইল ব্যবহার করে। তবে, v3-এর ক্ষেত্রে google.maps.Map অবজেক্ট তৈরি করার সময় নির্দিষ্ট ম্যাপের ধরন উল্লেখ করতে হয়।

লেয়ার

লেয়ার হল ম্যাপের অবজেক্ট যা এক বা একাধিক ওভারলে নিয়ে তৈরি হয়। এগুলি একটি ইউনিট হিসেবে ব্যবহার করা যায় এবং সাধারণত অবজেক্টের সংগ্রহ দেখায়।

পরিষেবা