আপনার মানচিত্র জাভাস্ক্রিপ্ট API অ্যাপ্লিকেশন V2 থেকে V3 তে আপগ্রেড করা হচ্ছে

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

ওভারভিউ

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

  1. একটি নতুন চাবি পান। মানচিত্র জাভাস্ক্রিপ্ট API এখন কীগুলি পরিচালনা করতে Google ক্লাউড কনসোল ব্যবহার করে৷ আপনি যদি এখনও একটি 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 তে, সমস্ত মানচিত্র জাভাস্ক্রিপ্ট API কোড বিশ্বব্যাপী নামস্থানের পরিবর্তে google.maps.* নামস্থানে সংরক্ষণ করা হয়। এই প্রক্রিয়ার অংশ হিসাবে বেশিরভাগ বস্তুর নাম পরিবর্তন করা হয়েছে। উদাহরণস্বরূপ, GMap2 এর পরিবর্তে, আপনি এখন google.maps.Map লোড করবেন।
    • অপ্রচলিত পদ্ধতির কোনো রেফারেন্স সরান. GDownloadURL এবং GLog এর মতো সাধারণ উদ্দেশ্য ইউটিলিটি পদ্ধতির একটি সংখ্যা সরানো হয়েছে। হয় তৃতীয় পক্ষের ইউটিলিটি লাইব্রেরির সাথে এই কার্যকারিতা প্রতিস্থাপন করুন, অথবা আপনার কোড থেকে এই রেফারেন্সগুলি সরিয়ে দিন।
    • (ঐচ্ছিক) আপনার কোডে লাইব্রেরি যোগ করুন। অনেক বৈশিষ্ট্য ইউটিলিটি লাইব্রেরিতে বহির্ভূত করা হয়েছে যাতে প্রতিটি অ্যাপকে শুধুমাত্র API এর অংশগুলি লোড করতে হবে যা ব্যবহার করা হবে।
    • (ঐচ্ছিক) v3 এক্সটার্ন ব্যবহার করার জন্য আপনার প্রোজেক্ট কনফিগার করুন। ক্লোজার কম্পাইলারের সাথে আপনার কোড যাচাই করতে বা আপনার IDE-তে স্বয়ংসম্পূর্ণ ট্রিগার করতে v3 এক্সটার্নগুলি ব্যবহার করা যেতে পারে। অ্যাডভান্সড কম্পাইলেশন এবং এক্সটার্নস সম্পর্কে আরও জানুন।
  4. পরীক্ষা এবং পুনরাবৃত্তি. এই মুহুর্তে আপনার এখনও কিছু কাজ করতে হবে, কিন্তু সুসংবাদ হল যে আপনি আপনার নতুন v3 মানচিত্র অ্যাপ্লিকেশনের পথে ভাল থাকবেন!

মানচিত্র জাভাস্ক্রিপ্ট API-এর V3-তে পরিবর্তন

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

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

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

আপনার আবেদন আপগ্রেড করা হচ্ছে

আপনার নতুন কী

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

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

মনে রাখবেন যে আপনি যদি একজন Google Maps APIs for Work গ্রাহক হন, তাহলে আপনি key প্যারামিটার ব্যবহার করার পরিবর্তে client প্যারামিটার সহ একটি ক্লায়েন্ট আইডি ব্যবহার করতে পারেন। ক্লায়েন্ট আইডি এখনও মানচিত্র জাভাস্ক্রিপ্ট 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 মানচিত্র API একটি client প্যারামিটার ব্যবহার করা উচিত।
  4. (শুধুমাত্র Google মানচিত্র প্ল্যাটফর্ম প্রিমিয়াম প্ল্যান) নিশ্চিত করুন যে client প্যারামিটারটি Google মানচিত্র প্ল্যাটফর্ম প্রিমিয়াম প্ল্যান বিকাশকারীর নির্দেশিকায় বর্ণিত হিসাবে সরবরাহ করা হয়েছে।
  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

