Maps की डेमो कुंजी पाएं: Maps की डेमो कुंजी की मदद से, Maps JavaScript API और जगहों की जानकारी देने वाली यूआई किट की चुनिंदा सुविधाएं बिना किसी शुल्क के आज़माएं. इसके लिए, बिलिंग की जानकारी देने की ज़रूरत नहीं है.

Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

रास्ता मैट्रिक्स पाएं

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

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

उदाहरण के तौर पर दिया गया पूरा सोर्स कोड देखें

इस उदाहरण में, Route Matrix क्लास का इस्तेमाल करके, शुरुआत की कई जगहों से अलग-अलग मंज़िलों तक की यात्रा में लगने वाले समय और दूरी का हिसाब लगाने का तरीका बताया गया है.

TypeScript

// Initialize and add the map.
let map: google.maps.Map;
const markers: google.maps.marker.AdvancedMarkerElement[] = [];
const center = { lat: 51.55, lng: -1.8 };

async function init(): Promise<void> {
    //  Request the needed libraries.
    const [
        { Map },
        { Place },
        { AdvancedMarkerElement, PinElement },
        { RouteMatrix },
        { LatLngBounds, UnitSystem },
    ] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('core'),
    ]);

    const bounds = new LatLngBounds();

    map = new Map(document.getElementById('map')!, {
        zoom: 8,
        center,
        mapId: 'DEMO_MAP_ID',
    });

    // Build the request using Place instances.
    const origin1 = new Place({
        id: 'ChIJ83WZp86p2EcRbMrkYqGncBQ', // Greenwich, London, UK
    });
    const origin2 = new Place({
        id: 'ChIJCSkVvleJc0gR8HHaTGpajKc', // Southampton, UK
    });
    const destinationA = new Place({
        id: 'ChIJYdizgWaDcUgRH9eaSy6y5I4', // Bristol, UK
    });
    const destinationB = new Place({
        id: 'ChIJ9VPsNNQCbkgRDmeGZdsGNBQ', // Cardiff, UK
    });

    await Promise.all([
        origin1.fetchFields({ fields: ['location', 'displayName'] }),
        origin2.fetchFields({ fields: ['location', 'displayName'] }),
        destinationA.fetchFields({ fields: ['location', 'displayName'] }),
        destinationB.fetchFields({ fields: ['location', 'displayName'] }),
    ]);

    const destinations = [destinationA, destinationB];
    const origins = [origin1, origin2];
    const request: google.maps.routes.ComputeRouteMatrixRequest = {
        origins,
        destinations,
        travelMode: 'DRIVING',
        units: UnitSystem.METRIC,
        fields: ['distanceMeters', 'durationMillis', 'condition'],
    };

    // Show the request.
    document.getElementById('request')!.innerText = JSON.stringify(
        request,
        null,
        2
    );

    // Get the RouteMatrix response.
    const response = await RouteMatrix.computeRouteMatrix(request);

    // Show the response.
    document.getElementById('response')!.innerText = JSON.stringify(
        response,
        null,
        2
    );

    // Add markers for the origins.
    for (const origin of origins) {
        if (origin.location) {
            const pin = new PinElement({
                glyphText: 'O',
                glyphColor: 'white',
                background: '#137333',
                borderColor: 'white',
            });
            const marker = new AdvancedMarkerElement({
                map,
                position: origin.location,
                title: `Origin: ${origin.displayName}`,
            });
            marker.append(pin);
            markers.push(marker);
            bounds.extend(origin.location);
        }
    }

    // Add markers for the destinations.
    for (const destination of destinations) {
        if (destination.location) {
            const pin = new PinElement({
                glyphText: 'D',
                glyphColor: 'white',
                background: '#C5221F',
                borderColor: 'white',
            });

            const marker = new AdvancedMarkerElement({
                map,
                position: destination.location,
                content: pin,
                title: `Destination: ${destination.displayName ?? 'Unknown'}`,
            });

            markers.push(marker);
            bounds.extend(destination.location);
        }
    }

    // Fit the map to the bounds of all markers.
    map.fitBounds(bounds);
}

void init();index.ts

