สร้างเครื่องมือวางแผนเส้นทางด้วยการเติมข้อความอัตโนมัติของ Places และ Routes API

1. ภาพรวม

ไม่ว่าคุณจะออกเดินทางท่องเที่ยว วางแผนการเดินทางประจำวัน หรือนำทางในเมืองที่พลุกพล่าน การเดินทางจากจุด ก. ไปยังจุด ข. ไม่ได้มีแค่การรู้ว่าคุณต้องการไปที่ไหน แต่เครื่องมือสร้างเส้นทางที่เชื่อถือได้ก็เป็นสิ่งจำเป็นเช่นกัน

Google Maps Platform ช่วยให้คุณเพิ่มแผนที่แบบไดนามิกลงในแอปพลิเคชัน ให้ผู้ใช้ป้อนสถานที่ตั้งได้อย่างรวดเร็วด้วยการเติมข้อความอัตโนมัติ และแสดงเส้นทางบนแผนที่

Codelab นี้จะแนะนำนักพัฒนาแอปในการสร้างเว็บแอปพลิเคชันโดยใช้ Maps JavaScript API, Place Autocomplete และ Routes API คุณจะได้เรียนรู้วิธีผสานรวม Google Maps Platform API หลายรายการผ่านบทแนะนำที่ปรับแต่งได้

สิ่งที่คุณจะสร้าง

Codelab นี้จะแนะนำวิธีสร้างเว็บแอปพลิเคชันโดยใช้ HTML, CSS, JavaScript และแบ็กเอนด์ Node.js

สถาปัตยกรรมของเว็บแอปเครื่องมือวางแผนเส้นทาง

เว็บแอปเครื่องมือวางแผนเส้นทาง

สิ่งที่คุณจะได้เรียนรู้

  • วิธีเปิดใช้ Google Maps Platform API
  • วิธีผสานรวมแผนที่แบบไดนามิกเข้ากับเว็บแอปพลิเคชัน
  • วิธีผสานรวมบริการการเติมข้อความอัตโนมัติของ Places
  • วิธีขอเส้นทางผ่าน Routes API
  • วิธีแสดงเส้นทางบนแผนที่แบบไดนามิก
  • วิธีสร้างรหัสแผนที่
  • วิธีเพิ่มเครื่องหมายขั้นสูงลงในแผนที่แบบไดนามิก

สิ่งที่คุณต้องมี

โค้ดตัวอย่าง

โซลูชันฉบับเต็มและโค้ดแบบทีละขั้นตอนมีอยู่ใน GitHub โค้ดไม่มีแพ็กเกจ Node ที่จำเป็น ติดตั้งการอ้างอิงที่จำเป็นก่อนเรียกใช้โค้ด ดูรายละเอียดของแพ็กเกจที่จำเป็นได้ในไฟล์ package.json(อธิบายไว้ในขั้นตอนที่ 3)

2. ตั้งค่าโปรเจ็กต์และเปิดใช้ API

สำหรับขั้นตอนการเปิดใช้ คุณจะต้องเปิดใช้ Maps JavaScript API, Place Autocomplete และ Routes API

ตั้งค่า Google Maps Platform

หากยังไม่มีบัญชี Google Cloud Platform และโปรเจ็กต์ที่เปิดใช้การเรียกเก็บเงิน โปรดดูคู่มือเริ่มต้นใช้งาน Google Maps Platform เพื่อสร้างบัญชีสำหรับการเรียกเก็บเงินและโปรเจ็กต์

  1. ใน Cloud Console ให้คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่ต้องการใช้สำหรับ Codelab นี้ เลือกโปรเจ็กต์
  2. เปิดใช้ Google Maps Platform API ที่จำเป็นสำหรับ Codelab นี้ในหน้าไลบรารี Maps API โดยทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้
  3. สร้างคีย์ API ในหน้าข้อมูลเข้าสู่ระบบของ Cloud Console คุณสามารถทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้ คำขอทั้งหมดไปยัง Google Maps Platform ต้องใช้คีย์ API

