रास्ते की जानकारी पाएं

यूरोपियन इकनॉमिक एरिया (ईईए) के डेवलपर

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

पूरे उदाहरण का सोर्स कोड देखें

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

TypeScript

// Initialize and add the map.
let map;
let mapPolylines: google.maps.Polyline[] = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function initMap(): Promise<void> {
  //  Request the needed libraries.
  const [{Map}, {Place}, {Route}] = await Promise.all([
    google.maps.importLibrary('maps') as Promise<google.maps.MapsLibrary>,
    google.maps.importLibrary('places') as Promise<google.maps.PlacesLibrary>,
    //@ts-ignore
    google.maps.importLibrary('routes') as Promise<google.maps.Routes>
  ]);

  map = new Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: center,
    mapTypeControl: false,
    mapId: 'DEMO_MAP_ID',
  });

  // Use address strings in a directions request.
  const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
  };

  // Use Place IDs in a directions request.
  const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
  });

  const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
  });

  const requestWithPlaceIds = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
  }; 

  // Use lat/lng in a directions request.
  // Mountain View, CA
  const originLatLng = {lat: 37.422000, lng: -122.084058};
  // San Francisco, CA
  const destinationLatLng = {lat: 37.774929, lng: -122.419415};

  // Define a computeRoutes request.
  const requestWithLatLngs = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
  };

  // Use Plus Codes in a directions request.
  const requestWithPlusCodes = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
  };

  // Define a routes request.
  const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
  };

  // Call computeRoutes to get the directions.
  const {routes, fallbackInfo, geocodingResults} = await Route.computeRoutes(request);

  // Use createPolylines to create polylines for the route.
  mapPolylines = routes[0].createPolylines();
  // Add polylines to the map.
  mapPolylines.forEach((polyline) => polyline.setMap(map));

  // Create markers to start and end points.
  const markers = await routes[0].createWaypointAdvancedMarkers();
  // Add markers to the map
  markers.forEach((marker) => marker.setMap(map));

  // Display the raw JSON for the result in the console.
  console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);

  // Fit the map to the path.
  fitMapToPath(routes[0].path!);
}

// Helper function to fit the map to the path.
async function fitMapToPath(path) {
  const { LatLngBounds } = await google.maps.importLibrary('core') as google.maps.CoreLibrary;
  const bounds = new LatLngBounds();
  path.forEach((point) => {
    bounds.extend(point);
  });
  map.fitBounds(bounds);
}

initMap();

JavaScript

// Initialize and add the map.
let map;
let mapPolylines = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        //@ts-ignore
        google.maps.importLibrary('routes')
    ]);
    map = new Map(document.getElementById("map"), {
        zoom: 12,
        center: center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };
    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });
    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });
    const requestWithPlaceIds = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };
    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422000, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };
    // Define a computeRoutes request.
    const requestWithLatLngs = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };
    // Use Plus Codes in a directions request.
    const requestWithPlusCodes = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };
    // Define a routes request.
    const request = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };
    // Call computeRoutes to get the directions.
    const { routes, fallbackInfo, geocodingResults } = await Route.computeRoutes(request);
    // Use createPolylines to create polylines for the route.
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => polyline.setMap(map));
    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => marker.setMap(map));
    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);
    // Fit the map to the path.
    fitMapToPath(routes[0].path);
}
// Helper function to fit the map to the path.
async function fitMapToPath(path) {
    const { LatLngBounds } = await google.maps.importLibrary('core');
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}
initMap();

सीएसएस

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
   * Optional: Makes the sample page fill the window.
   */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

एचटीएमएल

<html>
  <head>
    <title>Get directions</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
  </body>
</html>

सैंपल आज़माएं

दो जगहों के बीच का रास्ता पाने का अनुरोध करने के लिए, computeRoutes() मेथड को कॉल करें. यहां दिए गए उदाहरण में, अनुरोध तय करने और फिर रूट पाने के लिए computeRoutes() को कॉल करने का तरीका दिखाया गया है.

  // Import the Routes library.
  const { Route } = await google.maps.importLibrary('routes');

  // Define a computeRoutes request.
  const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
  };

  // Call the computeRoutes() method to get routes.
  const {routes} = await Route.computeRoutes(request);
    

