अपने Maps JavaScript API ऐप्लिकेशन को वर्शन 2 से वर्शन 3 में अपग्रेड करना

Maps JavaScript API v2 अब 26 मई, 2021 से उपलब्ध नहीं है. इस वजह से, आपकी साइट का v2 मैप काम करना बंद कर देगा. साथ ही, यह JavaScript से जुड़ी गड़बड़ियां दिखाएगा. अपनी साइट पर मैप का इस्तेमाल जारी रखने के लिए, Maps JavaScript API v3 पर माइग्रेट करें. आपको इस प्रोसेस में मदद मिलेगी.

खास जानकारी

हर ऐप्लिकेशन की माइग्रेशन करने की प्रोसेस थोड़ी अलग होगी. हालांकि, सभी प्रोजेक्ट के लिए ऐसे कुछ तरीके हैं:

  1. नई कुंजी पाएं. Maps JavaScript API, अब Google Cloud Console का इस्तेमाल करके, कुंजियों को मैनेज करता है. अगर अब भी v2 कुंजी का इस्तेमाल किया जा रहा है, तो माइग्रेशन शुरू करने से पहले नई एपीआई कुंजी पाना न भूलें.
  2. अपना API बूटस्ट्रैप अपडेट करें. ज़्यादातर ऐप्लिकेशन, नीचे दिए गए कोड के साथ Maps JavaScript API v3 को लोड करेंगे:
    <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  3. अपना कोड अपडेट करें. ज़रूरी बदलाव आपके आवेदन पर निर्भर करेगा. इसके सामान्य बदलावों में ये शामिल हैं:
    • google.maps नेमस्पेस का हमेशा रेफ़रंस दें. वर्शन 3 में, ग्लोबल JavaScript के बजाय google.maps.* के नेमस्पेस में, Maps के सभी एपीआई कोड को सेव किया जाता है. इस प्रोसेस के तहत, ज़्यादातर ऑब्जेक्ट के नाम भी बदल गए हैं. उदाहरण के लिए, GMap2 के बजाय, अब google.maps.Map लोड किया जाएगा.
    • पुराने तरीकों के सभी रेफ़रंस हटा दें. बिजली, पानी जैसी सुविधाओं के इस्तेमाल से जुड़े कई तरीकों को हटा दिया गया है. जैसे, GDownloadURL और GLog. इस सुविधा को तीसरे पक्ष की यूटिलिटी लाइब्रेरी से बदलें या अपने कोड से ये रेफ़रंस हटाएं.
    • (ज़रूरी नहीं) अपने कोड में लाइब्रेरी जोड़ना. कई सुविधाएं, यूटिलिटी लाइब्रेरी में शामिल नहीं की गई हैं. इसलिए, हर ऐप्लिकेशन को एपीआई के सिर्फ़ उन हिस्सों को लोड करना होगा जिनका इस्तेमाल किया जाएगा.
    • (ज़रूरी नहीं) v3 एक्सटेंशन का इस्तेमाल करने के लिए, अपने प्रोजेक्ट को कॉन्फ़िगर करना. v3 एक्सटेंशन का इस्तेमाल क्लोज़र कंपाइलर से आपके कोड की पुष्टि करने के लिए या आपके आईडीई में ऑटोकंप्लीट ट्रिगर करने के लिए किया जा सकता है. बेहतर कंपाइलेशन और एक्सटेंशन के बारे में ज़्यादा जानें.
  4. जांचें और दोहराएं. यहां आपको अब भी कुछ काम करना होगा, लेकिन अच्छी खबर यह है कि आप अपने नए v3 मैप ऐप्लिकेशन में बहुत अच्छा काम कर सकते हैं!

Maps JavaScript API के वर्शन 3 में बदलाव

माइग्रेट करने से पहले, आपको यह समझना होगा कि Maps JavaScript API v2 और Maps JavaScript API के वर्शन 3 में क्या फ़र्क़ है. Maps JavaScript API का सबसे नया वर्शन अब तक शुरू किया गया है. इसमें आधुनिक JavaScript प्रोग्रामिंग तकनीकों, लाइब्रेरी के इस्तेमाल में बढ़ोतरी, और एपीआई को आसान बनाया गया है. एपीआई में कई नई सुविधाएं जोड़ी गई हैं. साथ ही, Google की कई जानी-पहचानी सुविधाओं को बदल दिया गया है या उन्हें हटा भी दिया गया है. इस सेक्शन में, दोनों रिलीज़ के बीच के कुछ अहम अंतर हाइलाइट किए गए हैं.

