Place Autocomplete और Routes API की मदद से रूट प्लानर बनाना

1. खास जानकारी

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

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

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

आपको क्या बनाना है

इस कोडलैब में, एचटीएमएल, सीएसएस, JavaScript, और Node.js बैकएंड का इस्तेमाल करके वेब ऐप्लिकेशन बनाने का तरीका बताया जाएगा.

रास्ते की प्लानिंग करने वाले वेब ऐप्लिकेशन का आर्किटेक्चर

रास्ते की प्लानिंग करने वाला वेब ऐप्लिकेशन

आपको क्या सीखने को मिलेगा

  • Google Maps Platform API चालू करने का तरीका
  • किसी वेब ऐप्लिकेशन में डाइनैमिक मैप को इंटिग्रेट करने का तरीका
  • Places Autocomplete सेवा को इंटिग्रेट करने का तरीका
  • Routes API के ज़रिए किसी रास्ते का अनुरोध करने का तरीका
  • डाइनैमिक मैप पर रास्ता दिखाने का तरीका
  • मैप आईडी बनाने का तरीका
  • डाइनैमिक मैप में ऐडवांस मार्कर जोड़ने का तरीका

आपको किन चीज़ों की ज़रूरत होगी

नमूना कोड

पूरा समाधान और सिलसिलेवार कोड GitHub पर उपलब्ध है. कोड में ज़रूरी नोड पैकेज शामिल नहीं हैं. कोड चलाने से पहले, ज़रूरी डिपेंडेंसी इंस्टॉल करें. ज़रूरी पैकेज की जानकारी, package.json फ़ाइल में मिल सकती है. इसके बारे में तीसरे चरण में बताया गया है.

2. प्रोजेक्ट सेट अप करना और एपीआई चालू करना

चालू करने के लिए, आपको Maps JavaScript API, Place Autocomplete, और Routes API को चालू करना होगा.

Google Maps Platform सेट अप करना

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

  1. Cloud Console में, प्रोजेक्ट वाले ड्रॉप-डाउन मेन्यू पर क्लिक करें. इसके बाद, उस प्रोजेक्ट को चुनें जिसे इस कोडलैब के लिए इस्तेमाल करना है. प्रोजेक्ट चुनें
  2. इस कोडलैब के लिए ज़रूरी Google Maps Platform API को Maps API लाइब्रेरी पेज में जाकर चालू करें. ऐसा करने के लिए, इस वीडियो या इस दस्तावेज़ में बताया गया तरीका अपनाएं.
  3. Cloud Console के क्रेडेंशियल पेज पर जाकर, एक एपीआई पासकोड जनरेट करें. ऐसा करने के लिए, इस वीडियो या इस दस्तावेज़ में बताया गया तरीका अपनाएं. Google Maps Platform का इस्तेमाल करने के लिए, एपीआई पासकोड ज़रूरी है.

3. Node.js प्रोजेक्ट सेट अप करना

इस लैब में, हम वेब से ओरिजन और डेस्टिनेशन की जानकारी इकट्ठा करने के लिए Node.js का इस्तेमाल करेंगे. साथ ही, Routes API के ज़रिए रास्ते का अनुरोध करेंगे.

मान लें कि आपने पहले से ही Node.js इंस्टॉल कर लिया है. अब एक ऐसी डायरेक्ट्री बनाएं जिसका इस्तेमाल इस प्रोजेक्ट को चलाने के लिए किया जाएगा:

$ mkdir ac_routes
$ cd ac_routes

अपने ऐप्लिकेशन की डायरेक्ट्री में नया Node.js पैकेज शुरू करें:

$ npm init

इस कमांड से, आपको कई चीज़ों के बारे में जानकारी मिलती है. जैसे, आपके ऐप्लिकेशन का नाम और वर्शन. फ़िलहाल, इनमें से ज़्यादातर के लिए डिफ़ॉल्ट वैल्यू स्वीकार करने के लिए, RETURN दबाएं. डिफ़ॉल्ट एंट्री पॉइंट index.js होता है. इसे अपनी मुख्य फ़ाइल में बदला जा सकता है. इस लैब में, मुख्य फ़ाइल function/server.js है. इसके बारे में ज़्यादा जानकारी चरण 6 में दी गई है.

इसके अलावा, अपनी पसंद के फ़्रेमवर्क और मॉड्यूल इंस्टॉल करें. यह लैब, वेब फ़्रेमवर्क(Express) और बॉडी पार्सर(body-parser) का इस्तेमाल करता है. ज़्यादा जानकारी के लिए, package.json फ़ाइल देखें.