वापस लाने के लिए फ़ील्ड चुनें

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

फ़ील्ड मास्क का इस्तेमाल करने से, यह भी पक्का होता है कि आपने गैर-ज़रूरी डेटा का अनुरोध नहीं किया है. इससे जवाब मिलने में लगने वाले समय को कम करने में मदद मिलती है. साथ ही, यह ऐसी जानकारी को वापस आने से रोकता है जिसकी आपके सिस्टम को ज़रूरत नहीं है.

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

TypeScript

// Define a routes request.
const request = {
  origin: 'Mountain View, CA',
  destination: 'San Francisco, CA',
  travelMode: 'DRIVING',
  fields: ['path'], // Request fields needed to draw polylines.
};

JavaScript

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};

किसी रूट के लिए जगहों की जानकारी देना

किसी रास्ते का हिसाब लगाने के लिए, आपको कम से कम रास्ते की शुरुआती जगह और रास्ते की मंज़िल की जानकारी देनी होगी. साथ ही, फ़ील्ड मास्क की जानकारी भी देनी होगी. किसी रास्ते के बीच में पड़ने वाले वेपॉइंट भी तय किए जा सकते हैं. साथ ही, वेपॉइंट का इस्तेमाल अन्य कामों के लिए भी किया जा सकता है. जैसे, किसी रास्ते पर स्टॉप या पासथ्रू पॉइंट जोड़ना.

ComputeRoutesRequest में, इनमें से किसी भी तरीके से जगह की जानकारी दी जा सकती है:

किसी अनुरोध में सभी वेपॉइंट के लिए, एक ही तरीके से जगहें तय की जा सकती हैं. इसके अलावा, अलग-अलग तरीके भी इस्तेमाल किए जा सकते हैं. उदाहरण के लिए, ओरिजन वेपॉइंट के लिए अक्षांश/देशांतर निर्देशांकों का इस्तेमाल किया जा सकता है. साथ ही, डेस्टिनेशन वेपॉइंट के लिए Place ऑब्जेक्ट का इस्तेमाल किया जा सकता है.

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

  • अक्षांश/देशांतर निर्देशांकों का इस्तेमाल करने से, जगह की जानकारी को उन निर्देशांकों के सबसे नज़दीकी सड़क पर स्नैप किया जा सकता है. ऐसा हो सकता है कि यह सड़क, प्रॉपर्टी तक पहुंचने का रास्ता न हो या यह ऐसी सड़क हो जो मंज़िल तक जल्दी या सुरक्षित तरीके से न ले जाती हो.
  • रास्ते का हिसाब लगाने से पहले, पते की स्ट्रिंग को Routes API से जियोकोड करना ज़रूरी है, ताकि उन्हें अक्षांश/देशांतर के निर्देशांकों में बदला जा सके. इस कन्वर्ज़न से परफ़ॉर्मेंस पर असर पड़ सकता है.

किसी जगह को Place ऑब्जेक्ट के तौर पर तय करें (सुझाया गया)

किसी जगह का इस्तेमाल करके जगह की जानकारी देने के लिए, नया Place इंस्टेंस बनाएं. इस स्निपेट में, origin और destination के लिए नए Place इंस्टेंस बनाने और फिर उन्हें ComputeRoutesRequest में इस्तेमाल करने का तरीका दिखाया गया है:

TypeScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
  id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});

const destinationPlaceInstance = new Place({
  id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});

const requestWithPlaceIds = {
  origin: originPlaceInstance,
  destination: destinationPlaceInstance,
  fields: ['path'], // Request fields needed to draw polylines.
}; 

JavaScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});
const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});
const requestWithPlaceIds = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};

अक्षांश/देशांतर के कोऑर्डिनेट

