हवाई अड्डों के लिए बेहतर नेविगेशन

इमेज

एयरपोर्ट बड़े होते हैं और उनमें कई टर्मिनल होते हैं. इसलिए, समय पर पहुंचने और जाने के लिए सटीक नेविगेशन ज़रूरी है. Google Maps Geocoding API आम तौर पर, अक्षांश/देशांतर वाला एक निर्देशांक दिखाता है. ज़्यादातर मामलों में, यह निर्देशांक बड़े एयरपोर्ट कॉम्प्लेक्स का केंद्रक होता है. यह ऐप्लिकेशन एक इंटरैक्टिव टूल है. इसे खास तौर पर इसलिए डिज़ाइन किया गया है, ताकि लोग किसी बड़े कॉम्प्लेक्स जैसे कि एयरपोर्ट के अंदर मौजूद किसी टर्मिनल या पिकअप/ड्रॉप-ऑफ़ पॉइंट की सटीक जगह का पता लगा सकें और उसे देख सकें.

इमेज

यह इस तरह से काम करता है:

हवाई अड्डा/जगह की खोज: उपयोगकर्ता किसी मुख्य जगह की खोज करके शुरुआत करते हैं. जैसे, "इंदिरा गांधी अंतरराष्ट्रीय हवाई अड्डा") के लिए, Google Places API की अपने-आप पूरी होने वाली सुविधा का इस्तेमाल किया जाता है. यह सुविधा सिर्फ़ भारत में उपलब्ध है.

उप-जगह की जानकारी ढूंढना: मुख्य जगह चुनने के बाद, स्क्रिप्ट Google Places API का इस्तेमाल करके जानकारी फ़ेच करती है. इसमें उस जगह से जुड़े "उप-डेस्टिनेशन" की जानकारी भी शामिल होती है. जैसे, अगर Google के डेटा में टर्मिनल 1, टर्मिनल 3, खास गेट वगैरह की जानकारी उपलब्ध है, तो स्क्रिप्ट उसे भी फ़ेच करती है.

विज़ुअल मैपिंग: यह स्क्रिप्ट, मुख्य जगह और उसकी उप-मंज़िलों के निर्देशांकों का पता लगाने के लिए, Geocoding API का इस्तेमाल करती है.

इसके बाद, यह मुख्य जगह और पहचाने गए हर उप-डेस्टिनेशन के लिए, मैप पर अलग-अलग क्लिक किए जा सकने वाले मार्कर (नीले सर्कल) दिखाता है.

सटीक पहचान: सब-डेस्टिनेशन मार्कर पर क्लिक करने से, वह हाइलाइट हो जाता है (हरा हो जाता है). साथ ही, एक InfoWindow खुलती है. इसमें सब-डेस्टिनेशन का नाम और अन्य उपलब्ध जानकारी (जैसे कि पता या टाइप) दिखती है. इससे उपयोगकर्ता यह पुष्टि कर पाता है कि उसने सही पॉइंट चुना है. संदर्भ के हिसाब से व्यू: मैप, अपने व्यू (fitBounds) को अपने-आप अडजस्ट करता है, ताकि सभी ज़रूरी मार्कर (मुख्य जगह + उप-मंज़िलें) साफ़ तौर पर दिखें.

Airport Navigation ऐप्लिकेशन में Google Maps Platform API

इस दस्तावेज़ में, Google Maps Platform के मुख्य एपीआई और उनके पैरामीटर के बारे में बताया गया है. इनका इस्तेमाल, "हवाई अड्डे पर नेविगेट करें" डेमो ऐप्लिकेशन में किया गया है. यह ऐप्लिकेशन, मैप दिखाने, जगह खोजने, जगह की पूरी जानकारी देने, और जगह की बेहतर इनसाइट देने के लिए कई सेवाओं का इस्तेमाल करता है.

1. मैप को शुरू करना और उसे दिखाना

ऐप्लिकेशन का मुख्य हिस्सा, इंटरैक्टिव मैप है.

  • इस्तेमाल किया गया एपीआई: google.maps.Map (Maps JavaScript API से)
  • मकसद: इस कुकी का इस्तेमाल, वेब पेज पर इंटरैक्टिव मैप बनाने और उसे दिखाने के लिए किया जाता है.
  • मुख्य पैरामीटर:
    • center: इससे मैप के शुरुआती भौगोलिक केंद्र के बारे में पता चलता है. इस ऐप्लिकेशन में, इसे शुरू में दिल्ली के निर्देशांक ({ lat: 28.461835685621395, lng: 77.05004035761647 }) पर सेट किया गया है.
    • zoom: इससे मैप के लिए ज़ूम करने का शुरुआती लेवल सेट किया जाता है. DEFAULT_ZOOM_LEVEL (15) का इस्तेमाल क्लोज़-अप व्यू के लिए किया जाता है.
    • mapId: Google Cloud Console में कॉन्फ़िगर की गई मैप स्टाइल के लिए यूनीक आइडेंटिफ़ायर.