JavaScript

// Initialize and add the map.
let map;
const markers = [];
const center = { lat: 51.55, lng: -1.8 };

async function init() {
    //  Request the needed libraries.
    const [
        { Map },
        { Place },
        { AdvancedMarkerElement, PinElement },
        { RouteMatrix },
        { LatLngBounds, UnitSystem },
    ] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('core'),
    ]);

    const bounds = new LatLngBounds();

    map = new Map(document.getElementById('map'), {
        zoom: 8,
        center,
        mapId: 'DEMO_MAP_ID',
    });

    // Build the request using Place instances.
    const origin1 = new Place({
        id: 'ChIJ83WZp86p2EcRbMrkYqGncBQ', // Greenwich, London, UK
    });
    const origin2 = new Place({
        id: 'ChIJCSkVvleJc0gR8HHaTGpajKc', // Southampton, UK
    });
    const destinationA = new Place({
        id: 'ChIJYdizgWaDcUgRH9eaSy6y5I4', // Bristol, UK
    });
    const destinationB = new Place({
        id: 'ChIJ9VPsNNQCbkgRDmeGZdsGNBQ', // Cardiff, UK
    });

    await Promise.all([
        origin1.fetchFields({ fields: ['location', 'displayName'] }),
        origin2.fetchFields({ fields: ['location', 'displayName'] }),
        destinationA.fetchFields({ fields: ['location', 'displayName'] }),
        destinationB.fetchFields({ fields: ['location', 'displayName'] }),
    ]);

    const destinations = [destinationA, destinationB];
    const origins = [origin1, origin2];
    const request = {
        origins,
        destinations,
        travelMode: 'DRIVING',
        units: UnitSystem.METRIC,
        fields: ['distanceMeters', 'durationMillis', 'condition'],
    };

    // Show the request.
    document.getElementById('request').innerText = JSON.stringify(
        request,
        null,
        2
    );

    // Get the RouteMatrix response.
    const response = await RouteMatrix.computeRouteMatrix(request);

    // Show the response.
    document.getElementById('response').innerText = JSON.stringify(
        response,
        null,
        2
    );

    // Add markers for the origins.
    for (const origin of origins) {
        if (origin.location) {
            const pin = new PinElement({
                glyphText: 'O',
                glyphColor: 'white',
                background: '#137333',
                borderColor: 'white',
            });
            const marker = new AdvancedMarkerElement({
                map,
                position: origin.location,
                title: `Origin: ${origin.displayName}`,
            });
            marker.append(pin);
            markers.push(marker);
            bounds.extend(origin.location);
        }
    }

    // Add markers for the destinations.
    for (const destination of destinations) {
        if (destination.location) {
            const pin = new PinElement({
                glyphText: 'D',
                glyphColor: 'white',
                background: '#C5221F',
                borderColor: 'white',
            });

            const marker = new AdvancedMarkerElement({
                map,
                position: destination.location,
                content: pin,
                title: `Destination: ${destination.displayName ?? 'Unknown'}`,
            });

            markers.push(marker);
            bounds.extend(destination.location);
        }
    }

    // Fit the map to the bounds of all markers.
    map.fitBounds(bounds);
}

void init();index.js

सीएसएस

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
/* Optional: Makes the sample page fill the window. */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    height: 100%;
    display: flex;
}

#sidebar {
    flex-basis: 15rem;
    flex-grow: 1;
    padding: 1rem;
    max-width: 30rem;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
}

#map {
    flex-basis: 0;
    flex-grow: 4;
    height: 100%;
}

#sidebar {
    flex-direction: column;
}style.css

एचटीएमएल

<html>
    <head>
        <title>Route matrix</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="container">
            <div id="map"></div>
            <div id="sidebar">
                <h3 style="flex-grow: 0">Request</h3>
                <pre style="flex-grow: 1" id="request"></pre>
                <h3 style="flex-grow: 0">Response</h3>
                <pre style="flex-grow: 1" id="response"></pre>
            </div>
        </div>
    </body>
</html>index.html

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

JSFiddle.net

अनुरोध करने की सीमाएं

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