किसी जगह को अक्षांश/देशांतर के कोऑर्डिनेट के तौर पर तय करने के लिए, नया google.maps.LatLngLiteral, google.maps.LatLngAltitude या google.maps.LatLngAltitudeLiteral इंस्टेंस बनाएं. इस स्निपेट में, origin और destination के लिए नए google.maps.LatLngLiteral इंस्टेंस बनाने का तरीका दिखाया गया है. इसके बाद, उन्हें computeRoutesRequest में इस्तेमाल करने का तरीका दिखाया गया है:

TypeScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = {lat: 37.422000, lng: -122.084058};
// San Francisco, CA
const destinationLatLng = {lat: 37.774929, lng: -122.419415};

// Define a computeRoutes request.
const requestWithLatLngs = {
  origin: originLatLng,
  destination: destinationLatLng,
  fields: ['path'],
};

JavaScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422000, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };
// Define a computeRoutes request.
const requestWithLatLngs = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};

पते की स्ट्रिंग

पते की स्ट्रिंग, पते को दिखाने वाली स्ट्रिंग होती है. जैसे, "1600 Amphitheatre Parkway, Mountain View, CA". जियोकोडिंग, पते की स्ट्रिंग को अक्षांश और देशांतर के निर्देशांकों में बदलने की प्रोसेस है. जैसे, अक्षांश 37.423021 और देशांतर -122.083739.

जब किसी पते की स्ट्रिंग को वेपॉइंट की जगह के तौर पर पास किया जाता है, तो Routes लाइब्रेरी स्ट्रिंग को अंदरूनी तौर पर जियोकोड करती है, ताकि उसे अक्षांश और देशांतर के निर्देशांकों में बदला जा सके.

इस स्निपेट में, origin और destination के लिए पता स्ट्रिंग के साथ ComputeRoutesRequest बनाने का तरीका दिखाया गया है:

TypeScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
  origin: '1600 Amphitheatre Parkway, Mountain View, CA',
  destination: '345 Spear Street, San Francisco, CA',
  fields: ['path'],
};

JavaScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};

पते के लिए क्षेत्र सेट करना

अगर आपने किसी वेपॉइंट की जगह के तौर पर, पते की अधूरी स्ट्रिंग पास की है, तो हो सकता है कि एपीआई, जियोकोड किए गए अक्षांश/देशांतर के गलत निर्देशांकों का इस्तेमाल करे. उदाहरण के लिए, ड्राइविंग के रूट के लिए, ऑरिजिन के तौर पर "टॉलेडो" और डेस्टिनेशन के तौर पर "मैड्रिड" सेट करने का अनुरोध किया जाता है:

// Define a request with an incomplete address string.
const request = {
  origin: 'Toledo',
  destination: 'Madrid',
};
    

इस उदाहरण में, "टॉलेडो" को स्पेन में मौजूद शहर के बजाय, अमेरिका के ओहियो राज्य में मौजूद शहर के तौर पर समझा गया है. इसलिए, अनुरोध एक खाली कलेक्शन दिखाता है. इसका मतलब है कि कोई रास्ता मौजूद नहीं है.

regionCode पैरामीटर को शामिल करके, एपीआई को किसी खास इलाके के हिसाब से नतीजे दिखाने के लिए कॉन्फ़िगर किया जा सकता है. यह पैरामीटर, क्षेत्र के कोड को ccTLD ("टॉप-लेवल डोमेन") के तौर पर दिखाता है. यह दो वर्णों वाली वैल्यू होती है. ज़्यादातर ccTLD कोड, ISO 3166-1 कोड के जैसे ही होते हैं. हालांकि, कुछ मामलों में ये अलग होते हैं. उदाहरण के लिए, यूनाइटेड किंगडम का ccTLD "uk" (.co.uk) है, जबकि इसका ISO 3166-1 कोड "gb" है. तकनीकी तौर पर, यह "ग्रेट ब्रिटेन और उत्तरी आयरलैंड का यूनाइटेड किंगडम" के लिए है.

