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

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

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

v3 एपीआई में किए गए कुछ बदलावों में ये शामिल हैं:

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

आपका ऐप्लिकेशन अपग्रेड किया जा रहा है

आपकी नई कुंजी

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

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

ध्यान दें कि अगर आप Google Maps API for Work के ग्राहक हैं, तो हो सकता है कि आपके पास 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 के प्रीमियम प्लान के लिए) पक्का करें कि client पैरामीटर दिया गया हो, जैसा कि Google Maps Platform के प्रीमियम प्लान की डेवलपर गाइड में बताया गया है.
  5. नए वर्शन का अनुरोध करने के लिए, v पैरामीटर को हटाएं या v3 वर्शन स्कीम के मुताबिक, इसकी वैल्यू बदलें.
  6. (ज़रूरी नहीं) hl पैरामीटर को language से बदलें और इसकी वैल्यू को सुरक्षित रखें.
  7. (ज़रूरी नहीं) ज़रूरी लाइब्रेरी लोड करने के लिए, libraries पैरामीटर जोड़ें.

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

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

नीचे दिए गए उदाहरण में, Maps JavaScript एपीआई 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 एपीआई, डिफ़ॉल्ट रूप से ग्लोबल नेमस्पेस में सभी ऑब्जेक्ट को शामिल करता है. इस वजह से, नाम तय करने के लिए टकराव हो सकते हैं. वर्शन 3 में, सभी ऑब्जेक्ट 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

पुराना कोड हटाया जा रहा है

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

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

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

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

खास जानकारी

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

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

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

पूरी जानकारी

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

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

इवेंट

Maps JavaScript API v3 का इवेंट मॉडल, v2 के जैसा ही है. हालांकि, इस मॉडल में काफ़ी बदलाव हुए हैं.

कंट्रोल

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

ओवरले

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

मैप के टाइप

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

लेयर

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

सेवाएं