रास्ता, यात्रा शुरू करने की जगह या शुरुआत की जगह और यात्रा खत्म करने की जगह या मंज़िल के बीच का नेविगेट किया जा सकने वाला पाथ होता है. यात्रा के अलग-अलग साधनों के लिए रास्ता चुना जा सकता है. जैसे, पैदल, साइकल या अलग-अलग तरह के वाहन. रास्ते की जानकारी का भी अनुरोध किया जा सकता है. जैसे, दूरी, रास्ते पर नेविगेट करने में लगने वाला अनुमानित समय, टोल की संभावित संख्या, और रास्ते पर नेविगेट करने के लिए सिलसिलेवार निर्देश.
उदाहरण के तौर पर दिया गया पूरा सोर्स कोड देखें
यहां दिए गए कोड सैंपल में, दो जगहों के बीच ड्राइविंग के लिए रास्ते के निर्देश पाने का तरीका बताया गया है.
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();
सीएसएस
/* * 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>
<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() को कॉल करने का तरीका बताया गया है.
computeRoutes(), Route क्लास का स्टैटिक मेथड है. इसलिए, Route.computeRoutes(request) को सीधे कॉल करें. अनुरोध में, fields प्रॉपर्टी को रिस्पॉन्स फ़ील्ड मास्क पर भी सेट करना होगा.
// 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', fields: ['path'], // Required: response field mask. }; // Call the computeRoutes() method to get routes. const {routes} = await Route.computeRoutes(request);
मैप पर रूट ड्रॉ करने के लिए, path फ़ील्ड के साथ अनुरोध किए गए रूट पर createPolylines() को कॉल करें. मैप पर पॉलीलाइन दिखाना देखें.
नतीजों में दिखाने के लिए फ़ील्ड चुनना
किसी रास्ते का अनुरोध करते समय, आपको फ़ील्ड मास्क का इस्तेमाल करके यह बताना होगा कि जवाब में कौनसी जानकारी दिखनी चाहिए. फ़ील्ड मास्क में, रूट क्लास की प्रॉपर्टी के नाम तय किए जा सकते हैं.
फ़ील्ड मास्क का इस्तेमाल करने से यह भी पक्का होता है कि आप ग़ैर-ज़रूरी डेटा का अनुरोध न करें. इससे जवाब मिलने में लगने वाले समय को कम करने में मदद मिलती है. साथ ही, ऐसी जानकारी नहीं मिलती जिसकी आपके सिस्टम को ज़रूरत नहीं है.
आपको जिन फ़ील्ड की ज़रूरत है उनकी सूची तय करने के लिए, 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 में, इनमें से किसी भी तरीके से जगह की जानकारी दी जा सकती है:
- जगह (पसंदीदा)
- अक्षांश/देशांतर के कोऑर्डिनेट
- पते की स्ट्रिंग ("Chicago, IL" या "Darwin, NT, Australia")
- Plus Code
अनुरोध में सभी वेपॉइंट के लिए जगहों की जानकारी, एक ही तरीके से दी जा सकती है या उन्हें मिलाया जा सकता है. उदाहरण के लिए, शुरुआती वेपॉइंट के लिए अक्षांश/देशांतर निर्देशांकों का इस्तेमाल किया जा सकता है. साथ ही, मंज़िल वाले वेपॉइंट के लिए, 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: 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 इंस्टेंस बनाएं. यहां दिए गए स्निपेट में, origin और destination के लिए नए google.maps.LatLngLiteral इंस्टेंस बनाने और फिर उन्हें 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 लाइब्रेरी स्ट्रिंग को जियोकोड करके, उसे अक्षांश और देशांतर के निर्देशांकों में बदल देती है.
नीचे दिए गए स्निपेट में, 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) है, जबकि इसका आईएसओ 3166-1 कोड "gb" है. तकनीकी तौर पर, यह कोड "यूनाइटेड किंगडम ऑफ़ ग्रेट ब्रिटेन ऐंड नॉर्दर्न आयरलैंड" के लिए है.
"Toledo" से "Madrid" तक के रास्ते की जानकारी पाने के अनुरोध में, regionCode पैरामीटर शामिल करने पर सही नतीजे मिलते हैं. ऐसा इसलिए होता है, क्योंकि "Toledo" को स्पेन के एक शहर के तौर पर समझा जाता है:
const request = { origin: 'Toledo', destination: 'Madrid', region: 'es', // Specify the region code for Spain. };
Plus Code
कई लोगों के पास सटीक पता नहीं होता. इस वजह से, उन्हें डिलीवरी मिलने में परेशानी हो सकती है. इसके अलावा, जिन लोगों के पास पता है वे डिलीवरी के लिए ज़्यादा सटीक जगहों को चुन सकते हैं. जैसे, पीछे का दरवाज़ा या लोडिंग डॉक.
Plus Codes, उन लोगों या जगहों के लिए मोहल्ले के पते की तरह होते हैं जिनका कोई असल पता नहीं होता. Plus Code, सड़क के नाम और नंबर वाले पतों के बजाय, अक्षांश/देशांतर के निर्देशांकों पर आधारित होते हैं. इन्हें संख्याओं और अक्षरों के तौर पर दिखाया जाता है.
Google ने Plus Codes बनाए हैं, ताकि हर व्यक्ति और जगह को एक पता मिल सके. 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 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'], };