"टोलेडो" से "मैड्रिड" तक के रास्ते के लिए किए गए अनुरोध में regionCode पैरामीटर शामिल करने पर, सही नतीजे मिलते हैं. ऐसा इसलिए, क्योंकि "टोलेडो" को स्पेन का एक शहर माना जाता है:

const request = {
  origin: 'Toledo',
  destination: 'Madrid',
  region: 'es', // Specify the region code for Spain.
};
    

प्लस कोड

कई लोगों के पास सटीक पता नहीं होता. इस वजह से, उन्हें डिलीवरी पाने में मुश्किल हो सकती है. इसके अलावा, जिन लोगों के पास पता है वे डिलीवरी को ज़्यादा सटीक जगहों पर स्वीकार करना पसंद कर सकते हैं. जैसे, पीछे का दरवाज़ा या लोडिंग डॉक.

प्लस कोड, उन लोगों या जगहों के लिए मोहल्ले के पते की तरह होते हैं जिनके पास कोई पता नहीं होता. सड़क के नाम और नंबर वाले पतों के बजाय, Plus Code अक्षांश/देशांतर निर्देशांकों पर आधारित होते हैं. इन्हें संख्याओं और अक्षरों के तौर पर दिखाया जाता है.

Google ने Plus Code डेवलप किए हैं, ताकि हर व्यक्ति और हर जगह को पते का फ़ायदा मिल सके. प्लस कोड, जगह के रेफ़रंस का एक कोड होता है. यह अक्षांश/देशांतर के कोऑर्डिनेट से मिलता है. यह किसी जगह को दिखाता है. जैसे, 1/8000 डिग्री गुणा 1/8000 डिग्री (भूमध्य रेखा पर करीब 14 मीटर x 14 मीटर) या इससे छोटा. Plus Codes का इस्तेमाल, उन जगहों पर मोहल्ले के पते की जगह किया जा सकता है जहां वे मौजूद नहीं हैं. इसके अलावा, इनका इस्तेमाल उन जगहों पर भी किया जा सकता है जहां इमारतों के नंबर नहीं दिए गए हैं या सड़कों के नाम नहीं रखे गए हैं.

Plus Code को ग्लोबल कोड या कंपाउंड कोड के तौर पर फ़ॉर्मैट किया जाना चाहिए:

  • ग्लोबल कोड में चार वर्णों का एरिया कोड और छह या उससे ज़्यादा वर्णों का लोकल कोड होता है. उदाहरण के लिए, "1600 Amphitheatre Parkway, Mountain View, CA" पते के लिए, ग्लोबल कोड "849V" है और लोकल कोड "CWC8+R9" है. इसके बाद, जगह की वैल्यू को "849VCWC8+R9" के तौर पर सेट करने के लिए, पूरे 10 वर्णों वाले Plus Code का इस्तेमाल करें.
  • कंपाउंड कोड में छह या इससे ज़्यादा वर्णों वाला लोकल कोड होता है. इसमें साफ़ तौर पर जगह की जानकारी भी दी जाती है. उदाहरण के लिए, "450 Serra Mall, Stanford, CA 94305, USA" का स्थानीय कोड "CRHJ+C3" है. अगर पता लंबा है, तो पते के स्थानीय कोड को शहर, राज्य, पिन कोड, और देश के हिस्से के साथ "CRHJ+C3 स्टैनफ़र्ड, कैलिफ़ोर्निया 94305, अमेरिका" के तौर पर जोड़ें.

यहां दिए गए स्निपेट में, Plus Code का इस्तेमाल करके, रास्ते की शुरुआती जगह और मंज़िल के लिए वेपॉइंट तय करके, रास्ते का हिसाब लगाने का तरीका दिखाया गया है:

TypeScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes = {
  origin: '849VCWC8+R9', // Mountain View, CA
  destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
  fields: ['path'],
};

JavaScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};