वर्शन 3 एपीआई में कुछ बदलाव ये हैं:

  • एक व्यवस्थित मुख्य लाइब्रेरी. कुछ पूरक फ़ंक्शन को लाइब्रेरी में ले जाया गया है, जिससे Core API के लोड होने और पार्स होने में लगने वाले समय को कम करने में मदद मिलती है. इससे, आपका मैप किसी भी डिवाइस पर तेज़ी से लोड हो सकता है.
  • पॉलीगॉन रेंडरिंग और मार्कर प्लेसमेंट जैसी कई सुविधाओं की बेहतर परफ़ॉर्मेंस.
  • क्लाइंट-साइड इस्तेमाल की सीमाओं के लिए एक नया तरीका. यह शेयर किए गए पतों को बेहतर तरीके से समझने में मदद करता है, जिनका इस्तेमाल मोबाइल प्रॉक्सी और कॉर्पोरेट फ़ायरवॉल करते हैं.
  • कई आधुनिक ब्राउज़र और मोबाइल ब्राउज़र के लिए सहायता जोड़ी गई. Internet Explorer 6 के लिए सहायता हटा दी गई है.
  • अलग-अलग कामों के लिए इस्तेमाल की जाने वाली हेल्पर क्लास ( GLog या GDownloadUrl) को हटाया गया. आज, कई शानदार JavaScript लाइब्रेरी मौजूद हैं, जो मिलती-जुलती सुविधाएं उपलब्ध कराती हैं, जैसे कि Closure या jQuery.
  • HTML5 स्ट्रीट व्यू को लागू करना, जो किसी भी मोबाइल डिवाइस पर लोड होगा.
  • अपनी पसंद के मुताबिक Street View की तस्वीरों की मदद से, आप स्की ढलानों, बिक्री के लिए बने घरों या दूसरी दिलचस्प जगहों के नज़ारे शेयर कर सकते हैं.
  • स्टाइल वाले मैप को पसंद के मुताबिक बनाने की सुविधा की मदद से, आप बेस मैप पर एलिमेंट का डिसप्ले बदल सकते हैं, ताकि वे आपकी खास विज़ुअल स्टाइल से मेल खाएं.
  • कई नई सेवाओं के लिए सहायता उपलब्ध है, जैसे कि ElevationService और दूरी मैट्रिक्स.
  • बेहतर निर्देशों वाली सेवाएं, वैकल्पिक रास्ते, रूट ऑप्टिमाइज़ेशन (यात्रा करने वाले सेलर की समस्या के हल के समाधान), साइकल चलाने के लिए निर्देश (साइकल की लेयर), सार्वजनिक परिवहन के निर्देश, और ड्रैग करने लायक निर्देश की सुविधा देती हैं.
  • एक अपडेट किया गया जियोकोडिंग फ़ॉर्मैट, जो Geocoding API v2 के accuracy वैल्यू की तुलना में ज़्यादा टाइप की जानकारी देता है.
  • एक मैप पर कई जानकारी Windows के लिए सहायता

अपना ऐप्लिकेशन अपग्रेड करना

आपकी नई चाबी

Maps JavaScript API v3, नए वर्शन v2 का इस्तेमाल करता है. ऐसा हो सकता है कि आपने पहले से ही अपने ऐप्लिकेशन में v3 कुंजी का इस्तेमाल किया हो. ऐसे में, किसी बदलाव की ज़रूरत नहीं होती. इसकी पुष्टि करने के लिए, जांच लें कि आपने किस यूआरएल से key पैरामीटर के लिए Maps JavaScript API को लोड किया है. अगर कुंजी की वैल्यू 'ABQIAA' से शुरू होती है, तो आप इसका इस्तेमाल कर रहे हैं. अगर आपके पास v2 कुंजी है, तो माइग्रेशन के दौरान v3 कुंजी पर अपग्रेड करें. इससे:

Maps JavaScript API v3 को लोड करते समय कुंजी पास होती है. एपीआई कुंजियां जनरेट करने के बारे में ज़्यादा जानें.

ध्यान दें कि अगर आप काम से जुड़े Google ग्राहक हैं, तो key पैरामीटर के बजाय, client पैरामीटर वाले क्लाइंट आईडी का इस्तेमाल किया जा सकता है. Client-ID अब भी Maps JavaScript API v3 में काम करता है. इसे कुंजी को अपग्रेड करने की प्रोसेस से गुज़रना नहीं पड़ता.

एपीआई लोड हो रहा है