3. ตั้งค่าโปรเจ็กต์ Node.js

ในแล็บนี้ เราจะใช้ Node.js เพื่อรวบรวมต้นทางและปลายทางจากเว็บ และขอเส้นทางผ่าน Routes API

สมมติว่าคุณได้ติดตั้ง Node.js แล้ว ให้สร้างไดเรกทอรีที่จะใช้เรียกใช้โปรเจ็กต์นี้

$ mkdir ac_routes
$ cd ac_routes

เริ่มต้นแพ็กเกจ Node.js ใหม่ในไดเรกทอรีของแอปพลิเคชัน

$ npm init

คำสั่งนี้จะแจ้งให้คุณระบุข้อมูลต่างๆ เช่น ชื่อและเวอร์ชันของแอปพลิเคชัน ตอนนี้คุณเพียงแค่กด RETURN เพื่อยอมรับค่าเริ่มต้นสำหรับส่วนใหญ่ โดยจุดแรกเข้าเริ่มต้นคือ index.js ซึ่งคุณเปลี่ยนเป็นไฟล์หลักได้ ใน Lab นี้ ไฟล์หลักคือ function/server.js(ดูรายละเอียดเพิ่มเติมได้ในขั้นตอนที่ 6)

นอกจากนี้ คุณยังติดตั้งเฟรมเวิร์กและโมดูลที่ต้องการได้ด้วย Lab นี้ใช้เฟรมเวิร์กเว็บ(Express) และตัวแยกวิเคราะห์เนื้อหา(body-parser) ดูรายละเอียดเพิ่มเติมได้ในไฟล์ package.json

4. สร้างแผนที่แบบไดนามิก

ตอนนี้เรามีแบ็กเอนด์ Node.js แล้ว มาดูขั้นตอนที่จำเป็นสำหรับฝั่งไคลเอ็นต์กัน

  • สร้างหน้า HTML สำหรับแอปพลิเคชัน
  • สร้างไฟล์ CSS สำหรับการจัดรูปแบบ
  • โหลด Google Maps JavaScript API ลงในหน้า HTML
  • วางคีย์ API ลงในแท็กสคริปต์เพื่อตรวจสอบสิทธิ์แอปพลิเคชัน
  • สร้างไฟล์ JavaScript เพื่อจัดการฟังก์ชันการทำงานของแอปพลิเคชัน

สร้างหน้า HTML

  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>

สร้างไฟล์ CSS

  1. สร้าง 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" ด้วยคีย์ API ของคุณเอง

<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 ได้ รหัสนี้ไม่ได้มีไว้สำหรับใช้ในแอปพลิเคชันเวอร์ชันที่ใช้งานจริง และใช้กับฟีเจอร์ที่ต้องใช้การจัดรูปแบบในระบบคลาวด์ไม่ได้ ในห้องทดลองนี้ เรากำหนดให้ต้องมีรหัสแผนที่สำหรับเครื่องหมายขั้นสูงในระยะต่อๆ ไป ดูรายละเอียดเพิ่มเติมเกี่ยวกับการสร้างรหัสแผนที่สำหรับแอปพลิเคชัน

ใน index.html ให้ลิงก์ app.js ก่อนแท็กปิดเนื้อหาและหลังแท็กสคริปต์ของการโหลด Maps JavaScript API

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

โค้ดตัวอย่างแบบเต็ม

โค้ดทั้งหมดจนถึงตอนนี้พร้อมให้บริการบน GitHub:step1_createDynamicMap

5. ป้อนที่อยู่สำหรับต้นทางและปลายทาง

  • เพิ่มช่องข้อความ 2 ช่องใน 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 class เป็นวิดเจ็ตที่ให้การคาดคะเนสถานที่ตามข้อความที่ผู้ใช้ป้อน โดยจะแนบไปกับองค์ประกอบอินพุตประเภทข้อความ และรอรับการป้อนข้อความในช่องนั้น รายการการคาดคะเนจะแสดงเป็นรายการแบบเลื่อนลง และจะอัปเดตเมื่อมีการป้อนข้อความ