आइटम की संख्या 625 से ज़्यादा नहीं हो सकती. यह संख्या उन रास्तों के लिए है जो TRANSIT रास्ते नहीं हैं.
अगर आपने TRANSIT रूट तय किया है, तो आइटम की संख्या 100 से ज़्यादा नहीं हो सकती.
अगर आपने TRAFFIC_AWARE_OPTIMAL की वैल्यू दी है, तो आइटम की संख्या 100 से ज़्यादा नहीं हो सकती.
अगर पतों या Place इंस्टेंस का इस्तेमाल करके, शुरुआत या मंज़िल की जगहों की जानकारी दी जाती है, तो इस तरह से कुल 50 जगहों की जानकारी दी जा सकती है.

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

रूट मैट्रिक्स के अनुरोध का उदाहरण

यहां दिए गए उदाहरण में, ComputeRouteMatrixRequest को दिखाया गया है. इस उदाहरण में, ये काम किए जाते हैं:

इसमें दो शुरुआती और दो मंज़िल वाले वेपॉइंट का कलेक्शन दिखाया गया है. यह तरीका, हर ऑरिजिन से हर डेस्टिनेशन तक के रास्ते का हिसाब लगाता है. इसलिए, जवाब में चार रास्ते शामिल होते हैं.
अरे में, पहला एलिमेंट इंडेक्स 0 पर होता है, दूसरा इंडेक्स 1 पर होता है, और इसी तरह आगे भी.
इससे पता चलता है कि कौनसे फ़ील्ड दिखाने हैं. इस उदाहरण में, अनुरोध को इस तरह कॉन्फ़िगर किया गया है कि हर रास्ते के लिए, durationMillis, distanceMeters, और condition की जानकारी मिले.

TypeScript

const destinations = [destinationA, destinationB];
const origins = [origin1, origin2];
const request: google.maps.routes.ComputeRouteMatrixRequest = {
    origins,
    destinations,
    travelMode: 'DRIVING',
    units: UnitSystem.METRIC,
    fields: ['distanceMeters', 'durationMillis', 'condition'],
};index.ts

JavaScript

const destinations = [destinationA, destinationB];
const origins = [origin1, origin2];
const request = {
    origins,
    destinations,
    travelMode: 'DRIVING',
    units: UnitSystem.METRIC,
    fields: ['distanceMeters', 'durationMillis', 'condition'],
};index.js

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

"matrix": {
  "rows": [
    {
      "items": [
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 202587,
          "durationMillis": 10040000
        },
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 252734,
          "durationMillis": 12240000
        }
      ]
    },
    {
      "items": [
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 166135,
          "durationMillis": 6596000
        },
        {
          "condition": "ROUTE_EXISTS",
          "distanceMeters": 216282,
          "durationMillis": 8797000
        }
      ]
    }
  ]
}

नतीजे में हर रास्ते की पहचान करने के लिए, ऑरिजिन और डेस्टिनेशन इंडेक्स का इस्तेमाल करें. इससे आपको 2D कलेक्शन में, उससे जुड़ा RouteMatrixItem ढूंढने में मदद मिलेगी. उदाहरण के लिए, अनुरोध में इंडेक्स 1 पर मौजूद शुरुआत की जगह और मंज़िल 0 से कैलकुलेट किए गए रास्ते के बारे में बताने वाला RouteMatrixItem, RouteMatrix.rows कलेक्शन के दूसरे एलिमेंट और RouteMatrixRow.items कलेक्शन के पहले एलिमेंट में होगा.

यहां दिए गए कोड स्निपेट से, किसी खास शुरुआती जगह और मंज़िल के लिए रास्ता ढूंढने के लिए, RouteMatrixItem की पहचान करने का तरीका पता चलता है:

// Find the route for origin 'x' and destination 'y'.
const {matrix} = await RouteMatrix.computeRouteMatrix(request);
const myRouteMatrixItem = matrix.rows[x].items[y];

नतीजों में दिखाने के लिए फ़ील्ड चुनना

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

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

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

fields: ['durationMillis', 'distanceMeters', 'condition'],

तय करें कि किन फ़ील्ड मास्क का इस्तेमाल करना है

यहां बताया गया है कि आपको कौनसे फ़ील्ड इस्तेमाल करने हैं और उनके लिए फ़ील्ड मास्क कैसे बनाने हैं:

['*'] के फ़ील्ड मास्क का इस्तेमाल करके, सभी फ़ील्ड का अनुरोध करें.
चेतावनी: डेवलपमेंट के दौरान, इस वाइल्डकार्ड फ़ील्ड मास्क का इस्तेमाल करके यह तय किया जा सकता है कि आपको किन फ़ील्ड की ज़रूरत है. हालांकि, प्रोडक्शन में इसका इस्तेमाल न करें. प्रोडक्शन में सभी फ़ील्ड का अनुरोध करने पर, ज़्यादा खर्च आता है और जवाब मिलने में ज़्यादा समय लगता है. ज़्यादा ऐडवांस सुविधाएं जोड़ने पर, आपकी लागत भी अचानक बढ़ सकती है. ऐसा इसलिए, क्योंकि यह फ़ील्ड मास्क उन्हें अपने-आप शामिल कर लेगा. इसके बजाय, सिर्फ़ उन फ़ील्ड का अनुरोध करें जिनकी आपको ज़रूरत है. इससे आपकी लागत कम होगी और अनुरोध के जवाब में लगने वाला समय भी कम होगा.
फ़ील्ड की हैरारकी देखें. इसके लिए, RouteMatrixItem क्लास में जाकर वे फ़ील्ड देखें जिनकी आपको ज़रूरत है.
अपने फ़ील्ड मास्क बनाएं. इसके लिए, पिछले चरण में दिखाए गए फ़ील्ड की हैरारकी का इस्तेमाल करें. साथ ही, इस फ़ॉर्मैट का इस्तेमाल करें:
```
topLevelField[.secondLevelField][.thirdLevelField][...]
```

उदाहरण के लिए, इस RouteMatrixItem के लिए:

  "travelAdvisory": {
    "fuelConsumptionMicroliters": 0,
    "tollInfo": {
      "estimatedPrices": [
        {
          "currencyCode": "USD",
          "units": 4,
          "nanos": 400000000
        }
      ]
    }
  },

अगर आपको RouteMatrixItem के लिए सिर्फ़ tollInfo फ़ील्ड दिखाना है, तो आपका फ़ील्ड मास्क इस तरह होगा:

fields: ['travelAdvisory.tollInfo']

अगर आपको ईंधन की खपत का अनुमान लगाने का अनुरोध करना है, तो आपका फ़ील्ड मास्क इस तरह होगा:

fields: ['travelAdvisory.fuelConsumptionMicroliters']

अगर आपको दोनों का अनुरोध करना है, तो आपका फ़ील्ड मास्क इस तरह होगा:

fields: ['travelAdvisory.fuelConsumptionMicroliters', 'travelAdvisory.tollInfo']

अगर आपको यात्रा से जुड़ी सलाह का पूरा सेट चाहिए, तो आपका फ़ील्ड मास्क इस तरह होगा:

fields: ['travelAdvisory']

प्रॉपर्टी की हैरारकी सिर्फ़ RouteMatrix.computeRouteMatrix के लिए उपलब्ध है. यह Route.computeRoutes के लिए उपलब्ध नहीं है.

बस, मेट्रो वगैरह के रूट मैट्रिक्स का अनुरोध करना

सार्वजनिक परिवहन के लिए रूट मैट्रिक्स पाएं. इसमें इलाके में उपलब्ध बस, मेट्रो वगैरह के विकल्पों का इस्तेमाल किया जाता है. बस, मेट्रो, और ट्रेन के अलावा, अन्य सार्वजनिक परिवहन के विकल्प भी शामिल हो सकते हैं. बस, मेट्रो वगैरह के रूट मैट्रिक्स का अनुरोध करने के लिए:

travelMode को TRANSIT पर सेट करें
travelAdvisory फ़ील्ड का अनुरोध करें.

बस, मेट्रो वगैरह के रास्तों के बारे में ज़्यादा जानें.