आपको कोड में पहले बदलाव के तौर पर, एपीआई लोड करने का तरीका शामिल करना होगा. वर्शन 2 में, आप http://maps.google.com/maps के अनुरोध के ज़रिए, Maps JavaScript API को लोड करते हैं. अगर आप Maps JavaScript API v3 को लोड कर रहे हैं, तो आपको ये बदलाव करने होंगे:

  1. //maps.googleapis.com/maps/api/js से एपीआई लोड करें
  2. file पैरामीटर हटाएं.
  3. अपनी नई v3 कुंजी के साथ key पैरामीटर को अपडेट करें. Google Maps API for Work के ग्राहकों को client पैरामीटर का इस्तेमाल करना चाहिए.
  4. (सिर्फ़ Google Maps Platform के प्रीमियम प्लान) पक्का करें कि Google Maps Platform के प्रीमियम प्लान के डेवलपर की जानकारी के मुताबिक client पैरामीटर की जानकारी दी गई हो.
  5. रिलीज़ के नए वर्शन का अनुरोध करने के लिए, v पैरामीटर को हटाएं. इसके अलावा, v3 वर्शन की स्कीम के मुताबिक, इसकी वैल्यू में बदलाव करें.
  6. (ज़रूरी नहीं) hl पैरामीटर को language से बदलें और उसकी वैल्यू को बनाए रखें.
  7. (ज़रूरी नहीं) ज़रूरी लाइब्रेरी को लोड करने के लिए, libraries पैरामीटर जोड़ें.

सबसे आसान मामले में, v3 बूटस्ट्रैप सिर्फ़ आपके एपीआई कुंजी पैरामीटर की जानकारी देगा:

<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 नेमस्पेस

मैप JavaScript API v3 में शायद सबसे ज़्यादा ध्यान देने लायक बदलाव, google.maps नेमस्पेस की शुरुआत है. v2 एपीआई, डिफ़ॉल्ट रूप से ग्लोबल नेमस्पेस में सभी ऑब्जेक्ट रखता है, जिसकी वजह से नाम बनाने में गड़बड़ी हो सकती है. v3 में, सभी ऑब्जेक्ट google.maps नेमस्पेस में मौजूद होते हैं.

अपने ऐप्लिकेशन को v3 पर माइग्रेट करते समय, आपको नए नेमस्पेस के इस्तेमाल के लिए, अपने कोड में बदलाव करना होगा. माफ़ करें, "G" को खोजना और इसकी जगह "google.maps." को पूरी तरह से काम करना होगा; लेकिन अपने कोड की समीक्षा करते समय, इसे लागू करना सही है. वर्शन 2 और v3 में इससे मिलती-जुलती क्लास के कुछ उदाहरण नीचे दिए गए हैं.

v2 वर्शन 3
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 में, वर्शन 2 के ज़्यादातर फ़ंक्शन की समानताएं मौजूद हैं. हालांकि, कुछ ऐसी कक्षाएं हैं जो अब काम नहीं करतीं. माइग्रेशन के दौरान, आपको इन क्लास को तीसरे पक्ष की यूटिलिटी लाइब्रेरी से बदलना होगा या अपने कोड से इन रेफ़रंस को हटाना होगा. कई बेहतरीन JavaScript लाइब्रेरी मौजूद होती हैं, जो क्लोज़र या 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 एपीआई से लिखे गए आसान और दो ऐप्लिकेशन से करें.

<!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>

जैसा कि आप देख सकते हैं, दोनों ऐप्लिकेशन के बीच कई अंतर हैं. ध्यान देने लायक बदलावों में ये शामिल हैं:

  • जिस पते से एपीआई लोड किया गया है उसे बदल दिया गया है.
  • वर्शन 3 में अब GBrowserIsCompatible() और GUnload() तरीकों की ज़रूरत नहीं है. इन्हें एपीआई से हटा दिया गया है.
  • एपीआई में सेंट्रल ऑब्जेक्ट के तौर पर GMap2 ऑब्जेक्ट को, google.maps.Map से बदल दिया जाता है.
  • प्रॉपर्टी अब विकल्प क्लास के ज़रिए लोड की जाती हैं. ऊपर दिए गए उदाहरण में, हम मैप किए गए MapOptions ऑब्जेक्ट के ज़रिए तीन प्रॉपर्टी सेट करते हैं. इन प्रॉपर्टी का मैप लोड करने के लिए, center, zoom, और mapTypeId का इस्तेमाल किया जाता है.
  • वर्शन 3 में डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) डिफ़ॉल्ट रूप से चालू रहता है. MapOptions ऑब्जेक्ट में disableDefaultUI प्रॉपर्टी को 'सही' पर सेट करके, इसे बंद किया जा सकता है.

खास जानकारी