ใน 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
  • ระบบจะส่งการตอบกลับของ API ไปยังฝั่งไคลเอ็นต์เพื่อแสดง

เมื่อตั้งค่าต้นทางและปลายทางแล้ว รวมถึงมีแผนที่แบบไดนามิกพร้อมใช้งาน ก็ถึงเวลาดูเส้นทาง Routes API ซึ่งเป็นบริการหาเส้นทางและเมทริกซ์ระยะทางเวอร์ชันถัดไปที่ได้รับการเพิ่มประสิทธิภาพจึงเข้ามาช่วย ในแล็บนี้ เราจะใช้ 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;}

ใน app.js ให้เพิ่มโค้ดด้านล่างเพื่อส่งข้อมูลต้นทางและปลายทางไปยังบริการ Node.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 โดยจะจัดการฟังก์ชันหลัก 3 อย่าง ได้แก่

  1. การรวบรวมข้อมูลจากไคลเอ็นต์บนเว็บ
  2. การส่งคำขอไปยัง Routes API
  3. ส่งการตอบกลับของ API ไปยังฝั่งไคลเอ็นต์

คัดลอกโค้ดต่อไปนี้ลงใน server.js แทนที่ "YOUR_API_KEY" ด้วยคีย์ API ของคุณเอง เราขอแนะนำอย่างยิ่งให้ใช้คีย์ที่แตกต่างกันสำหรับแบ็กเอนด์เพื่อเพิ่มความปลอดภัยของคีย์ API ดูคำแนะนำด้านความปลอดภัย

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 ในส่วนรับเส้นทางด้วย Routes API

เรียกใช้โค้ด

เรียกใช้โค้ดด้านล่างในบรรทัดคำสั่ง

$ node function/server.js

เปิดเบราว์เซอร์แล้วไปที่ http://127.0.0.1:8080/index.html คุณควรเห็นหน้าสมัคร จนถึงขั้นตอนนี้ ระบบจะส่งการตอบกลับของ API ไปยังเว็บไคลเอ็นต์ มาดูวิธีแสดงเส้นทางบนแผนที่ในขั้นตอนถัดไปกัน

โค้ดตัวอย่างแบบเต็ม

โค้ดทั้งหมดจนถึงจุดนี้พร้อมใช้งานบน GitHub:step3_requestRoute

7. แสดงเส้นทางบนแผนที่

ในขั้นตอนก่อนหน้า เราจะอ้างอิงถึง renderRoutes() เมื่อได้รับคำตอบจากบริการ Node.js เรียบร้อยแล้ว ตอนนี้เรามาเพิ่มโค้ดจริงเพื่อแสดงเส้นทางบนแผนที่กัน

ใน 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 ในแล็บนี้ เราจะใช้รูปแบบ Encoded Polyline และถอดรหัสโดยใช้ไลบรารีเรขาคณิตของ Maps JavaScript

เราจะใช้ 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);
}

ในที่นี้เราจะสร้างเครื่องหมายขั้นสูง 2 รายการ ได้แก่ 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 ให้เพิ่มฟังก์ชันอีก 1 ฟังก์ชัน ดังนี้

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 ลงในหน้า HTML
  • นำเข้า Places Library, Maps JavaScript API
  • เชื่อมโยงบริการ Place Autocomplete กับช่องข้อความ
  • ขอเส้นทางผ่าน Routes API
  • แสดงเส้นทางบนแผนที่แบบไดนามิก
  • สร้างรหัสแผนที่
  • สร้างเครื่องหมายขั้นสูง

ดูข้อมูลเพิ่มเติม

คุณอยากเห็น Codelab อื่นๆ แบบไหน

การแสดงข้อมูลเป็นภาพบนแผนที่ ข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่งรูปแบบของแผนที่ การสร้างการโต้ตอบ 3 มิติในแผนที่

หากไม่พบ Codelab ที่ต้องการในรายการด้านบน ขอได้โดยแจ้งปัญหาใหม่ที่นี่