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

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

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

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

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

TypeScript

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

// Initialize and add the map.
async function init(): Promise<void> {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('routes'),
    ]);

    map = new Map(document.getElementById('map')!, {
        zoom: 12,
        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'],
    };
    console.log({ requestWithAddressStrings });

    // 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: google.maps.routes.ComputeRoutesRequest = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };
    console.log({ requestWithPlaceIds });

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

    // Define a computeRoutes request.
    const requestWithLatLngs: google.maps.routes.ComputeRoutesRequest = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };
    console.log({ requestWithLatLngs });

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

    // Define a routes request.
    const request: google.maps.routes.ComputeRoutesRequest = {
        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 } = await Route.computeRoutes(request);

    // Use createPolylines to create polylines for the route.
    if (!routes) {
        console.warn('No routes found.');
        return;
    }
    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.map = 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.
    void fitMapToPath(routes[0].path!);
}

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

void init();

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 init() {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('routes'),
    ]);

    map = new Map(document.getElementById('map'), {
        zoom: 12,
        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'],
    };
    console.log({ requestWithAddressStrings });

    // 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.
    };
    console.log({ requestWithPlaceIds });

    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, 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'],
    };
    console.log({ requestWithLatLngs });

    // 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'],
    };
    console.log({ requestWithPlusCodes });

    // 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 } = await Route.computeRoutes(request);

    // Use createPolylines to create polylines for the route.
    if (!routes) {
        console.warn('No routes found.');
        return;
    }
    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.map = 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.
    void 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);
}

void init();

CSS

/*
 * 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

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </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);
    

लौटाने के लिए फ़ील्ड चुनना

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

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

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

TypeScript

// Define a routes request.
const request: google.maps.routes.ComputeRoutesRequest = {
    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 में, किसी जगह को इनमें से किसी भी तरीके से तय किया जा सकता है:

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

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

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

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

किसी जगह को Place के तौर पर तय करने के लिए, Place का नया इंस्टेंस बनाएं. यहां दिए गए स्निपेट में, Place के नए इंस्टेंस बनाने और फिर origin और destination में उनका इस्तेमाल करने का तरीका बताया गया है: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: google.maps.routes.ComputeRoutesRequest = {
    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 का नया इंस्टेंस बनाएं. यहां दिए गए स्निपेट में, google.maps.LatLngLiteral के नए इंस्टेंस बनाने और origin और destination के लिए, और फिर computeRoutesRequest में उनका इस्तेमाल करने का तरीका बताया गया है:

TypeScript

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

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

JavaScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, 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 लाइब्रेरी स्ट्रिंग को अक्षांश और देशांतर के कोऑर्डिनेट में बदलने के लिए, उसे अंदरूनी तौर पर जियोकोड करती है.

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

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'],
};

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

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

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

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

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

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

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

Plus Code

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

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

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

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 Stanford, CA 94305, USA" फ़ॉर्म में जोड़ें.

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

TypeScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes: google.maps.routes.ComputeRoutesRequest = {
    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'],
};