2. जगह की खोज और ऑटोकंप्लीट

खोज बार की सुविधा, Places API की मदद से काम करती है.

  • इस्तेमाल किया गया एपीआई: google.maps.places.Autocomplete (Maps JavaScript API की Places Library से)
  • मकसद: यह कुकी, उपयोगकर्ता के टाइप करते समय भौगोलिक खोजों के लिए टेक्स्ट पूरा करने का अनुमानित सुझाव देती है. साथ ही, हवाई अड्डों जैसी जगहों के बारे में काम के सुझाव देती है.
  • मुख्य पैरामीटर:
    • input: यह एचटीएमएल इनपुट एलिमेंट (#search-input) है. इसमें उपयोगकर्ता अपनी क्वेरी टाइप करता है.
    • componentRestrictions: खोज के नतीजों को किसी देश के हिसाब से फ़िल्टर करता है. यहां, { country: 'in' } से खोज के नतीजे सिर्फ़ भारत के लिए सीमित कर दिए गए हैं.
    • fields: इससे चुने गए प्लेस के लिए, दिखाए जाने वाले डेटा फ़ील्ड के बारे में पता चलता है. ['place_id'] का इस्तेमाल शुरू में सिर्फ़ जगह के यूनीक आइडेंटिफ़ायर को वापस पाने के लिए किया जाता है. इससे डेटा ट्रांसफ़र को ऑप्टिमाइज़ किया जा सकता है.
  • ऑटोकंप्लीट सुविधा इस्तेमाल करने का तरीका
    // Initialize Autocomplete
    const autocomplete = new google.maps.places.Autocomplete(input, {
      componentRestrictions: { country: 'in' },
      fields: ['place_id'],
    });

    // Add listener to the Autocomplete
    autocomplete.addListener('place_changed', async () => {
      const place = autocomplete.getPlace();
      if (!place.place_id) {
        return;
      }
      // Once a place is selected, fetch details
      await getPlaceDetails(place.place_id);
    });

3. जगह की पूरी जानकारी पाना और उप-मंज़िलों को मैनेज करना

अपने-आप पूरा होने वाले सुझावों में से किसी जगह को चुनने पर, उस जगह के बारे में ज़्यादा जानकारी मिलती है.

  • इस्तेमाल किया गया एपीआई: Places API (https://places.googleapis.com/v1/places/{placeId} को सीधे fetch कॉल करके)
  • मकसद: किसी जगह के बारे में ज़्यादा जानकारी पाना. जैसे, उसका डिसप्ले नेम, पता, टाइप, और सबसे अहम, उसका subDestinations (जैसे, एयरपोर्ट जैसे बड़े कॉम्प्लेक्स के अंदर मौजूद अलग-अलग टर्मिनल या अहम जगहें).
  • यूआरएल में मौजूद मुख्य पैरामीटर:
    1. {placeId}: चुनी गई जगह का यूनीक आइडेंटिफ़ायर.
    2. fields: इससे यह तय होता है कि कौनसे डेटा फ़ील्ड वापस पाने हैं. यह ऐप्लिकेशन id, displayName, subDestinations, types, और formattedAddress का अनुरोध करता है. लागत को कंट्रोल करने और सिर्फ़ ज़रूरी डेटा पाने के लिए, यह ज़रूरी है.
  • किसी जगह की जानकारी के आधार पर subDestinations कैसे पाएं
async function getPlaceDetails(placeId) {
  // Construct the URL for the Places API (v1) details endpoint
  // The 'fields' parameter is crucial for requesting subDestinations
  const url = `https://places.googleapis.com/v1/places/${placeId}?key=YOUR_API_KEY&fields=id,displayName,subDestinations,types,formattedAddress`;

  const response = await fetch(url);
  const data = await response.json();

  // Accessing subDestinations from the Places API response
  if (data.subDestinations && data.subDestinations.length > 0) {
    for (const subDestination of data.subDestinations) {
      // Each subDestination object contains an 'id' and 'displayName'
      console.log(`Sub-destination ID: ${subDestination.id}`);
      console.log(`Sub-destination Name: ${subDestination.displayName?.text}`);
      // This subDestination.id is then used in a geocoding call (as shown in section 4)
    }
  }
}


**Handling `subDestinations`:** When the Places API returns
`subDestinations`, the application initiates a process for each one:
1.  **Geocoding:** It uses the `google.maps.Geocoder` to convert
    each `subDestination.id` into its precise geographical coordinates
    (`lat`, `lng`).
1.  **Marker Placement:** A distinct marker is added to the map for
    each sub-destination. These markers are styled with a blue circle icon
    to differentiate them.
1.  **Map Bounds Adjustment:** The `google.maps.LatLngBounds` object
    is used to dynamically expand the map's view to encompass all retrieved
    sub-destinations, verifying they are all visible within the current map
    frame.
1.  **Interactive Information Window:** A `click` listener is
    attached to each sub-destination marker. When clicked, the marker's
    icon changes to green, and an `InfoWindow` appears, displaying the
    sub-destination's name, address, and types. This provides immediate,
    detailed context to the user.

4. जियोकोडिंग और रिवर्स जियोकोडिंग: उप-मंज़िलों की जानकारी पाना

ऐप्लिकेशन, जियोकोडिंग का इस्तेमाल दो मुख्य कामों के लिए करता है: जगह के आईडी को निर्देशांकों में बदलना और निर्देशांकों को जगह की जानकारी में वापस बदलना. इस सेक्शन में खास तौर पर यह बताया गया है कि सब-डेस्टिनेशन के बारे में ज़्यादा जानकारी पाने के लिए, जियोकोडिंग का इस्तेमाल कैसे किया जाता है.

  • इस्तेमाल किया गया एपीआई: google.maps.Geocoder (Maps JavaScript API से) और Geocoding API (https://maps.googleapis.com/maps/api/geocode/json को सीधे fetch कॉल करके)
  • मकसद:
    • google.maps.Geocoder: इसका इस्तेमाल, placeId (ऑटोकंप्लीट या Places API से मिला) को भौगोलिक निर्देशांकों (lat, lng) और व्यूपोर्ट में बदलने के लिए किया जाता है. इससे मैप, चुनी गई जगह और उसके सब-डेस्टिनेशन पर सही तरीके से सेंटर और ज़ूम हो पाता है.
    • Geocoding API (fetch): इसका इस्तेमाल रिवर्स जियोकोडिंग (अक्षांश और देशांतर को ऐसे पते में बदलना जिसे आसानी से पढ़ा जा सके) के लिए किया जाता है. साथ ही, इसका इस्तेमाल जगह की ज़्यादा जानकारी पाने के लिए भी किया जाता है. जैसे, बिल्डिंग की आउटलाइन और नेविगेशन पॉइंट.
  • मुख्य पैरामीटर:
    • google.maps.Geocoder.geocode():
      • placeId: जियोकोड करने के लिए प्लेस आईडी.
      • location: रिवर्स जियोकोडिंग के लिए LatLng ऑब्जेक्ट.
    • Geocoding API fetch कॉल:
      • latlng: रिवर्स जियोकोडिंग के लिए अक्षांश और देशांतर के कोऑर्डिनेट.
      • extra_computations=BUILDING_AND_ENTRANCES: यह ज़रूरी पैरामीटर, अतिरिक्त डेटा का अनुरोध करता है. खास तौर पर, बिल्डिंग के फ़ुटप्रिंट और प्रवेश द्वार की जानकारी का अनुरोध करता है. इस डेटा का इस्तेमाल, बिल्डिंग की आउटलाइन और नेविगेशन पॉइंट दिखाने के लिए किया जाता है.

ज़्यादा जानकारी (जैसे कि जगह, फ़ॉर्मैट किया गया पता, टाइप) पाने के लिए, subDestination आईडी का इस्तेमाल कैसे करें

function geocodeAndAddMarker(subDestination, bounds) {
  return new Promise((resolve, reject) => {
    const geocoder = new google.maps.Geocoder();
    // Using the subDestination.id to geocode and get location details
    geocoder.geocode({ placeId: subDestination.id }, (results, status) => {
      if (status === "OK" && results[0]) {
        const location = results[0].geometry.location;
        const displayName = subDestination.displayName?.text || "Sub-destination";
        const formattedAddress = results[0].formatted_address; // Further detail from Geocoding
        const types = results[0].types; // Further detail from Geocoding

        const marker = new google.maps.Marker({
          map: map,
          position: location,
          title: displayName,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'blue',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          }
        });

        marker.addListener('click', () => {
          marker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'green',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          });
          const infowindow = new google.maps.InfoWindow({
            content: `<b>${displayName}</b><br><p>Address: ${formattedAddress}</p><p>Types: ${types.join(', ')}</p>`,
          });
          infowindow.open(map, marker);
        });
        bounds.extend(location);
        resolve(true);
      } else {
        reject(new Error(`Geocoding failed for placeId: ${subDestination.id}`));
      }
    });
  });
}

