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

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

खास जानकारी

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

  1. नई कुंजी पाएं. Maps JavaScript API अब पासकोड मैनेज करने के लिए, Google Cloud कंसोल का इस्तेमाल करता है. अगर अब भी v2 पासकोड का इस्तेमाल किया जा रहा है, तो माइग्रेशन शुरू करने से पहले, अपनी नई एपीआई पासकोड ज़रूर पाएं.
  2. अपने एपीआई बूटस्ट्रैप को अपडेट करें. ज़्यादातर ऐप्लिकेशन, 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. इस फ़ंक्शन को तीसरे पक्ष की यूटिलिटी लाइब्रेरी से बदलें या अपने कोड से इन रेफ़रंस को हटाएं.
    • (ज़रूरी नहीं) अपने कोड में लाइब्रेरी जोड़ें. कई सुविधाओं को यूटिलिटी लाइब्रेरी में एक्सटर्नलाइज़ किया गया है, ताकि हर ऐप्लिकेशन को एपीआई के सिर्फ़ उन हिस्सों को लोड करना पड़े जिनका इस्तेमाल किया जाएगा.
    • (ज़रूरी नहीं) v3 एक्सटर्न का इस्तेमाल करने के लिए, अपने प्रोजेक्ट को कॉन्फ़िगर करें. v3 एक्सटर्न का इस्तेमाल, Closure कंपाइलर की मदद से अपने कोड की पुष्टि करने या अपने IDE में ऑटोकंप्लीट की सुविधा को ट्रिगर करने के लिए किया जा सकता है. बेहतर कंपाइलेशन और एक्सटर्न के बारे में ज़्यादा जानें.
  4. अलग-अलग तरह की स्टाइल और कॉन्टेंट फ़ॉर्मैट को टेस्ट करते रहें. इस समय, आपको कुछ और काम करना होगा. हालांकि, अच्छी बात यह है कि अब आपके पास Maps के नए वर्शन 3 वाले ऐप्लिकेशन को इस्तेमाल करने का विकल्प होगा!

Maps JavaScript API के V3 में हुए बदलाव

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

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

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

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

आपकी नई कुंजी

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

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

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

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

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

  1. //maps.googleapis.com/maps/api/js से एपीआई लोड करना
  2. file पैरामीटर हटाएं.
  3. key पैरामीटर को अपनी नई v3 कुंजी से अपडेट करें. Google Maps APIs 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 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 वर्शन की ज़्यादातर सुविधाएं मिलती-जुलती हैं. हालांकि, कुछ क्लास अब काम नहीं करतीं. माइग्रेशन के दौरान, आपको इन क्लास को तीसरे पक्ष की यूटिलिटी लाइब्रेरी से बदलना चाहिए या अपने कोड से इन रेफ़रंस को हटाना चाहिए. ऐसी कई बेहतरीन 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>

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

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

खास जानकारी

अब आपको Maps JavaScript API के v2 से 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 Geo Developers ब्लॉग एक बेहतरीन तरीका है.

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

ज़्यादा जानकारी वाला रेफ़रंस

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

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

इवेंट

Maps JavaScript API के वर्शन 3 के लिए इवेंट मॉडल, वर्शन 2 में इस्तेमाल किए गए मॉडल से मिलता-जुलता है. हालांकि, इसमें कई बदलाव किए गए हैं.

v3 API, एमवीसी स्टेटस में हुए बदलावों को दिखाने के लिए, एक नए तरह का इवेंट जोड़ता है. अब इवेंट दो तरह के होते हैं:

  • उपयोगकर्ता इवेंट (जैसे, "क्लिक" माउस इवेंट), डीओएम से Maps JavaScript API पर भेजे जाते हैं. ये इवेंट, स्टैंडर्ड DOM इवेंट से अलग और अलग तरह के होते हैं.
  • एमवीसी स्टेटस में हुए बदलावों की सूचनाएं, Maps API ऑब्जेक्ट में हुए बदलावों को दिखाती हैं. साथ ही, इनका नाम property_changed समझौते के हिसाब से रखा जाता है.

हर Maps API ऑब्जेक्ट, नाम वाले कई इवेंट एक्सपोर्ट करता है. जिन ऐप्लिकेशन को किसी खास इवेंट में दिलचस्पी है उन्हें उन इवेंट के लिए इवेंट लिसनर रजिस्टर करने चाहिए. साथ ही, उन इवेंट के मिलने पर कोड को लागू करना चाहिए. इवेंट-ड्रिवन वाला यह तरीका, Maps JavaScript API के v2 और v3, दोनों वर्शन में एक जैसा है. हालांकि, नेमस्पेस का नाम GEvent से बदलकर google.maps.event हो गया है: 

GEvent.addListener(map, 'click', function() {
  alert('You clicked the map.');
});
 
google.maps.event.addListener(map, 'click', function() {
  alert('You clicked the map.');
});

परफ़ॉर्मेंस की वजहों से, जब किसी इवेंट लिसनर की ज़रूरत न हो, तो उसे हटा देना सबसे बेहतर होता है. इवेंट लिसनर को हटाने का तरीका, v2 और v3 में एक जैसा है:

  1. इवेंट लिसनर बनाने पर, एक अपारदर्शी ऑब्जेक्ट (v2 में GEventListener और v3 में MapsEventListener) दिखता है.
  2. इवेंट लिसनर हटाने के लिए, इस ऑब्जेक्ट को removeListener() मेथड (v2 में GEvent.removeListener() या v3 में google.maps.event.removeListener()) में पास करें.

अगर आपको DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) इवेंट को कैप्चर करना है और उनका जवाब देना है, तो v3 में google.maps.event.addDomListener() स्टैटिक तरीका उपलब्ध है. यह तरीका, v2 में मौजूद GEvent.addDomListener() तरीके के बराबर है.