অপ্রচলিত কোড অপসারণ

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

মানচিত্র জাভাস্ক্রিপ্ট এপিআই v3-তে নিম্নলিখিত ক্লাসগুলির কোনও সমান্তরাল নেই:

GBounds GLanguage
GBrowserIsCompatible GLayer
GControl GLog
GControlAnchor GMercatorProjection
GControlImpl GNavLabelControl
GControlPosition GObliqueMercator
GCopyright GOverlay
GCopyrightCollection GPhotoSpec
GDownloadUrl GPolyEditingOptions
GDraggableObject GScreenOverlay
GDraggableObjectOptions GStreetviewFeatures
GFactualGeocodeCache GStreetviewLocation
GGeoAddressAccuracy GStreetviewOverlay
GGeocodeCache GStreetviewUserPhotosOptions
GGoogleBar GTileLayerOptions
GGoogleBarAdsOptions GTileLayerOverlayOptions
GGoogleBarLinkTarget GTrafficOverlayOptions
GGoogleBarListingTypes GUnload
GGoogleBarOptions GXml
GGoogleBarResultList GXmlHttp
GInfoWindowTab GXslt
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 লোড করা হয়েছে তা পরিবর্তিত হয়েছে।
  • GBrowserIsCompatible() এবং GUnload() পদ্ধতি v3-তে আর প্রয়োজন নেই এবং API থেকে সরানো হয়েছে।
  • GMap2 অবজেক্টটি google.maps.Map দ্বারা এপিআই-এর কেন্দ্রীয় অবজেক্ট হিসেবে প্রতিস্থাপিত হয়েছে।
  • বৈশিষ্ট্যগুলি এখন বিকল্প ক্লাসের মাধ্যমে লোড করা হয়। উপরের উদাহরণে, আমরা একটি মানচিত্র লোড করার জন্য প্রয়োজনীয় তিনটি বৈশিষ্ট্য সেট করেছি — center , zoom এবং mapTypeId — একটি ইনলাইনযুক্ত MapOptions অবজেক্টের মাধ্যমে।
  • ডিফল্ট UI ডিফল্টরূপে v3 এ চালু থাকে। আপনি MapOptions অবজেক্টে disableDefaultUI বৈশিষ্ট্যটিকে সত্যে সেট করে এটি নিষ্ক্রিয় করতে পারেন।

সারসংক্ষেপ

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

এই নিবন্ধটি সম্পর্কে আপনার কোন সমস্যা বা প্রশ্ন থাকলে, অনুগ্রহ করে এই পৃষ্ঠার শীর্ষে প্রতিক্রিয়া পাঠান লিঙ্কটি ব্যবহার করুন।

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

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

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

ঘটনা

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

নিয়ন্ত্রণ করে

মানচিত্র জাভাস্ক্রিপ্ট API UI নিয়ন্ত্রণগুলি প্রদর্শন করে যা ব্যবহারকারীদের আপনার মানচিত্রের সাথে ইন্টারঅ্যাক্ট করতে দেয়৷ এই নিয়ন্ত্রণগুলি কীভাবে প্রদর্শিত হবে তা কাস্টমাইজ করতে আপনি API ব্যবহার করতে পারেন।

ওভারলে

ওভারলেগুলি সেই বস্তুগুলিকে প্রতিফলিত করে যা আপনি মানচিত্রে "যোগ" করেন পয়েন্ট, লাইন, এলাকা বা বস্তুর সংগ্রহ নির্ধারণ করতে।

মানচিত্র প্রকার

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

স্তর

স্তরগুলি হল মানচিত্রের বস্তু যা এক বা একাধিক ওভারলে নিয়ে গঠিত। এগুলিকে একক ইউনিট হিসাবে ব্যবহার করা যেতে পারে এবং সাধারণত বস্তুর সংগ্রহগুলি প্রতিফলিত করে।

সেবা