5. मार्कर दिखाना

मार्कर का इस्तेमाल, मैप पर किसी खास जगह को हाइलाइट करने के लिए किया जाता है.

  • इस्तेमाल किया गया एपीआई: Maps JavaScript API से google.maps.Marker और Maps JavaScript API की मार्कर लाइब्रेरी से google.maps.marker.PinElement के साथ google.maps.marker.AdvancedMarkerElement
  • मकसद:
    • google.maps.Marker: इसका इस्तेमाल, शुरुआती तौर पर ड्रैग किए जा सकने वाले मार्कर के लिए किया जाता है. हालांकि, दिए गए कोड में draggable को false पर सेट किया गया है, लेकिन यह इसकी क्षमता का हिस्सा है. इसका इस्तेमाल, सेक्शन 3 में बताए गए बुनियादी सब-डेस्टिनेशन मार्कर के लिए भी किया जाता है.
    • AdvancedMarkerElement और PinElement: इनका इस्तेमाल नेविगेशन पॉइंट मार्कर को ज़्यादा विज़ुअल बनाने के लिए किया जाता है. इससे मार्कर के पिन को कस्टम स्टाइल में सेट किया जा सकता है.
  • मुख्य पैरामीटर:
    • position: LatLng कोऑर्डिनेट, जहां मार्कर रखा जाएगा.
    • map: मैप का वह इंस्टेंस जिस पर मार्कर दिखेगा.
    • title: मार्कर पर कर्सर घुमाने पर दिखने वाला टेक्स्ट.
    • icon: इसकी मदद से, google.maps.Marker के लिए कस्टम आइकॉन इस्तेमाल किए जा सकते हैं. जैसे, google.maps.SymbolPath.CIRCLE के साथ).
    • content: AdvancedMarkerElement के लिए, इसकी मदद से कस्टम एचटीएमएल कॉन्टेंट एम्बेड किया जा सकता है. इसमें पहले से स्टाइल किए गए पिन के लिए PinElement भी शामिल है.
    • PinElement पैरामीटर: background, borderColor, glyphColor, scale का इस्तेमाल करके, विज़ुअल को पसंद के मुताबिक बनाया जा सकता है.