यूज़र इंटरफ़ेस (यूआई) इवेंट अक्सर इवेंट आर्ग्युमेंट पास करते हैं. इसके बाद, इवेंट लिसनर इसे ऐक्सेस कर सकता है. v3 में ज़्यादातर इवेंट आर्ग्युमेंट को आसान बनाया गया है, ताकि एपीआई में ऑब्जेक्ट के साथ ज़्यादा बेहतर तरीके से काम किया जा सके. (ज़्यादा जानकारी के लिए, v3 रेफ़रंस देखें.)

v3 इवेंट लिसनर में कोई overlay आर्ग्युमेंट मौजूद नहीं है. अगर आपने v3 मैप पर click इवेंट रजिस्टर किया है, तो कॉलबैक सिर्फ़ तब होगा, जब उपयोगकर्ता बेस मैप पर क्लिक करेगा. अगर आपको क्लिक किए जा सकने वाले ओवरले पर क्लिक करने पर कोई कार्रवाई करनी है, तो आपके पास अतिरिक्त कॉलबैक रजिस्टर करने का विकल्प है. 

// Passes an overlay argument when clicking on a map

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();

GEvent.addListener(map,'click', function(overlay, latlng) {
  if (latlng) {
    var marker = new GMarker(latlng);
    map.addOverlay(marker);
  }
});
 
// Passes only an event argument

var myOptions = {
    center: new google.maps.LatLng(-25.363882, 131.044922),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

google.maps.event.addListener(map, 'click', function(event) {
  var marker = new google.maps.Marker({
      position: event.latLng,
      map: map
  });
});

कंट्रोल

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

v3 API के साथ, control टाइप में कुछ बदलाव किए गए हैं.

  1. v3 API, ज़मीन के मैप और कस्टम मैप टाइप जोड़ने की सुविधा के साथ-साथ, मैप के अन्य टाइप के साथ काम करता है.
  2. वर्शन 2 का हैरारकी वाला कंट्रोल, GHierarchicalMapTypeControl अब उपलब्ध नहीं है. google.maps.MapTypeControlStyle.HORIZONTAL_BAR कंट्रोल का इस्तेमाल करके भी ऐसा ही इफ़ेक्ट पाया जा सकता है.
  3. वर्शन 2 में GMapTypeControl से मिलने वाला हॉरिज़ॉन्टल लेआउट, वर्शन 3 में उपलब्ध नहीं है.

Maps JavaScript API v2 की मदद से, अपने मैप ऑब्जेक्ट के addControl() तरीके से, अपने मैप में कंट्रोल जोड़े जा सकते हैं. v3 में, कंट्रोल को सीधे ऐक्सेस करने या उनमें बदलाव करने के बजाय, उनसे जुड़े MapOptions ऑब्जेक्ट में बदलाव किया जाता है. यहां दिए गए उदाहरण में, मैप को अपनी पसंद के मुताबिक बनाने का तरीका बताया गया है, ताकि इन कंट्रोल को जोड़ा जा सके:

  • ऐसे बटन जिनकी मदद से उपयोगकर्ता, मैप के उपलब्ध टाइप के बीच टॉगल कर सकें
  • मैप का स्केल
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);

// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
 
var myOptions = {
    center: new google.maps.LatLng(-25.363882, 131.044922),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,

    // Add controls
    mapTypeControl: true,
    scaleControl: true
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

v3 में, पोज़िशनिंग कंट्रोल काफ़ी बदल गए हैं. v2 में, addControl() का तरीका एक वैकल्पिक दूसरा पैरामीटर लेता है जिसकी मदद से, मैप के कोनों के हिसाब से कंट्रोल की पोज़िशन तय की जा सकती है.

v3 में, कंट्रोल के विकल्पों की position प्रॉपर्टी की मदद से, कंट्रोल की पोज़िशन सेट की जाती है. इन कंट्रोल की पोज़िशन तय नहीं होती. इसके बजाय, एपीआई इन कंट्रोल को मैप के मौजूदा एलिमेंट के आस-पास "फ़्लो" करके, उन्हें बेहतर तरीके से लेआउट करेगा. इसमें, मैप का साइज़ जैसी सीमाएं भी शामिल हैं. इससे यह पक्का होता है कि डिफ़ॉल्ट कंट्रोल, आपके कंट्रोल के साथ काम करते हैं. ज़्यादा जानकारी के लिए, v3 में पोज़िशनिंग को कंट्रोल करना देखें.

नीचे दिया गया कोड, ऊपर दिए गए सैंपल में मौजूद कंट्रोल की जगह बदल देता है:

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);

// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
    G_ANCHOR_TOP_LEFT, new GSize(10, 10)));

// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
    G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));
 
var myOptions = {
  center: new google.maps.LatLng(-25.363882, 131.044922),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP,

  // Add map type control
  mapTypeControl: true,
  mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_LEFT
  },

  // Add scale
  scaleControl: true,
  scaleControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_RIGHT
  }
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

Maps JavaScript API की मदद से, नेविगेशन के लिए पसंद के मुताबिक कंट्रोल बनाए जा सकते हैं. v2 API की मदद से कंट्रोल को पसंद के मुताबिक बनाने के लिए, आपको GControl क्लास की सबक्लास बनानी होगी और initialize() और getDefaultPosition() मेथड के लिए हैंडलर तय करने होंगे. v3 में GControl क्लास के बराबर कोई क्लास नहीं है. इसके बजाय, कंट्रोल को डीओएम एलिमेंट के तौर पर दिखाया जाता है. v3 API के साथ कस्टम कंट्रोल जोड़ने के लिए, कंट्रोल के लिए एक DOM स्ट्रक्चर बनाएं.यह स्ट्रक्चर, कंस्ट्रक्टर में Node (उदाहरण के लिए, <div> एलिमेंट) के चाइल्ड के तौर पर बनाएं. साथ ही, किसी भी DOM इवेंट को हैंडल करने के लिए इवेंट लिसनर जोड़ें. अपने मैप में कस्टम कंट्रोल का एक इंस्टेंस जोड़ने के लिए, Node को मैप के controls[position] कलेक्शन में डालें.

यहां दिए गए कोड सैंपल में, मैप में कस्टम कंट्रोल जोड़ने का तरीका बताया गया है. यह तरीका, HomeControl क्लास के ऐसे लागू होने पर काम करता है जो ऊपर बताई गई इंटरफ़ेस की ज़रूरी शर्तों को पूरा करता हो. ज़्यादा जानकारी के लिए, कस्टम कंट्रोल दस्तावेज़ देखें. 

map.addControl(new HomeControl(),
    GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
 
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
    homeControlDiv);

ओवरले

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

ओवरले के ज़रिए दिखाए गए ऑब्जेक्ट के टाइप, v2 और v3 में एक जैसे होते हैं. हालांकि, इनका इस्तेमाल अलग-अलग तरीके से किया जाता है.

v2 API में ओवरले, मैप में जोड़े और हटाए गए थे. इसके लिए, GMap2 ऑब्जेक्ट के addOverlay() और removeOverlay() तरीकों का इस्तेमाल किया गया था. v3 में, ओवरले के लिए मैप असाइन करने के लिए, ओवरले के विकल्पों की क्लास की map प्रॉपर्टी का इस्तेमाल किया जाता है. ओवरले को सीधे तौर पर जोड़ा या हटाया भी जा सकता है. इसके लिए, आपको ओवरले ऑब्जेक्ट के setMap() तरीके को कॉल करना होगा और मनचाहा मैप बताना होगा. मैप प्रॉपर्टी को null पर सेट करने से, ओवरले हट जाता है.

v3 में clearOverlays() का कोई तरीका मौजूद नहीं है. अगर आपको ओवरले का सेट मैनेज करना है, तो आपको ओवरले को सेव करने के लिए एक कलेक्शन बनाना चाहिए. इस कलेक्शन का इस्तेमाल करके, कलेक्शन में मौजूद हर ओवरले पर setMap() को कॉल किया जा सकता है. अगर आपको उन्हें हटाना है, तो null को पास करें.

डिफ़ॉल्ट रूप से, मार्कर पर क्लिक किया जा सकता है, लेकिन उन्हें खींचा और छोड़ा नहीं जा सकता. यहां दिए गए दो सैंपल में, खींचकर छोड़ा जा सकने वाला मार्कर जोड़ा गया है:

var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);

var marker = new GMarker(latLng, {
  draggable: true
});
map.addOverlay(marker);
 
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
  document.getElementById('map'), {
  center: myLatLng,
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
    position: myLatLng,
    draggable: true,
    map: map
});

डिफ़ॉल्ट मार्कर के बजाय, अपनी पसंद का आइकॉन दिखाया जा सकता है. v2 में कस्टम इमेज का इस्तेमाल करने के लिए, G_DEFAULT_ICON type से GIcon इंस्टेंस बनाया जा सकता है और उसमें बदलाव किया जा सकता है. अगर आपकी इमेज, डिफ़ॉल्ट आइकॉन से बड़ी या छोटी है, तो आपको GSize इंस्टेंस की मदद से इसकी जानकारी देनी होगी. v3 API इस प्रोसेस को थोड़ा आसान बनाता है. मार्कर की icon प्रॉपर्टी को अपनी कस्टम इमेज के यूआरएल पर सेट करें. इसके बाद, एपीआई अपने-आप आइकॉन का साइज़ तय कर देगा.

Maps JavaScript API, जटिल आइकॉन के लिए भी सहायता उपलब्ध कराता है. जटिल आइकॉन में कई टाइल, जटिल आकार या "स्टैक ऑर्डर" शामिल हो सकते हैं. इससे यह तय होता है कि अन्य ओवरले के मुकाबले इमेज कैसे दिखेंगी. v2 में मार्कर में कोई आकार जोड़ने के लिए, आपको हर GIcon इंस्टेंस में अतिरिक्त प्रॉपर्टी बतानी होगी. साथ ही, इसे GMarker कन्स्ट्रक्टर के विकल्प के तौर पर पास करना होगा. v3 में, इस तरह से तय किए गए आइकॉन को अपनी icon प्रॉपर्टी को Icon टाइप के ऑब्जेक्ट पर सेट करना चाहिए. मार्कर की परछाई का इस्तेमाल, वर्शन 3 में नहीं किया जा सकता.

यहां दिए गए उदाहरणों में, ऑस्ट्रेलिया के बोंडाई बीच पर मौजूद बीच फ़्लैग दिखाया गया है. आइकॉन के पारदर्शी हिस्से पर क्लिक नहीं किया जा सकता: 

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();

var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);

map.addOverlay(new GMarker(bbLatLng, {
  icon: flagIcon
}));
 
var map = new google.maps.Map(
  document.getElementById('map'), {
  center: new google.maps.LatLng(-25.363882, 131.044922),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);

var bbMarker = new google.maps.Marker({
    icon: '/images/beachflag.png'
    shape: shape,
    position: bbLatLng,
    map: map
});

पॉलीलाइन में LatLngs की कैटगरी के साथ-साथ, लाइन सेगमेंट की एक सीरीज़ होती है. ये सेगमेंट, उन जगहों को क्रम से जोड़ते हैं. v3 में Polyline ऑब्जेक्ट बनाना और दिखाना, v2 में GPolyline ऑब्जेक्ट इस्तेमाल करने जैसा ही है. यहां दिए गए सैंपल में, सिंगापुर से होकर ज़्यूरिख से सिडनी तक, 3 पिक्सल चौड़ी और आधी पारदर्शी जियोडेसिक पॉलीलाइन दिखाई गई है:

var polyline = new GPolyline(
  [
    new GLatLng(47.3690239, 8.5380326),
    new GLatLng(1.352083, 103.819836),
    new GLatLng(-33.867139, 151.207114)
  ],
  '#FF0000', 3, 0.5, {
  geodesic: true
});

map.addOverlay(polyline);
 
var polyline = new google.maps.Polyline({
  path: [
    new google.maps.LatLng(47.3690239, 8.5380326),
    new google.maps.LatLng(1.352083, 103.819836),
    new google.maps.LatLng(-33.867139, 151.207114)
  ],
  strokeColor: '#FF0000',
  strokeOpacity: 0.5,
  strokeWeight: 3,
  geodesic: true
});

polyline.setMap(map);

कोड में बदली गई पॉलीलाइन

v3 में, एन्कोड की गई पॉलीलाइन से सीधे Polyline ऑब्जेक्ट बनाने की सुविधा उपलब्ध नहीं है. इसके बजाय, ज्यामिति लाइब्रेरी पॉलीलाइन को कोड में बदलने और डिकोड करने के तरीके उपलब्ध कराती है. इस लाइब्रेरी को लोड करने के तरीके के बारे में ज़्यादा जानने के लिए, Maps v3 API में लाइब्रेरी देखें.

यहां दिए गए उदाहरणों में, एक ही एन्कोड की गई पॉलीलाइन दिखाई गई है. v3 कोड, google.maps.geometry.encoding नेमस्पेस के decodePath() तरीके का इस्तेमाल करता है. 

var polyline = new GPolyline.fromEncoded({
  points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
  levels: 'PPP',
  zoomFactor: 2,
  numLevels: 18,
  color: '#ff0000',
  opacity: 0.8,
  weight: 3
});

map.addOverlay(polyline);
 
var polyline = new google.maps.Polyline({
  path: google.maps.geometry.encoding.decodePath(
    'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
  strokeColor: '#FF0000',
  strokeOpacity: 0.5,
  strokeWeight: 3,
});

polyline.setMap(map);

पॉलीगॉन, बंद लूप के अंदर के इलाके को दिखाता है. Polyline ऑब्जेक्ट की तरह ही, Polygon ऑब्जेक्ट में भी व्यवस्थित क्रम में पॉइंट की सीरीज़ होती है. v3 Polygon क्लास, v2 के GPolygon क्लास से काफ़ी मिलती-जुलती है. हालांकि, इसमें एक अहम अंतर है. अब आपको लूप को बंद करने के लिए, पाथ के आखिर में शुरुआती वर्टिक्स को दोहराने की ज़रूरत नहीं है. v3 API, आखिरी निर्देशांक को पहले निर्देशांक से जोड़कर, किसी भी पॉलीगॉन को अपने-आप बंद कर देगा. नीचे दिए गए कोड स्निपेट, बरमूडा ट्रैंगल को दिखाने वाला पॉलीगॉन बनाते हैं:

var map = new GMap2(document.getElementById('map'));

map.setCenter(new GLatLng(24.886436, -70.268554), 5);

var bermudaTriangle = new GPolygon(
  [
    new GLatLng(25.774252, -80.190262),
    new GLatLng(18.466465, -66.118292),
    new GLatLng(32.321384, -64.75737),
    new GLatLng(25.774252, -80.190262)
  ],
  '#FF0000', 2, 0.8, '#FF0000', 0.35);

map.addOverlay(bermudaTriangle);
 
var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(24.886436, -70.268554),
  mapTypeId: google.maps.MapTypeId.TERRAIN,
  zoom: 5
});

var bermudaTriangle = new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
  ],
  strokeColor: '#FF0000',
  strokeWeight: 2,
  strokeOpacity: 0.8,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});

bermudaTriangle.setMap(map);

पॉलीलाइन और पॉलीगॉन में, उपयोगकर्ता बदलाव कर सकता है. यहां दिए गए कोड स्निपेट एक जैसे हैं: 

map.addOverlay(polyline);
polyline.enableEditing();
 
polyline.setMap(map);
polyline.setEditable(true);

ड्रॉइंग से जुड़ी ज़्यादा बेहतर सुविधाओं के लिए, v3 दस्तावेज़ में ड्रॉइंग लाइब्रेरी देखें.

InfoWindow, मैप के ऊपर एक फ़्लोटिंग विंडो में कॉन्टेंट दिखाता है. वर्शन 2 और वर्शन 3 की जानकारी वाली विंडो के बीच कुछ मुख्य अंतर हैं:

  • v2 API, हर मैप पर सिर्फ़ एक GInfoWindow का इस्तेमाल करता है. वहीं, v3 API हर मैप पर एक साथ कई InfoWindow का इस्तेमाल करता है.
  • मैप पर क्लिक करने पर, v3 InfoWindow खुला रहेगा. मैप पर क्लिक करने पर, v2 GInfoWindow अपने-आप बंद हो जाता है. Map ऑब्जेक्ट पर click लिसनर जोड़कर, v2 के व्यवहार को एमुलेट किया जा सकता है.
  • v3 API, टैब वाले InfoWindow के लिए नेटिव सपोर्ट नहीं देता.

किसी इमेज को मैप पर डालने के लिए, आपको GroundOverlay ऑब्जेक्ट का इस्तेमाल करना चाहिए. GroundOverlay के लिए कॉन्स्ट्रक्टर, v2 और v3 में एक जैसा ही है: यह किसी इमेज के यूआरएल और पैरामीटर के तौर पर इमेज की सीमाओं की जानकारी देता है.

यहां दिए गए उदाहरण में, मैप पर ओवरले के तौर पर न्यू जर्सी के न्यूयॉर्क का पुराना मैप दिखाया गया है:

var bounds = new GLatLngBounds(
    new GLatLng(40.716216, -74.213393),
    new GLatLng(40.765641, -74.139235));

var overlay = new GGroundOverlay(
    'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    bounds);

map.addOverlay(overlay);
 
var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.716216, -74.213393),
    new google.maps.LatLng(40.765641, -74.139235));

var overlay = new google.maps.GroundOverlay(
    'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    bounds);

overlay.setMap(map);

मैप के टाइप

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

मैप के चार बुनियादी टाइप, वर्शन 2 और 3, दोनों में उपलब्ध हैं:

  • MapTypeId.ROADMAP (G_NORMAL_MAP की जगह लेता है) यह रोडमैप व्यू दिखाता है.
  • MapTypeId.SATELLITE (G_SATELLITE_MAP की जगह लेता है) Google Earth की सैटलाइट इमेज दिखाता है.
  • MapTypeId.HYBRID (G_HYBRID_MAP की जगह लेता है) सामान्य और सैटलाइट व्यू को मिला-जुलाकर दिखाता है.
  • MapTypeId.TERRAIN (G_PHYSICAL_MAP की जगह) इलाके की जानकारी के आधार पर, भौतिक मैप दिखाता है.

यहां v2 और v3 के उदाहरण दिए गए हैं, जिनमें मैप को टेरेन व्यू पर सेट किया गया है:

map.setMapType(G_PHYSICAL_MAP);
    
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

Maps JavaScript API v3 ने कम इस्तेमाल होने वाले मैप टाइप में भी कुछ बदलाव किए हैं:

  • Earth के अलावा, खगोलीय पिंडों के लिए मैप टाइल, v3 API में मैप टाइप के तौर पर उपलब्ध नहीं हैं. हालांकि, इन्हें इस उदाहरण में दिखाए गए तरीके से, कस्टम मैप टाइप के तौर पर ऐक्सेस किया जा सकता है.
  • v3 में कोई ऐसा खास मैप टाइप नहीं है जो v2 के G_SATELLITE_3D_MAP टाइप की जगह लेता हो. इसके बजाय, इस लाइब्रेरी का इस्तेमाल करके, Google Earth प्लग इन को अपने वर्शन 3 के मैप में इंटिग्रेट किया जा सकता है.

सैटलाइट से ली गई तस्वीरें, ज़्यादा ज़ूम लेवल पर हमेशा उपलब्ध नहीं होतीं. अगर आपको ज़ूम लेवल सेट करने से पहले, सबसे ज़्यादा ज़ूम लेवल के बारे में जानना है, तो google.maps.MaxZoomService क्लास का इस्तेमाल करें. यह क्लास, v2 में मौजूद GMapType.getMaxZoomAtLatLng() तरीके की जगह ले लेती है.

var point = new GLatLng(
    180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);

map.getCurrentMapType().getMaxZoomAtLatLng(point,
  function(response) {
    if (response.status) {
      map.setZoom(response.zoom);
    } else {
      alert("Error in Max Zoom Service.");
    }
});
 
var myLatlng = new google.maps.LatLng(
    180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
  document.getElementById("map"),{
    zoom: 0,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
  myLatlng,
  function(response) {
    if (response.status == google.maps.MaxZoomStatus.OK) {
      map.setZoom(response.zoom);
    } else {
      alert("Error in Max Zoom Service.");
    }
});

वर्शन 3 में एरियल इमेजरी की सुविधा चालू करने पर, कंट्रोल वैसे ही होते हैं जैसे वर्शन 2 में GLargeZoomControl3D कंट्रोल होते हैं. साथ ही, इसमें एक इंटरस्टीशियल Rotate कंट्रोल भी होता है, जिससे इमेज को इस्तेमाल की जा सकने वाली दिशाओं में घुमाया जा सकता है.

इस मैप पर, उन शहरों को ट्रैक किया जा सकता है जहां फ़िलहाल 45° वाली इमेज उपलब्ध है. जब 45° वाली इमेज उपलब्ध होती है, तो Maps API के सैटलाइट बटन में एक सबमेन्यू विकल्प जोड़ा जाता है.

लेयर

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

v3 API, कई अलग-अलग लेयर का ऐक्सेस देता है. ये लेयर, इन क्षेत्रों में v2 GLayer क्लास के साथ ओवरलैप होती हैं:

  • KmlLayer ऑब्जेक्ट, KML और GeoRSS एलिमेंट को v3 ओवरले में रेंडर करता है. इससे, v2 GeoXml लेयर के बराबर की सुविधा मिलती है.
  • TrafficLayer ऑब्जेक्ट, ट्रैफ़िक की स्थिति दिखाने वाली एक लेयर को रेंडर करता है. यह लेयर, v2 GTrafficOverlay ओवरले की तरह ही होती है.

ये लेयर, v2 से अलग हैं. इन दोनों के बीच के फ़र्क़ के बारे में यहां बताया गया है. इन्हें मैप में जोड़ने के लिए, setMap() को कॉल करें और उस पर Map ऑब्जेक्ट पास करें जिस पर लेयर को दिखाना है.

इस्तेमाल की जा सकने वाली लेयर के बारे में ज़्यादा जानकारी, लेयर के दस्तावेज़ में उपलब्ध है.

Maps JavaScript API, भौगोलिक जानकारी दिखाने के लिए, KML और GeoRSS डेटा फ़ॉर्मैट के साथ काम करता है. अगर आपको KML या GeoRSS फ़ाइलों को मैप में शामिल करना है, तो यह ज़रूरी है कि वे सार्वजनिक तौर पर ऐक्सेस की जा सकें. v3 में, इन डेटा फ़ॉर्मैट को KmlLayer के किसी इंस्टेंस का इस्तेमाल करके दिखाया जाता है. यह इंस्टेंस, v2 के GGeoXml ऑब्जेक्ट की जगह लेता है.

KML को रेंडर करते समय, v3 एपीआई ज़्यादा सुविधाजनक होता है. इससे आपको इनफ़ोविंडो को छिपाने और क्लिक रिस्पॉन्स में बदलाव करने की सुविधा मिलती है. ज़्यादा जानकारी के लिए, KML और GeoRSS लेयर के वर्शन 3 का दस्तावेज़ देखें.

KmlLayer को रेंडर करते समय, साइज़ और जटिलता से जुड़ी पाबंदियां लागू होती हैं. ज़्यादा जानकारी के लिए, KmlLayer दस्तावेज़ देखें.

नीचे दिए गए सैंपल में, KML फ़ाइल को लोड करने के तरीकों की तुलना की गई है.

geoXml = new GGeoXml(
  'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');

map.addOverlay(geoXml);
 
var layer = new google.maps.KmlLayer(
  'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
    preserveViewport: true
});
layer.setMap(map);

v3 की मदद से, TrafficLayer ऑब्जेक्ट का इस्तेमाल करके, अपने मैप में रीयल-टाइम ट्रैफ़िक की जानकारी जोड़ी जा सकती है. हालांकि, यह सुविधा सिर्फ़ उन जगहों पर उपलब्ध है जहां यह काम करती है. ट्रैफ़िक की जानकारी, अनुरोध करने के समय के हिसाब से दी जाती है. इन उदाहरणों में, लॉस एंजेलिस के लिए ट्रैफ़िक की जानकारी दिखाई गई है: 

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();

var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
 
var map = new google.maps.Map(
    document.getElementById('map'), {
  center: new google.maps.LatLng(34.0492459, -118.241043),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  zoom: 13
});

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

v2 के विपरीत, v3 में TrafficLayer कंस्ट्रक्टर के लिए कोई विकल्प मौजूद नहीं है. v3 में समस्याएं उपलब्ध नहीं हैं.

सेवाएं

Maps JavaScript API, उपयोगकर्ता के इनपुट से पतों को डाइनैमिक तौर पर जियोकोड करने के लिए, geocoder ऑब्जेक्ट उपलब्ध कराता है. अगर आपको पहले से मौजूद, जाने-पहचाने पतों को जियोकोड करना है, तो Geocoding API के दस्तावेज़ देखें.

Geocoding API को बेहतर बनाने के लिए, इसमें कई बदलाव किए गए हैं. साथ ही, इसमें नई सुविधाएं जोड़ी गई हैं और डेटा दिखाने का तरीका भी बदला गया है.

GClientGeocoder के v2 एपीआई में, फ़ॉरवर्ड और रिवर्स जियोकोडिंग के लिए दो अलग-अलग तरीके दिए गए हैं. साथ ही, जियोकोडिंग के तरीके पर असर डालने के लिए अन्य तरीके भी दिए गए हैं. इसके उलट, v3 Geocoder ऑब्जेक्ट सिर्फ़ एक geocode() तरीका उपलब्ध कराता है. यह तरीका, इनपुट शब्दों (जियोकोडिंग के अनुरोध ऑब्जेक्ट के तौर पर) और कॉलबैक के तरीके वाले ऑब्जेक्ट लिटरल को स्वीकार करता है. अनुरोध में टेक्स्ट वाला address एट्रिब्यूट या LatLng ऑब्जेक्ट होने पर, Geocoding API फ़ॉरवर्ड या रिवर्स जियोकोडिंग का जवाब देगा. जियोकोडिंग के अनुरोध में अतिरिक्त फ़ील्ड पास करके, जियोकोडिंग के तरीके पर असर डाला जा सकता है:

  • टेक्स्ट वाला address शामिल करने पर, फ़ॉरवर्ड जियोकोडिंग ट्रिगर होती है. यह getLatLng() मेथड को कॉल करने के बराबर है.
  • latLng ऑब्जेक्ट को शामिल करने पर रिवर्स जियोकोडिंग ट्रिगर होती है, जो getLocations() तरीके को कॉल करने के बराबर है.
  • bounds एट्रिब्यूट को शामिल करने से, विंडो स्क्रीन के आकार के हिसाब से विज्ञापन दिखाने की सुविधा चालू हो जाती है. यह सुविधा, setViewport() तरीके को कॉल करने जैसी ही है.
  • region एट्रिब्यूट को शामिल करने पर, क्षेत्र के हिसाब से कोड का बंटवारा चालू हो जाता है. यह setBaseCountryCode() तरीके को कॉल करने के बराबर है.

v3 में जियोकोडिंग के रिस्पॉन्स, v2 के रिस्पॉन्स से काफ़ी अलग होते हैं. v3 एपीआई, नेस्ट किए गए स्ट्रक्चर को बदल देता है. v2 में, नेस्ट किए गए स्ट्रक्चर का इस्तेमाल किया जाता है, जबकि v3 में, फ़्लैटर स्ट्रक्चर का इस्तेमाल किया जाता है. फ़्लैटर स्ट्रक्चर को पार्स करना आसान होता है. इसके अलावा, v3 के जवाब ज़्यादा जानकारी वाले होते हैं: हर नतीजे में कई पते के कॉम्पोनेंट होते हैं. इनसे हर नतीजे के समाधान के बारे में बेहतर तरीके से पता चलता है.

नीचे दिया गया कोड, टेक्स्ट वाले पते को लेता है और उसे जियोकोड करके पहला नतीजा दिखाता है: 

var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
  'Unknown accuracy', 'country level accuracy',
  'region level accuracy', 'sub-region level accuracy',
  'town level accuracy', 'post code level accuracy',
  'street level accuracy', 'intersection level accuracy',
  'address level accuracy', 'premise level accuracy',
];