इस समय आपको, Maps JavaScript API के v2 से वर्शन v3 तक के माइग्रेशन में शामिल कुछ खास बातों की जानकारी मिलेगी. आपके पास ज़्यादा जानकारी हो सकती है, लेकिन यह आपके आवेदन पर निर्भर करेगा. नीचे दिए गए सेक्शन में, हमने कुछ खास मामलों के लिए, माइग्रेट करने से जुड़े निर्देश शामिल किए हैं. इसके अलावा, कई ऐसे संसाधन हैं जो अपग्रेड की प्रोसेस के दौरान आपके लिए मददगार साबित हो सकते हैं.

  • Maps JavaScript API v3 डेवलपर दस्तावेज़ यह एपीआई और इसके काम करने के तरीके के बारे में ज़्यादा जानने के लिए सबसे अच्छी जगह है.
  • Maps JavaScript API v3 रेफ़रंस से, v3 API में नई क्लास और तरीकों के बारे में ज़्यादा जानकारी मिलेगी.
  • अपने कोड से जुड़े सवाल पूछने के लिए, Stack Overflow का समुदाय एक बेहतरीन प्लैटफ़ॉर्म है. साइट पर, Maps JavaScript API से जुड़े सवाल और जवाब, #39;google-maps' या 'google-maps-api-3' टैग का इस्तेमाल करते हैं.
  • Google Maps Platform का प्रीमियम प्लान लेने वाले ग्राहक, Google Maps Platform के प्रीमियम प्लान के दस्तावेज़ को पढ़ सकते हैं.
  • Google के जियो डेवलपर ब्लॉग से, एपीआई में हुए नए बदलावों के बारे में जानकारी पाई जा सकती है.

अगर इस लेख के बारे में आपको कोई समस्या या सवाल है, तो कृपया इस पेज के सबसे ऊपर सुझाव भेजें लिंक का इस्तेमाल करें.

पूरी जानकारी

इस सेक्शन में, Maps JavaScript API के v2 और v3, दोनों वर्शन की सबसे लोकप्रिय सुविधाओं की तुलना की गई है. पहचान फ़ाइल का हर सेक्शन अलग-अलग पढ़ा जाता है. हमारा सुझाव है कि आप इस संदर्भ को पूरा न पढ़ें. इसके बजाय, अलग-अलग मामले के हिसाब से इस माइग्रेशन का इस्तेमाल करें.

  • इवेंट - इवेंट को रजिस्टर और मैनेज करना.
  • कंट्रोल - मैप पर दिखने वाले नेविगेशन कंट्रोल में हेर-फेर करना.
  • ओवरले - मैप पर ऑब्जेक्ट जोड़ना और उनमें बदलाव करना.
  • मैप के टाइप - ऐसी टाइल जिनका आधार मैप होता है.
  • लेयर - कॉन्टेंट को ग्रुप के तौर पर जोड़ना और उसमें बदलाव करना, जैसे कि KML या ट्रैफ़िक लेयर.
  • सेवाएं - Google's जियोकोडिंग, दिशा-निर्देश या 'स्ट्रीट व्यू' सेवाओं के साथ काम करना.

इवेंट

Maps JavaScript API v3 के लिए इवेंट मॉडल, वर्शन 2 में इस्तेमाल किया गया मॉडल जैसा ही है. हालांकि, हुड में इसमें काफ़ी बदलाव हुआ है.

कंट्रोल

Maps JavaScript API, यूज़र इंटरफ़ेस (यूआई) कंट्रोल दिखाता है. इनकी मदद से उपयोगकर्ता आपके मैप से इंटरैक्ट कर सकते हैं. एपीआई का इस्तेमाल करके, यह कंट्रोल किया जा सकता है कि ये कंट्रोल किस तरह दिखें.

ओवरले

ओवरले उन ऑब्जेक्ट को दिखाते हैं जिन्हें आप मैप में पॉइंट, लाइनों, इलाकों या ऑब्जेक्ट के कलेक्शन तय करने के लिए, कोट और कोट करते हैं.

मैप किस तरह के हैं

वर्शन 2 और वर्शन 3 में उपलब्ध मैप के टाइप थोड़े अलग हैं, लेकिन एपीआई के दोनों वर्शन में सभी बेसिक मैप टाइप उपलब्ध हैं. डिफ़ॉल्ट रूप से, v2 स्टैंडर्ड और कोट;रोट वाले कोट का इस्तेमाल करता है. हालांकि, google.maps.Map ऑब्जेक्ट बनाते समय v3 को एक खास मैप टाइप देना होता है.

लेयर

लेयर, मैप पर मौजूद वे ऑब्जेक्ट होते हैं जिनमें एक या एक से ज़्यादा ओवरले होते हैं. इन्हें एक यूनिट की तरह इस्तेमाल किया जा सकता है. आम तौर पर, ये ऑब्जेक्ट का कलेक्शन दिखाते हैं.

सेवाएं