4. डाइनैमिक मैप बनाना

अब हमारे पास Node.js बैकएंड है. इसलिए, आइए क्लाइंट साइड के लिए ज़रूरी चरणों के बारे में जानें.

  • ऐप्लिकेशन के लिए एचटीएमएल पेज बनाना
  • स्टाइलिंग के लिए सीएसएस फ़ाइल बनाना
  • Google Maps JavaScript API को एचटीएमएल पेज में लोड करना
  • अपने ऐप्लिकेशन की पुष्टि करने के लिए, स्क्रिप्ट टैग में अपना एपीआई पासकोड चिपकाएं
  • ऐप्लिकेशन के फ़ंक्शन को मैनेज करने के लिए, JavaScript फ़ाइल बनाना

एचटीएमएल पेज बनाना

  1. अपने प्रोजेक्ट फ़ोल्डर(इस मामले में ac_routes) में एक नई डायरेक्ट्री बनाएं
     $ mkdir public
 $ cd public
  2. पब्लिक डायरेक्ट्री में index.html बनाएं
  3. नीचे दिए गए कोड को index.html में कॉपी करें
     <!DOCTYPE html>
 <html>
 <head>
   <title>GMP Autocomplete + Routes</title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
   <div class="container">
     <!-- Start of the container for map -->
     <div class="main">
       <div id="map"></div>
     </div>
     <!-- End of the container for map -->
   </div>
   </body>
 </html>

सीएसएस फ़ाइल बनाना

  1. public डायरेक्ट्री में style.css फ़ाइल बनाएं
  2. नीचे दिए गए कोड को style.css में कॉपी करें:
     html, body {height: 100%;}
 body {
   background: #fff;
   font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size:16px;
   line-height: 1.5;
   margin: 0;
   padding: 0;
 }
 .container {display:flex; width:90%; padding:100px 0; margin:0 auto;}
 .main {width:70%; height:800px;}
  #map {height:100%; border-radius:20px;}

Maps JavaScript API लोड करना

इस लैब में, Maps JavaScript API को लोड करने के लिए, डाइनैमिक लाइब्रेरी इंपोर्ट का इस्तेमाल किया जाएगा. ज़्यादा जानकारी के लिए यहां जाएं.

index.html में, क्लोज़िंग बॉडी टैग से पहले यह कोड कॉपी करें. "YOUR_API_KEY" को अपने एपीआई पासकोड से बदलें.

<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: "YOUR_API_KEY", v: "weekly"});</script>

JavaScript फ़ाइल बनाना

  1. सार्वजनिक डायरेक्ट्री में, app.js बनाएं
  2. नीचे दिए गए कोड को app.js में कॉपी करें
     (function(){
   let map;

   async function initMap() {
       const { Map } = await google.maps.importLibrary('maps');
       map = new Map(document.getElementById('map'), {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           mapId: 'DEMO_MAP_ID'
       });
   }

   initMap();
 }());

DEMO_MAP_ID एक ऐसा आईडी है जिसका इस्तेमाल उन कोड सैंपल के लिए किया जा सकता है जिनके लिए Maps ID की ज़रूरत होती है. इस आईडी का इस्तेमाल प्रोडक्शन ऐप्लिकेशन में नहीं किया जा सकता. साथ ही, इसका इस्तेमाल उन सुविधाओं के लिए भी नहीं किया जा सकता जिनके लिए क्लाउड स्टाइलिंग की ज़रूरत होती है. इस लैब में, हमें बाद के चरण में ऐडवांस मार्कर के लिए मैप आईडी की ज़रूरत होगी. अपने ऐप्लिकेशन के लिए मैप आईडी बनाने के बारे में ज़्यादा जानें.

index.html में, app.js को क्लोज़िंग बॉडी टैग से पहले और Maps JavaScript API को लोड करने वाले स्क्रिप्ट टैग के बाद लिंक करें.

<script type="text/JavaScript" src="app.js"></script>

पूरा सैंपल कोड

यहां तक का पूरा कोड, GitHub:step1_createDynamicMap पर उपलब्ध है

5. यात्रा शुरू करने की जगह और मंज़िल के पते डालना

  • ऑरिजिन और डेस्टिनेशन के इनपुट के लिए, index.html में दो टेक्स्ट फ़ील्ड जोड़ें
  • 'अपने-आप पूरा होने की सुविधा' लाइब्रेरी इंपोर्ट करना
  • ऑटोकंप्लीट सेवा को, मूल और गंतव्य टेक्स्ट फ़ील्ड से बाइंड करें

टेक्स्ट फ़ील्ड जोड़ना