function geocode_result_handler(response) {
  if (!response || response.Status.code != 200) {
    alert('Geocoding failed. ' + response.Status.code);
  } else {
    var bounds = new GLatLngBounds(new GLatLng(
        response.Placemark[0].ExtendedData.LatLonBox.south,
        response.Placemark[0].ExtendedData.LatLonBox.west
    ), new GLatLng(
        response.Placemark[0].ExtendedData.LatLonBox.north,
        response.Placemark[0].ExtendedData.LatLonBox.east
    ));
    map.setCenter(bounds.getCenter(),
        map.getBoundsZoomLevel(bounds));
    var latlng = new GLatLng(
        response.Placemark[0].Point.coordinates[1],
        response.Placemark[0].Point.coordinates[0]);
    infoPanel.innerHTML += '<p>1st result is <em>' +
        // No info about location type
        response.Placemark[0].address +
        '</em> of <em>' +
        AccuracyDescription[response.Placemark[0].
            AddressDetails.Accuracy] +
        '</em> at <tt>' + latlng + '</tt></p>';
    var marker_title = response.Placemark[0].address +
        ' at ' + latlng;
    map.clearOverlays();

    var marker = marker = new GMarker(
        latlng,
        {'title': marker_title}
    );
    map.addOverlay(marker);
  }
}

function geocode_address() {
  var address = document.getElementById('input-text').value;
  infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
  geocoder.getLocations(address, geocode_result_handler);
}

function initialize() {
  map = new GMap2(document.getElementById('map'));
  map.setCenter(new GLatLng(38, 15), 2);
  map.setUIToDefault();

  infoPanel = document.getElementById('info-panel');
}
 
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;

function geocode_result_handler(result, status) {
  if (status != google.maps.GeocoderStatus.OK) {
    alert('Geocoding failed. ' + status);
  } else {
    map.fitBounds(result[0].geometry.viewport);
    infoPanel.innerHTML += '<p>1st result for geocoding is <em>' +
        result[0].geometry.location_type.toLowerCase() +
        '</em> to <em>' +
        result[0].formatted_address + '</em> of types <em>' +
        result[0].types.join('</em>, <em>').replace(/_/, ' ') +
        '</em> at <tt>' + result[0].geometry.location +
        '</tt></p>';
    var marker_title = result[0].formatted_address +
        ' at ' + latlng;
    if (marker) {
      marker.setPosition(result[0].geometry.location);
      marker.setTitle(marker_title);
    } else {
      marker = new google.maps.Marker({
        position: result[0].geometry.location,
        title: marker_title,
        map: map
      });
    }
  }
}

function geocode_address() {
  var address = document.getElementById('input-text').value;
  infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
  geocoder.geocode({'address': address}, geocode_result_handler);
}

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(38, 15),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
  infoPanel = document.getElementById('info-panel');
}

Maps JavaScript API v3, निर्देशों का हिसाब लगाने के लिए, v2 की GDirections क्लास को DirectionsService क्लास से बदल देता है.

v3 में route() तरीका, v2 एपीआई के load() और loadFromWaypoints(), दोनों तरीकों की जगह ले लेता है. यह तरीका, इनपुट के लिए इस्तेमाल हुए शब्दों और जवाब मिलने पर लागू होने वाले कॉलबैक के तरीके वाले एक DirectionsRequest ऑब्जेक्ट लिटरल को इस्तेमाल करता है. इस ऑब्जेक्ट लिटरल में विकल्प दिए जा सकते हैं, जैसे कि वर्शन 2 में GDirectionsOptions ऑब्जेक्ट लिटरल में दिए जाते हैं.

Maps JavaScript API v3 में, निर्देश के अनुरोध सबमिट करने के काम को, अनुरोधों को रेंडर करने के काम से अलग कर दिया गया है. अब DirectionsRenderer क्लास की मदद से, अनुरोधों को रेंडर किया जाता है. DirectionsRenderer ऑब्जेक्ट को किसी भी मैप या DirectionsResult ऑब्जेक्ट से, setMap() और setDirections() तरीकों से जोड़ा जा सकता है. रेंडरर एक MVCObject है. इसलिए, यह अपनी प्रॉपर्टी में हुए किसी भी बदलाव का पता लगाएगा और इससे जुड़े निर्देशों में बदलाव होने पर मैप को अपडेट करेगा.

यहां दिए गए कोड में, किसी पते से पैदल चलने के रास्तों का इस्तेमाल करके, किसी खास जगह के लिए पैदल चलने के निर्देश पाने का अनुरोध करने का तरीका बताया गया है. ध्यान दें कि सिर्फ़ v3, डबलिन चिड़ियाघर के पैदल रास्ते पर पैदल जाने के दिशा-निर्देश दे सकता है. 

var map;
var directions;
var directionsPanel;

function initialize() {
  var origin = new google.maps.LatLng(53.348172, -6.297285);
  var destination = new google.maps.LatLng(53.355502, -6.30557);
  directionsPanel = document.getElementById("route");

  map = new GMap2(document.getElementById('map'));
  map.setCenter(origin, 10);
  map.setUIToDefault();

  directions = new GDirections(map, directionsPanel);

  directions.loadFromWaypoints(
      [origin, destination], {
        travelMode: 'G_TRAVEL_MODE_WALKING',
  });
}
 
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();

function initialize() {
  var origin = new google.maps.LatLng(53.348172, -6.297285);
  var destination = new google.maps.LatLng(53.355502, -6.30557);
  directionsRenderer = new google.maps.DirectionsRenderer();

  map = new google.maps.Map(
      document.getElementById('map'), {
        center: origin,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  directionsRenderer.setPanel(document.getElementById("route"));
  directionsRenderer.setMap(map);
  directionsService.route({
    origin: origin,
    destination: destination,
    travelMode: google.maps.DirectionsTravelMode.WALKING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);
    }
  });
}