6. इमारतों की आउटलाइन दिखाना

यह ऐप्लिकेशन, इमारतों के फ़ुटप्रिंट को विज़ुअल तौर पर दिखा सकता है.

  • इस्तेमाल किया गया एपीआई: google.maps.Data (Maps JavaScript API से)
  • मकसद: भौगोलिक डेटा दिखाना. जैसे, इमारत की आउटलाइन (Geocoding API के extra_computations से GeoJSON display_polygon के तौर पर मिलती है).
  • मुख्य पैरामीटर:
    • map: यह मैप का वह इंस्टेंस होता है जिस पर डेटा लेयर लागू की जाती है.
    • style: इससे GeoJSON सुविधाओं की विज़ुअल स्टाइल तय की जाती है (जैसे, strokeColor, fillColor, fillOpacity).
    • addGeoJson(): लेयर में GeoJSON डेटा जोड़ने का तरीका.

7. मैप का दायरा और ज़ूम लेवल

पुष्टि करना कि मैप व्यू में सभी ज़रूरी जगहें शामिल हों.

  • इस्तेमाल किया गया एपीआई: google.maps.LatLngBounds (Maps JavaScript API से)
  • मकसद: मैप के व्यूपोर्ट को डाइनैमिक तरीके से अडजस्ट करना, ताकि वह भौगोलिक पॉइंट के कलेक्शन (जैसे, मुख्य जगह और उसके सभी उप-डेस्टिनेशन) के हिसाब से फ़िट हो सके.
  • मुख्य तरीके:
    • extend(location): यह बाउंड्री में LatLng पॉइंट जोड़ता है. अगर ज़रूरी हो, तो बाउंड्री को बड़ा करता है.
    • fitBounds(bounds): यह मैप के सेंटर और ज़ूम लेवल को इस तरह से अडजस्ट करता है कि LatLngBounds ऑब्जेक्ट में तय की गई पूरी जगह दिख सके.

Google Maps Platform के इन एपीआई को मिलाकर, ऐप्लिकेशन लोगों को जगहें खोजने, उनकी जानकारी देखने, और उनसे जुड़ी भौगोलिक जानकारी को विज़ुअलाइज़ करने का बेहतर और इंटरैक्टिव अनुभव देता है. जैसे, उप-मंज़िल और बिल्डिंग की आउटलाइन.

लागू करने से जुड़ी बातें ध्यान दें कि यह सुविधा, एयरपोर्ट के सभी इलाकों में काम नहीं करती. साथ ही, यह (एयरपोर्ट टर्मिनल) डेटा की उपलब्धता पर निर्भर करती है.

संसाधन Geocoding API Places API Maps Javascript API

लेखक: