माइग्रेशन: google.load में मैप मॉड्यूल

हम 13 अक्टूबर, 2021 को google.load के लिए, "Maps" मॉड्यूल देने वाली सेवा बंद कर देंगे. इसका मतलब है कि 13 अक्टूबर, 2021 के बाद, अगर google.load में "Maps" मॉड्यूल का इस्तेमाल करने की कोशिश की जाएगी, तो आपको गड़बड़ी का मैसेज (मॉड्यूल "मैप" काम नहीं करेगा) दिखेगा. साथ ही, कोई भी मैप लोड नहीं होगा. संभावित ब्रेक से बचने के लिए, आपको दूसरे विकल्पों में से किसी एक पर स्विच करना होगा.

मुझे क्या करना होगा?

सबसे पहले, google.load लोडर लोड करने वाला <script> टैग हटाएं. इसके बाद, google.load को किए गए कॉल हटाएं. अगर Google लोडर का इस्तेमाल दूसरी चीज़ों के लिए किया जा रहा है, तो लोडर <script> टैग को उसी जगह पर रहने में कोई दिक्कत नहीं है.

इसके बाद, Maps JavaScript API को लोड करने का एक नया तरीका लागू करें (इनमें से कोई एक विकल्प चुनें):

• <script> टैग का इस्तेमाल करके इनलाइन लोड करना
• किसी दूसरी JavaScript फ़ाइल से डाइनैमिक तौर पर लोड होना

Google लोडर का इस्तेमाल करने वाला मौजूदा उदाहरण

नीचे दिए गए उदाहरण से पता चलता है कि Maps JavaScript API को लोड करने के लिए, फ़िलहाल Google लोडर का इस्तेमाल कैसे किया जाता है (इसमें दो <script> ब्लॉक होते हैं):

पहले

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

<script> टैग का इस्तेमाल करके इनलाइन लोड किया जा रहा है (सुझाया गया)

जब इस तरीके का इस्तेमाल किया जाता है, तो Maps JavaScript API उसी समय पेज लोड होता है. इनलाइन लोडिंग को लागू करने के लिए, सबसे पहले www.google.com/jsapi ("पहले") लोड करने वाले <script> टैग को इस उदाहरण में दिखाए गए <script> टैग से बदलें:

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>

इसके बाद, अपने JavaScript कोड में, google.load फ़ंक्शन कॉल को हटा दें, क्योंकि अब इसकी ज़रूरत नहीं है. नीचे दिए गए उदाहरण में, एक खाली initMap() फ़ंक्शन दिखाया गया है. इसे तब कॉल किया जाता है, जब Maps लाइब्रेरी सही से लोड हो जाती है:

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

दस्तावेज़ देखें

किसी दूसरी JavaScript फ़ाइल से डाइनैमिक लोडिंग

डाइनैमिक लोडिंग की मदद से, यह कंट्रोल किया जा सकता है कि Maps JavaScript API कब लोड हो. उदाहरण के लिए, Maps JavaScript API को तब तक लोड किया जा सकता है, जब तक उपयोगकर्ता किसी बटन पर क्लिक नहीं करता या कोई दूसरी कार्रवाई नहीं करता. डाइनैमिक लोडिंग लागू करने के लिए, पहले www.google.com/jsapi ("before") लोड करने वाले <script> टैग को कोड से बदलें ताकि प्रोग्राम के ज़रिए <script> टैग को जोड़ा जा सके, जैसा कि नीचे उदाहरण में दिखाया गया है:

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

इसके बाद, अपने कॉलबैक फ़ंक्शन को विंडो ऑब्जेक्ट में इस तरह अटैच करें:

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

आखिर में, पेज के हेडर में <script> टैग इस तरह जोड़ें:

document.head.appendChild(script);

दस्तावेज़ देखें