Google Street View, कवरेज वाले इलाके में चुनी गई जगहों से, इंटरैक्टिव 360° व्यू दिखाता है. v3 API, ब्राउज़र में नेटिव तौर पर स्ट्रीट व्यू के साथ काम करता है. हालांकि, v2 के लिए स्ट्रीट व्यू की इमेज दिखाने के लिए, Flash® प्लग इन की ज़रूरत होती थी.

Street View इमेज के लिए, v3 में StreetViewPanorama ऑब्जेक्ट या v2 में GStreetviewPanorama ऑब्जेक्ट का इस्तेमाल किया जा सकता है. इन क्लास के इंटरफ़ेस अलग-अलग होते हैं, लेकिन इनकी भूमिका एक जैसी होती है: div कंटेनर को स्ट्रीट व्यू की इमेज से जोड़ना और आपको स्ट्रीट व्यू पैनोरमा की जगह और पीओवी (पॉइंट ऑफ़ व्यू) की जानकारी देना. 

function initialize() {
  var fenwayPark = new GLatLng(42.345573, -71.098326);
  panoramaOptions = {
    latlng: fenwayPark,
    pov: {
      heading: 35,
      pitch: 5,
      zoom: 1
    }
  };

  var panorama = new GStreetviewPanorama(
      document.getElementById('pano'),
      panoramaOptions);

  GEvent.addListener(myPano, "error", handleNoFlash);
}

function handleNoFlash(errorCode) {
  if (errorCode == FLASH_UNAVAILABLE) {
    alert('Error: Your browser does not support Flash');
    return;
  }
}
 
function initialize() {
  var fenway = new google.maps.LatLng(42.345573, -71.098326);
  var panoramaOptions = {
    position: fenway,
    pov: {
      heading: 35,
      pitch: 5,
      zoom: 1
    }
  };

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'),
      panoramaOptions);
}

Street View के डेटा को सीधे तौर पर ऐक्सेस करने के लिए, v3 में StreetViewService ऑब्जेक्ट या v2 में मिलते-जुलते GStreetviewClient ऑब्जेक्ट का इस्तेमाल किया जा सकता है. दोनों ही इंटरफ़ेस, स्ट्रीट व्यू डेटा को वापस पाने या उसकी उपलब्धता की जांच करने के लिए मिलते-जुलते इंटरफ़ेस उपलब्ध कराते हैं. साथ ही, जगह या पैनोरमा आईडी के हिसाब से खोजने की सुविधा देते हैं.

v3 में, स्ट्रीट व्यू की सुविधा डिफ़ॉल्ट रूप से चालू रहती है. मैप, Street View पेगमैन कंट्रोल के साथ दिखेगा. साथ ही, एपीआई, Street View पैनोरमा दिखाने के लिए मैप div का फिर से इस्तेमाल करेगा. यहां दिए गए कोड में, Street View पैनोरमा को अलग-अलग div में बांटकर, v2 के व्यवहार को एमुलेट करने का तरीका बताया गया है. 

var marker;
var panoClient = new GStreetviewClient();

function initialize() {
  if (GBrowserIsCompatible()) {
    var myPano = new GStreetviewPanorama(
        document.getElementById('pano'));
    GEvent.addListener(myPano, 'error', handleNoFlash);
    var map = new GMap2(document.getElementById('map'));
    map.setCenter(new GLatLng(42.345573, -71.098326), 16);
    map.setUIToDefault();

    GEvent.addListener(map, 'click', function(overlay, latlng) {
      if (marker) {
        marker.setLatLng(latlng);
      } else {
        marker = new GMarker(latlng);
        map.addOverlay(marker);
      }
      var nearestPano = panoClient.getNearestPanorama(
          latlng, processSVData);
    });

    function processSVData(panoData) {
      if (panoData.code != 200) {
        alert("Panorama data not found for this location.");
      }
      var latlng = marker.getLatLng();
      var dLat = latlng.latRadians()
          - panoData.location.latlng.latRadians();
      var dLon = latlng.lngRadians()
          - panoData.location.latlng.lngRadians();
      var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
      var x = Math.cos(panoData.location.latlng.latRadians()) *
              Math.sin(latlng.latRadians()) -
              Math.sin(panoData.location.latlng.latRadians()) *
              Math.cos(latlng.latRadians()) * Math.cos(dLon);
      var bearing = Math.atan2(y, x) * 180 / Math.PI;

      myPano.setLocationAndPOV(panoData.location.latlng, {
        yaw: bearing
      });
    }

    function handleNoFlash(errorCode) {
      if (errorCode == FLASH_UNAVAILABLE) {
        alert('Error: Your browser does not support Flash');
        return;
      }
    }
  }
}
 
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();

function radians(degrees) { return Math.PI * degrees / 180.0 };

function initialize() {

  panorama = new google.maps.StreetViewPanorama(
      document.getElementById("pano"));

  map = new google.maps.Map(
      document.getElementById('map'), {
    center: new google.maps.LatLng(42.345573, -71.098326),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 16
  });

  google.maps.event.addListener(map, 'click', function(event) {
    if (!marker) {
      marker = new google.maps.Marker({
          position: event.latLng,
          map: map
      });
    } else {
      marker.setPosition(event.latLng);
    }
    sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });
}

function processSVData(panoData, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    alert("Panorama data not found for this location.");
  }
  var bearing = google.maps.geometry.spherical.computeHeading(
      panoData.location.latLng, marker.getPosition());

  panorama.setPano(panoData.location.pano);

  panorama.setPov({
    heading: bearing,
    pitch: 0,
    zoom: 1
  });

  panorama.setVisible(true);
  marker.setMap(panorama);
}