index.html में, div के पहले चाइल्ड के तौर पर, container क्लास के साथ यह कोड जोड़ें.

<div class="aside">
  <div class="inputgroup">
    <label for="origin">Start</label>
    <input type="text" id="origin" name="origin" class="input-location" placeholder="Enter an address">
  </div>
  <div class="inputgroup">
    <label for="origin">End</label>
    <input type="text" id="destination" name="destination" class="input-location" placeholder="Enter an address">
  </div>
</div>

अपने-आप पूरा होने की सुविधा को इंपोर्ट और चालू करना

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

app.js में, मैप को शुरू करने के बाद यह कोड जोड़ें:

let placeIds = [];
async function initPlace() {
  const { Autocomplete } = await google.maps.importLibrary('places');
  let autocomplete = [];
  let locationFields = Array.from(document.getElementsByClassName('input-location'));
  //Enable autocomplete for input fields
  locationFields.forEach((elem,i) => {
      autocomplete[i] = new Autocomplete(elem);
      google.maps.event.addListener(autocomplete[i],"place_changed", () => {
          let place = autocomplete[i].getPlace();
          if(Object.keys(place).length > 0){
              if (place.place_id){
                  placeIds[i] = place.place_id; //We use Place Id in this example
              } else {
                  placeIds.splice(i,1); //If no place is selected or no place is found, remove the previous value from the placeIds.
                  window.alert(`No details available for input: ${place.name}`);
                  return;
              }
          }
      });
  });
}
initPlace();

जब कोई उपयोगकर्ता, अपने-आप पूरी होने वाली सूची में से किसी जगह को चुनता है, तब getPlace() तरीके का इस्तेमाल करके, जगह के नतीजे की जानकारी वापस पाई जा सकती है. जगह के नतीजे में, किसी जगह के बारे में कई तरह की जानकारी होती है. इस लैब में, हम चुनी गई जगह की पहचान करने के लिए place_id का इस्तेमाल करेंगे. जगह के आईडी, Google Places के डेटाबेस और Google Maps में किसी जगह की अलग पहचान के लिए इस्तेमाल होते हैं. जगह के आईडी के बारे में ज़्यादा जानें.

मिलती-जुलती स्टाइल जोड़ना

style.css में, यह कोड जोड़ें:

.aside {width:30%; padding:20px;}
.inputgroup {margin-bottom:30px;}
.aside label {display:block; padding:0 10px; margin-bottom:10px; font-size:18px; color:#666565;}
.aside input[type=text] {width:90%;padding:10px; font-size:16px; border:1px solid #e6e8e6; border-radius:10px;}

पूरा सैंपल कोड

इस पॉइंट तक का पूरा कोड, GitHub:step2_inputAddress पर उपलब्ध है

6. रास्ते की जानकारी का अनुरोध करना

  • रास्ते का अनुरोध करने के लिए, index.html में ‘रास्ता पाएं' बटन जोड़ें
  • यह बटन, Node.js सेवा को ऑरिजिन और डेस्टिनेशन का डेटा भेजने की प्रोसेस शुरू करता है
  • Node.js सेवा, Routes API को अनुरोध भेजती है
  • एपीआई से मिले जवाब को क्लाइंट साइड पर दिखाया जाता है

यात्रा शुरू करने की जगह और मंज़िल सेट करने के बाद, डाइनैमिक मैप तैयार हो जाता है. अब रास्ते की जानकारी पाने का समय है. Routes API, Directions और Distance Matrix सेवा का अगला जनरेशन है. यह परफ़ॉर्मेंस के हिसाब से ऑप्टिमाइज़ किया गया वर्शन है. इस लैब में, हम वेब से ओरिजन और डेस्टिनेशन की जानकारी इकट्ठा करने के लिए Node.js का इस्तेमाल करेंगे. साथ ही, Routes API के ज़रिए रास्ते का अनुरोध करेंगे.

index.html में, div के क्लोज़िंग टैग से पहले, aside क्लास वाला ‘रास्ता पाएं' बटन जोड़ें :

<div class="inputgroup">
  <button id="btn-getroute">Get a route</button>
</div>

style.css में, यह लाइन जोड़ें:

.aside button {padding:20px 30px; font-size:16px; border:none; border-radius:50px; background-color:#1a73e8; color:#fff;}

Node.js सेवा को ऑरिजिन और डेस्टिनेशन का डेटा भेजने के लिए, app.js में नीचे दिया गया कोड जोड़ें:

function requestRoute(){
  let btn = document.getElementById('btn-getroute');
  btn.addEventListener('click', () => {
    //In this example, we will extract the Place IDs from the Autocomplete response
    //and use the Place ID for origin and destination
    if(placeIds.length == 2){
        let reqBody = {
            "origin": {
                "placeId": placeIds[0]
            },
            "destination": {
                "placeId": placeIds[1]
            }
        }

        fetch("/request-route", {
            method: 'POST',
            body: JSON.stringify(reqBody),
            headers: {
                "Content-Type": "application/json"
            }
        }).then((response) => {
            return response.json();
        }).then((data) => {
            //Draw the route on the map
            //Details will be covered in next step
            renderRoutes(data);
        }).catch((error) => {
            console.log(error);
        });
    } else {
        window.alert('Location must be set');
        return;
    }
  });
}

requestRoute();

renderRoutes() वह फ़ंक्शन है जिसका इस्तेमाल हम मैप पर रास्ता दिखाने के लिए करेंगे. हम अगले चरण में इस बारे में जानकारी देंगे.

सर्वर बनाया जा रहा है

प्रोजेक्ट डायरेक्ट्री(इस मामले में ac_routes) में, function नाम का एक नया फ़ोल्डर बनाएं. इस फ़ोल्डर में, server.js नाम की एक फ़ाइल बनाएं. यह फ़ाइल, आपके प्रोजेक्ट के एंट्री पॉइंट के तौर पर काम करती है. इसे Node.js प्रोजेक्ट सेट अप करते समय कॉन्फ़िगर किया जाता है. यह तीन मुख्य फ़ंक्शन मैनेज करती है:

  1. वेब क्लाइंट से डेटा इकट्ठा करना
  2. Routes API को अनुरोध भेजना
  3. क्लाइंट-साइड पर एपीआई रिस्पॉन्स दिखाना

नीचे दिए गए कोड को server.js में कॉपी करें. ‘YOUR_API_KEY' को अपने एपीआई पासकोड से बदलें. एपीआई कुंजी की सुरक्षा बढ़ाने के लिए, हमारा सुझाव है कि बैकएंड के लिए अलग कुंजी का इस्तेमाल करें. सुरक्षा से जुड़े दिशा-निर्देश देखें.

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

const port  = 8080;
const urlencodedParser = bodyParser.urlencoded({extended:true}); 

function main() {
  app.use('/', express.static('public'));
  app.use(urlencodedParser);
  app.use(express.json());

  app.post('/request-route', (req,res) => {    
    fetch("https://routes.googleapis.com/directions/v2:computeRoutes", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Goog-Api-Key": "YOUR_API_KEY",
        "X-Goog-FieldMask": "*"
      },
      body: JSON.stringify(req.body)
    }).then((response) => {
      return response.json();
    }).then((data) => {
      if('error' in data){
        console.log(data.error);
      } else if(!data.hasOwnProperty("routes")){
        console.log("No route round");
      } else {
        res.end(JSON.stringify(data));
      }
    }).catch((error) => {
      console.log(error)
    });
  });

  app.listen(port, () => {
      console.log('App listening on port ${port}: ' + port);
      console.log('Press Ctrl+C to quit.');
  });
}

main();

Routes API की मदद से रूट पाने के बारे में ज़्यादा जानकारी पाएं.

कोड लागू करना

कमांड लाइन में यहां दिया गया कोड चलाएं:

$ node function/server.js

ब्राउज़र खोलें और http://127.0.0.1:8080/index.html पर जाएं. आपको ऐप्लिकेशन पेज दिखेगा. इस चरण तक, एपीआई का जवाब वेब क्लाइंट को मिल जाता है. अगले चरण में, मैप पर रास्ता दिखाने का तरीका जानें.

पूरा सैंपल कोड

इस पॉइंट तक का पूरा कोड, GitHub:step3_requestRoute पर उपलब्ध है

7. मैप पर रास्ता दिखाना

पिछले चरण में, Node.js सेवा से जवाब मिलने पर हम renderRoutes() का इस्तेमाल करते हैं. अब मैप पर रास्ता दिखाने के लिए, असली कोड जोड़ते हैं.

app.js में, नीचे दिया गया कोड जोड़ें:

let paths = [];
async function renderRoutes(data) {
  const { encoding } = await google.maps.importLibrary("geometry");
  let routes = data.routes;
  let decodedPaths = [];

  ///Display routes and markers
  routes.forEach((route,i) => {
      if(route.hasOwnProperty('polyline')){
        //Decode the encoded polyline
        decodedPaths.push(encoding.decodePath(route.polyline.encodedPolyline));

        //Draw polyline on the map
        for(let i = decodedPaths.length - 1; i >= 0; i--){
            let polyline = new google.maps.Polyline({
                map: map,
                path: decodedPaths[i],
                strokeColor: "#4285f4",
                strokeOpacity: 1,
                strokeWeight: 5
            });
            paths.push(polyline);
        }
        
        //Add markers for origin/destination
        addMarker(route.legs[0].startLocation.latLng,"A");
        addMarker(route.legs[0].endLocation.latLng,"B");
        //Set the viewport
        setViewport(route.viewport);
      } else {
        console.log("Route cannot be found");
      }
  });
}

Routes API, polyline को encodedPolyline(डिफ़ॉल्ट) या geoJsonLinestring के फ़ॉर्मैट में दिखाता है. इस लैब में, हम encodedPolyline फ़ॉर्मैट का इस्तेमाल करते हैं. साथ ही, Maps JavaScript geometry library का इस्तेमाल करके इसे डिकोड करते हैं.

हम addMarker() का इस्तेमाल करके, शुरुआती और मंज़िल की जगह के लिए ऐडवांस मार्कर जोड़ेंगे. app.js में, यह कोड जोड़ें:

let markers = [];
async function addMarker(pos,label){
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const { PinElement } = await google.maps.importLibrary("marker");
  const { LatLng } = await google.maps.importLibrary("core");
  let pinGlyph = new PinElement({
      glyphColor: "#fff",
      glyph: label
  });
  let marker = new AdvancedMarkerElement({
      position: new LatLng({lat:pos.latitude,lng:pos.longitude}),
      gmpDraggable: false,
      content: pinGlyph.element,
      map: map
  });
  markers.push(marker);
}

यहां हम दो ऐडवांस मार्कर बनाते हैं - A, ऑरिजिन के लिए और B, डेस्टिनेशन के लिए. ऐडवांस मार्कर के बारे में ज़्यादा जानें.

इसके बाद, हम Routes API से मिली व्यूपोर्ट की जानकारी का इस्तेमाल करके, मैप के व्यूपोर्ट को खोजे गए रास्ते पर सेट करेंगे. app.js में, यह कोड जोड़ें:

async function setViewport(viewPort) {
  const { LatLng } = await google.maps.importLibrary("core");
  const { LatLngBounds } = await google.maps.importLibrary("core");
  let sw = new LatLng({lat:viewPort.low.latitude,lng:viewPort.low.longitude});
  let ne = new LatLng({lat:viewPort.high.latitude,lng:viewPort.high.longitude});
  map.fitBounds(new LatLngBounds(sw,ne));
}

पूरा सैंपल कोड इस पॉइंट तक का पूरा कोड, GitHub:step4_displayRoute पर उपलब्ध है

8. मैप से एलिमेंट हटाना

हम इस दिशा में एक और कदम आगे बढ़ाना चाहते हैं. मैप पर नए मार्कर और रास्ते बनाने से पहले, मैप को साफ़ कर लेते हैं, ताकि मैप पर ज़्यादा जानकारी न दिखे.

app.js में, एक और फ़ंक्शन जोड़ें:

function clearUIElem(obj,type) {
  if(obj.length > 0){
      if(type == 'advMarker'){
          obj.forEach(function(item){
              item.map = null;
          });
      } else {
          obj.forEach(function(item){
              item.setMap(null);
          });
      }
  }
}

renderRoutes() की शुरुआत में यह लाइन जोड़ें:

clearUIElem(paths,'polyline');

addMarker() की शुरुआत में यह लाइन जोड़ें:

clearUIElem(markers,'advMarker');

पूरा सैंपल कोड

इस पॉइंट तक का पूरा कोड, GitHub:step5_removeElements पर उपलब्ध है

9. बधाई हो

आपने डिवाइस बना लिया है.

आपने क्या सीखा

  • Google Maps Platform API चालू करना
  • Google Maps JavaScript API को एचटीएमएल पेज में लोड करना
  • Maps JavaScript API की Places Library इंपोर्ट करना
  • जगह के नाम के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा को टेक्स्ट फ़ील्ड से बाइंड करना
  • Routes API के ज़रिए किसी रास्ते का अनुरोध करना
  • डाइनैमिक मैप पर रास्ता दिखाना
  • मैप आईडी बनाना
  • ऐडवांस मार्कर बनाना

ज़्यादा जानें

आपको और कौनसे कोडलैब देखने हैं?

मैप पर डेटा विज़ुअलाइज़ेशन अपने मैप की स्टाइल को पसंद के मुताबिक बनाने के बारे में ज़्यादा जानकारी मैप में 3D इंटरैक्शन के लिए बिल्डिंग

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