ติดตามกลุ่มอุปกรณ์ของคุณด้วยไลบรารีการติดตามกลุ่ม JavaScript

ไลบรารี JavaScript Fleet Tracking Library ช่วยให้คุณเห็นภาพ ตำแหน่งยานพาหนะในยานพาหนะได้แบบเกือบเรียลไทม์ ไลบรารีใช้ Deliveries API เพื่อแสดงภาพยานพาหนะที่ส่งของขวัญและงานต่างๆ ไลบรารีดังกล่าวมีคอมโพเนนต์แผนที่ JavaScript ที่เป็นการแทนที่แบบดร็อปอินสำหรับเอนทิตี google.maps.Map มาตรฐานและคอมโพเนนต์ข้อมูลเพื่อเชื่อมต่อกับ Fleet Engine เช่นเดียวกับไลบรารีการติดตามการจัดส่ง JavaScript

คอมโพเนนต์

ไลบรารี JavaScript Fleet Tracking Library มีองค์ประกอบสำหรับการภาพยานพาหนะและการหยุดนำส่งสินค้า ตลอดจนฟีดข้อมูลดิบสำหรับ ETA หรือระยะทางที่เหลือไปยังการนำส่ง

มุมมองแผนที่การติดตามยานพาหนะ

คอมโพเนนต์มุมมองแผนที่การติดตามกองทัพจะแสดง ตำแหน่งของยานพาหนะและงานที่มากขึ้น หากคุณทราบเส้นทางของยานพาหนะ ส่วนประกอบมุมมองแผนที่จะเคลื่อนไหวยานพาหนะนั้นขณะที่เคลื่อนที่ไปตามเส้นทางที่คาดคะเน

ตัวอย่างมุมมองแผนที่การติดตามยานพาหนะ

ผู้ให้บริการตำแหน่ง

ผู้ให้บริการตำแหน่งทำงานกับข้อมูลที่จัดเก็บไว้ใน Fleet Engine เพื่อส่งข้อมูลตำแหน่งของออบเจ็กต์ที่ติดตามลงในแผนที่การแชร์การเดินทาง

ผู้ให้บริการตำแหน่งยานพาหนะ

ผู้ให้บริการตำแหน่งยานพาหนะที่นำส่งจะแสดงข้อมูลตำแหน่งของรถนำส่งคันเดียว ซึ่งมีข้อมูลเกี่ยวกับตำแหน่งของรถ รวมถึงงานที่รถส่งทำเสร็จด้วย

ผู้ให้บริการตำแหน่งยานพาหนะที่นำส่ง

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

ควบคุมการเปิดเผยสถานที่ที่ติดตาม

ส่วนนี้จะอธิบายกฎการเปิดเผยสำหรับออบเจ็กต์ตำแหน่งที่ติดตามบนแผนที่สำหรับผู้ให้บริการตำแหน่งที่กำหนดไว้ล่วงหน้าของ Fleet Engine ผู้ให้บริการตำแหน่งที่กำหนดเองหรือที่ได้มาอาจเปลี่ยนแปลงกฎระดับการเข้าถึง

รถส่งของ

ยานพาหนะนำส่งจะแสดงทันทีที่สร้างใน Fleet Engine และแสดงให้เห็นตลอดเส้นทางไม่ว่าจะทำงานด้านใด

เครื่องหมายสถานที่ของงาน

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

ระบบจะแสดงตำแหน่งของผลลัพธ์งานพร้อมกับตัวทำเครื่องหมายผลลัพธ์ของงาน งานที่มีผลลัพธ์ SUCCEEDED จะปรากฏพร้อมกับเครื่องหมายงานที่ประสบความสำเร็จ ส่วนงานอื่นๆ ทั้งหมดจะปรากฏพร้อมกับตัวทำเครื่องหมายงานที่ไม่สำเร็จ

เริ่มต้นใช้งานไลบรารีการติดตามกลุ่ม JavaScript

ก่อนใช้ไลบรารี JavaScript Fleet Tracking Library โปรดทำความคุ้นเคยกับ Fleet Engine และการรับคีย์ API จากนั้นสร้างรหัสงานและการอ้างสิทธิ์รหัสยานพาหนะที่นำส่ง

สร้างรหัสงานและการอ้างสิทธิ์รหัสยานพาหนะที่นำส่ง

หากต้องการติดตามยานพาหนะที่นำส่งโดยใช้ผู้ให้บริการตำแหน่งยานพาหนะสำหรับนำส่ง ให้สร้าง JSON Web Token (JWT) ที่มีรหัสงานและการอ้างสิทธิ์รหัสยานพาหนะสำหรับนำส่ง

ในการสร้างเพย์โหลด JWT ให้เพิ่มการอ้างสิทธิ์เพิ่มเติมในส่วนการให้สิทธิ์ที่มีคีย์ taskid และ deliveryvehicleid แล้วตั้งค่าของแต่ละคีย์เป็น * โทเค็นควรสร้างโดยใช้บทบาท Cloud IAM ระดับผู้ใช้บริการระดับ Cloud Engine โปรดทราบว่าวิธีนี้ให้การเข้าถึงแบบกว้างเพื่อสร้าง อ่าน และแก้ไขเอนทิตี Fleet Engine และควรแชร์กับผู้ใช้ที่เชื่อถือได้เท่านั้น

ตัวอย่างต่อไปนี้แสดงวิธีสร้างโทเค็นเพื่อติดตามตามยานพาหนะและงาน

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

สร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์

คุณสามารถสร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เพื่อเรียกโทเค็นที่สร้างพร้อมการอ้างสิทธิ์ที่เหมาะสมบนเซิร์ฟเวอร์ของคุณโดยใช้ใบรับรองบัญชีบริการสำหรับโปรเจ็กต์ของคุณ สิ่งสำคัญคือคุณจะต้องสร้างโทเค็นที่สร้างไว้ในเซิร์ฟเวอร์เท่านั้น และอย่าแชร์ใบรับรองกับไคลเอ็นต์ใดเลย มิฉะนั้น คุณอาจไม่ปลอดภัยสำหรับระบบของคุณ

ตัวดึงข้อมูลต้องแสดงผลโครงสร้างข้อมูลที่มี 2 ช่องซึ่งอยู่ใน "คำสัญญา" ดังนี้

  • สตริง token
  • หมายเลข expiresInSeconds โทเค็นจะหมดอายุภายในช่วงเวลานี้หลังจากการดึงข้อมูล

JavaScript Fleet Tracking Library จะขอโทเค็นผ่านตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์เมื่อเงื่อนไขหนึ่งดังต่อไปนี้เป็นจริง

  • เซิร์ฟเวอร์ไม่มีโทเค็นที่ถูกต้อง เช่น เมื่อไม่ได้เรียก Fetcher ในการโหลดหน้าเว็บใหม่ หรือเมื่อตัวดึงข้อมูลไม่แสดงผลพร้อมโทเค็น
  • โทเค็นที่ดึงข้อมูลมาก่อนหน้านี้หมดอายุแล้ว
  • โทเค็นที่ดึงข้อมูลก่อนหน้านี้ยังอยู่ในช่วง 1 นาทีที่จะหมดอายุ

ไม่เช่นนั้น ไลบรารีจะใช้โทเค็นที่ออกให้ก่อนหน้านี้ ยังใช้งานได้อยู่และจะไม่เรียกใช้ตัวดึงข้อมูล

ตัวอย่างต่อไปนี้แสดงวิธีสร้างตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

เมื่อคุณใช้ปลายทางฝั่งเซิร์ฟเวอร์ในการสร้างโทเค็น โปรดคำนึงถึงสิ่งต่อไปนี้

  • ปลายทางต้องแสดงผลเวลาหมดอายุสำหรับโทเค็น ในตัวอย่างด้านบน ค่านี้กำหนดเป็น data.ExpiresInSeconds
  • ตัวดึงข้อมูลโทเค็นการตรวจสอบสิทธิ์ต้องส่งเวลาหมดอายุ (เป็นวินาทีนับจากเวลาดึงข้อมูล) ไปยังไลบรารีดังที่แสดงในตัวอย่าง
  • SERVER_TOKEN_URL ขึ้นอยู่กับการใช้งานแบ็กเอนด์ของคุณ นี่คือ URL สำหรับตัวอย่างแบ็กเอนด์ของแอป
    • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
    • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
    • https://SERVER_URL/token/fleet_reader

โหลดแผนที่จาก HTML

ตัวอย่างต่อไปนี้แสดงวิธีโหลดไลบรารีการแชร์เส้นทาง JavaScript จาก URL ที่ระบุ พารามิเตอร์ callback จะทํางานฟังก์ชัน initMap หลังจากโหลด API แอตทริบิวต์ defer จะช่วยให้เบราว์เซอร์แสดงผล ส่วนที่เหลือของหน้าเว็บต่อไปได้ขณะที่ API โหลดอยู่

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

ติดตามยานพาหนะที่นำส่งสินค้า

ส่วนนี้จะแสดงวิธีใช้ไลบรารีการติดตามกลุ่ม JavaScript เพื่อติดตามยานพาหนะนำส่ง อย่าลืมโหลดไลบรารีจากฟังก์ชัน Callback ที่ระบุในแท็กสคริปต์ก่อนเรียกใช้โค้ด

สร้างตัวอย่างผู้ให้บริการตำแหน่งยานพาหนะ

JavaScript Fleet Tracking Library กำหนดผู้ให้บริการตำแหน่งสำหรับ Fleet Engine Deliveries API ไว้ล่วงหน้า ใช้รหัสโปรเจ็กต์และการอ้างอิงกับโรงงานโทเค็นเพื่อสร้างอินสแตนซ์

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify 
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

เริ่มต้นมุมมองแผนที่

หลังจากโหลดไลบรารีการแชร์เส้นทาง JavaScript แล้ว ให้เริ่มต้นมุมมองแผนที่และเพิ่มลงในหน้า HTML หน้าเว็บของคุณควรมีเอลิเมนต์ <div> ที่เก็บมุมมองแผนที่ องค์ประกอบ <div> มีชื่อว่า map_canvas ในตัวอย่างด้านล่าง

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise the 'ready' event above may 
// not fire. The user also has access to the mapView 
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

ฟังเหตุการณ์การเปลี่ยนแปลง

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

JavaScript

locationProvider.addListener('update', e => {
  // e.deliveryVehicle contains data that may be        
  // useful to the rest of the UI.  
  if (e.deliveryVehicle) {
    console.log(e.deliveryVehicle.remainingDuration);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  // e.deliveryVehicle contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicle) {
    console.log(e.deliveryVehicle.remainingDuration);
  }
});

ฟังข้อผิดพลาด

ข้อผิดพลาดที่เกิดขึ้นไม่พร้อมกันจากการขอข้อมูลยานพาหนะที่นำส่งสินค้าจะทริกเกอร์เหตุการณ์ข้อผิดพลาด ตัวอย่างต่อไปนี้แสดงวิธีจับเหตุการณ์เหล่านี้ เพื่อจัดการข้อผิดพลาด

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

หยุดติดตาม

หากต้องการหยุดผู้ให้บริการตำแหน่งไม่ให้ติดตามยานพาหนะที่นำส่ง ให้นำรหัสยานพาหนะที่นำส่งออกจากผู้ให้บริการตำแหน่ง

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

นำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่

ตัวอย่างต่อไปนี้แสดงวิธีนำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

ดูกลุ่มอุปกรณ์นำส่ง

ส่วนนี้จะแสดงวิธีใช้ไลบรารีการแชร์เส้นทาง JavaScript เพื่อดูกลุ่มอุปกรณ์นำส่ง อย่าลืมโหลดไลบรารีจากฟังก์ชัน Callback ที่ระบุในแท็กสคริปต์ก่อนเรียกใช้โค้ด

ยกตัวอย่างผู้ให้บริการตำแหน่งกลุ่มจัดส่งสินค้า

JavaScript Fleet Tracking Library กำหนดผู้ให้บริการตำแหน่งที่ดึงข้อมูลยานพาหนะหลายคันจาก FleetEngine Deliveries API ไว้ล่วงหน้า ใช้รหัสโปรเจ็กต์รวมถึงการอ้างอิงตัวดึงข้อมูลโทเค็นเพื่อสร้างอินสแตนซ์

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleFilter ระบุข้อความค้นหาที่ใช้กรองยานพาหนะที่แสดงบนแผนที่ ตัวกรองนี้จะส่งไปยัง Fleet Engine โดยตรง ดู ListDeliveryVehiclesRequest.filter สำหรับรูปแบบที่รองรับ

locationRestriction จำกัดพื้นที่ในการแสดงยานพาหนะบนแผนที่ อีกทั้งยังควบคุมว่าการติดตามตำแหน่งทำงานอยู่หรือไม่ การติดตามตำแหน่งจะไม่เริ่มขึ้นจนกว่าคุณจะตั้งค่านี้

เมื่อสร้างผู้ให้บริการตำแหน่งแล้ว ให้เริ่มต้นมุมมองแผนที่

ตั้งค่าการจำกัดตำแหน่งโดยใช้วิวพอร์ตของแผนที่

คุณกำหนดค่าขอบเขต locationRestriction ให้ตรงกับพื้นที่ที่แสดงอยู่ในมุมมองแผนที่ในปัจจุบันได้

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

ฟังเหตุการณ์การเปลี่ยนแปลง

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

JavaScript

locationProvider.addListener('update', e => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

ฟังข้อผิดพลาด

ข้อผิดพลาดที่เกิดขึ้นไม่พร้อมกันจากการขอข้อมูลกลุ่มอุปกรณ์นำส่งนั้นจะทำให้เกิดเหตุการณ์ข้อผิดพลาด ดูตัวอย่างที่แสดงวิธีฟังเหตุการณ์เหล่านี้ได้ที่ฟังข้อผิดพลาด

หยุดติดตาม

หากต้องการหยุดผู้ให้บริการตำแหน่งไม่ให้ติดตามกลุ่มอุปกรณ์ที่ส่ง ให้ตั้งค่าขอบเขตของผู้ให้บริการตำแหน่งเป็นค่าว่าง

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

นำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่

ตัวอย่างต่อไปนี้แสดงวิธีนำผู้ให้บริการตำแหน่งออกจากมุมมองแผนที่

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

ติดตามรถส่งของขณะดูกลุ่มรถส่งของ

ขณะดูยานพาหนะ คุณแสดงเส้นทางและงานที่กำลังจะมาถึงของยานพาหนะสำหรับนำส่งที่ต้องการได้ ซึ่งทำได้โดยสร้างทั้งผู้ให้บริการสถานที่นำส่งยานพาหนะและผู้ให้บริการสถานที่นำส่งยานพาหนะ แล้วเพิ่มทั้ง 2 อย่างนี้ลงในมุมมองแผนที่

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

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

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

ซ่อนเครื่องหมายจากผู้ให้บริการตำแหน่งยานพาหนะที่นำส่งเพื่อป้องกันไม่ให้ การแสดงผลเครื่องหมาย 2 จุดสำหรับยานพาหนะคันเดียวกัน

JavaScript

// Specify the customization function either separately, or as a field in 
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

ปรับแต่งรูปลักษณ์ของแผนที่ฐาน

หากต้องการปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่ จัดรูปแบบแผนที่ โดยใช้เครื่องมือในระบบคลาวด์หรือโดยตั้งค่าตัวเลือกในโค้ดโดยตรง

ใช้การจัดรูปแบบแผนที่ในระบบคลาวด์

การจัดรูปแบบแผนที่ในระบบคลาวด์ช่วยให้คุณสร้างและแก้ไขรูปแบบแผนที่สำหรับแอปใดก็ตามที่ใช้ Google Maps ได้จากคอนโซล Google Cloud โดยไม่ต้องเปลี่ยนแปลงโค้ดใดๆ เลย ระบบจะบันทึกรูปแบบแผนที่เป็นรหัสแผนที่ในโปรเจ็กต์ที่อยู่ในระบบคลาวด์ หากต้องการใช้รูปแบบกับแผนที่การติดตามกลุ่ม JavaScript ให้ระบุ mapId เมื่อคุณสร้าง JourneySharingMapView คุณจะเปลี่ยนหรือเพิ่มช่อง mapId ไม่ได้หลังจากสร้างอินสแตนซ์ JourneySharingMapView แล้ว ตัวอย่างต่อไปนี้แสดงวิธีเปิดใช้รูปแบบแผนที่ที่สร้างไว้ก่อนหน้านี้ด้วยรหัสแผนที่

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

ใช้การจัดรูปแบบแผนที่ตามโค้ด

อีกวิธีในการปรับแต่งรูปแบบแผนที่คือการตั้งค่า mapOptions เมื่อคุณสร้าง JourneySharingMapView

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

ใช้การปรับแต่งเครื่องหมาย

ด้วยไลบรารี JavaScript Fleet Tracking Library คุณสามารถปรับแต่งรูปลักษณ์ของเครื่องหมายที่เพิ่มลงในแผนที่ได้ คุณสามารถดำเนินการนี้ได้ด้วยการระบุการปรับแต่งเครื่องหมาย ซึ่งจากนั้นไลบรารีการติดตามยานพาหนะจะถูกนำไปใช้ก่อนเพิ่มเครื่องหมายลงในแผนที่และทุกครั้งที่อัปเดตเครื่องหมาย

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

ตัวเลือกขั้นสูงขึ้นสำหรับการระบุฟังก์ชันการปรับแต่ง ฟังก์ชันการปรับแต่งทำให้สามารถจัดรูปแบบเครื่องหมายโดยอิงตามข้อมูล รวมถึงเพิ่มการโต้ตอบลงในตัวทำเครื่องหมาย เช่น การจัดการคลิก กล่าวอย่างเจาะจงคือ การติดตามกลุ่มจะส่งข้อมูลไปยังฟังก์ชันการปรับแต่งเกี่ยวกับประเภทของวัตถุที่เครื่องหมายแสดงถึง เช่น ยานพาหนะ หยุด หรืองาน ซึ่งจะทำให้การจัดรูปแบบของเครื่องหมายเปลี่ยนแปลงไปตามสถานะปัจจุบันขององค์ประกอบตัวทำเครื่องหมายเอง เช่น จำนวนจุดแวะหรือประเภทของงานที่เหลืออยู่ คุณยังผนวกกับข้อมูลจากแหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบเครื่องหมายโดยอิงตามข้อมูลดังกล่าวได้อีกด้วย

นอกจากนี้ คุณยังสามารถใช้ฟังก์ชันการปรับแต่งเพื่อกรองการแสดงเครื่องหมายได้ โดยเรียก setVisible(false) บนเครื่องหมาย

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

ไลบรารีการติดตาม Fleet Tracking มีพารามิเตอร์ที่กำหนดเองดังนี้

เปลี่ยนรูปแบบเครื่องหมายโดยใช้ MarkerOptions

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบของเครื่องหมายยานพาหนะด้วยออบเจ็กต์ MarkerOptions ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของเครื่องหมายโดยใช้พารามิเตอร์การกำหนดค่าเครื่องหมายใดๆ ที่แสดงอยู่ด้านบน

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

เปลี่ยนการจัดรูปแบบเครื่องหมายโดยใช้ฟังก์ชันการปรับแต่ง

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบของเครื่องหมายยานพาหนะ ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของเครื่องหมายโดยใช้พารามิเตอร์การกำหนดค่าเครื่องหมายที่ระบุไว้ข้างต้น

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

เพิ่มการจัดการการคลิกลงในตัวทำเครื่องหมาย

ตัวอย่างต่อไปนี้แสดงวิธีเพิ่มการจัดการการคลิกลงในเครื่องหมายยานพาหนะ ทำตามรูปแบบนี้เพื่อเพิ่มการจัดการคลิกให้กับเครื่องหมายโดยใช้พารามิเตอร์การปรับแต่งเครื่องหมายที่ระบุไว้ข้างต้น

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

กรองเครื่องหมายที่มองเห็นได้

ตัวอย่างต่อไปนี้แสดงวิธีกรองเครื่องหมายยานพาหนะที่จะแสดง ทำตามรูปแบบนี้เพื่อกรองตัวทำเครื่องหมายโดยใช้พารามิเตอร์การปรับแต่งเครื่องหมายที่ระบุไว้ข้างต้น

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

ใช้การปรับแต่งเส้นประกอบเมื่อติดตามรถส่งของ

คุณสามารถใช้ JavaScript Fleet Tracking Library เพื่อปรับแต่งรูปลักษณ์และความรู้สึกของเส้นทางของรถที่ขับตามมาบนแผนที่ได้ ไลบรารีจะสร้างออบเจ็กต์ google.maps.Polyline สำหรับพิกัดแต่ละคู่ในเส้นทางที่ใช้งานอยู่หรือที่เหลืออยู่ของรถ คุณจัดรูปแบบออบเจ็กต์ Polyline ได้โดยการระบุการปรับแต่งเส้นประกอบ จากนั้นไลบรารีจะใช้การกำหนดค่าเหล่านี้ใน 2 สถานการณ์ ได้แก่ ก่อนเพิ่มออบเจ็กต์ลงในแผนที่ และเมื่อข้อมูลที่ใช้สำหรับออบเจ็กต์มีการเปลี่ยนแปลง

คุณกำหนดชุดของ PolylineOptions ให้ใช้กับออบเจ็กต์ Polyline ที่ตรงกันทั้งหมดเมื่อสร้างหรืออัปเดตวัตถุได้ ซึ่งคล้ายกับการปรับแต่งเครื่องหมาย

ในทำนองเดียวกัน คุณสามารถระบุฟังก์ชันการกำหนดเองได้ ฟังก์ชันการปรับแต่งช่วยให้สามารถจัดรูปแบบออบเจ็กต์แต่ละรายการตามข้อมูลที่ส่งโดย Fleet Engine ฟังก์ชันนี้จะเปลี่ยนรูปแบบของวัตถุแต่ละรายการได้โดยอิงตามสถานะของยานพาหนะในปัจจุบัน เช่น การให้สีวัตถุ Polyline เป็นเฉดสีที่ลึกขึ้น หรือทำให้วัตถุหนาขึ้นเมื่อพาหนะเคลื่อนที่ช้าลง คุณยังเข้าร่วมกับแหล่งที่มาภายนอก Fleet Engine และจัดรูปแบบออบเจ็กต์ Polyline โดยอิงตามข้อมูลดังกล่าวได้อีกด้วย

คุณระบุการปรับแต่งได้โดยใช้พารามิเตอร์ที่มีให้ใน FleetEngineDeliveryVehicleLocationProviderOptions คุณสามารถตั้งค่ากำหนดสถานะเส้นทางต่างๆ ในการเดินทางของรถ เช่น เดินทางแล้ว กำลังเดินทาง หรือยังไม่ได้เดินทาง โดยมีพารามิเตอร์ดังนี้

เปลี่ยนการจัดรูปแบบของวัตถุ Polyline โดยใช้ PolylineOptions

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าการจัดรูปแบบสำหรับออบเจ็กต์ Polyline ด้วย PolylineOptions ทำตามรูปแบบนี้เพื่อปรับแต่งการจัดรูปแบบของออบเจ็กต์ Polyline โดยใช้การปรับแต่งโพลีไลน์แบบใดก็ได้ที่แสดงก่อนหน้านี้

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

เปลี่ยนการจัดรูปแบบวัตถุ Polyline โดยใช้ฟังก์ชันการปรับแต่ง

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

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

ควบคุมการเปิดเผยของ Polyline ออบเจ็กต์

โดยค่าเริ่มต้น ระบบจะแสดงวัตถุทั้งหมด Polyline รายการ หากต้องการทำให้ออบเจ็กต์ Polyline ไม่ปรากฏ ให้ตั้งค่าพร็อพเพอร์ตี้ visible ของออบเจ็กต์ดังกล่าว ดังนี้

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

แสดง InfoWindow สำหรับยานพาหนะหรือเครื่องหมายระบุตำแหน่ง

คุณสามารถใช้ InfoWindow เพื่อแสดงข้อมูลเพิ่มเติมเกี่ยวกับยานพาหนะหรือเครื่องหมายระบุตำแหน่ง

ตัวอย่างต่อไปนี้แสดงวิธีสร้าง InfoWindow และแนบไว้กับเครื่องหมายยานพาหนะ

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.   
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.   
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

ปิดใช้การปรับให้พอดีอัตโนมัติ

คุณสามารถหยุดแผนที่ไม่ให้ปรับให้พอดีกับวิวพอร์ตกับยานพาหนะและเส้นทางที่คาดไว้โดยอัตโนมัติได้โดยปิดใช้งานการปรับให้พอดีอัตโนมัติ ตัวอย่างต่อไปนี้แสดงวิธีปิดใช้การปรับให้พอดีอัตโนมัติเมื่อกําหนดค่ามุมมองแผนที่การแชร์เส้นทาง

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

แทนที่แผนที่ที่มีอยู่

คุณสามารถแทนที่แผนที่เดิมซึ่งมีเครื่องหมายหรือการปรับแต่งอื่นๆ โดยไม่สูญเสียการปรับแต่งเหล่านั้น

ตัวอย่างเช่น สมมติว่าคุณมีหน้าเว็บที่มีเอนทิตี google.maps.Map มาตรฐานซึ่งมีเครื่องหมายแสดงอยู่

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

วิธีเพิ่มไลบรารี JavaScript Journey Share ซึ่งรวมถึง Fleet Tracking

  1. เพิ่มโค้ดที่ใช้เป็นค่าเริ่มต้นสำหรับโทเค็นการตรวจสอบสิทธิ์
  2. เริ่มต้นผู้ให้บริการตำแหน่งในฟังก์ชัน initMap()
  3. เริ่มต้นมุมมองแผนที่ในฟังก์ชัน initMap() มุมมองนี้มีแผนที่
  4. ย้ายการปรับแต่งของคุณลงในฟังก์ชัน Callback สำหรับการเริ่มต้นมุมมองแผนที่
  5. เพิ่มไลบรารีตำแหน่งลงในตัวโหลด API

ตัวอย่างต่อไปนี้แสดงการเปลี่ยนแปลงที่จะเกิดขึ้น

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

mapView.addListener('ready', () => {
  locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };
}
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

ตอนนี้หากคุณขับรถนำส่งซึ่งมีรหัสที่ระบุไว้ใกล้กับ Uluru ตอนนี้ก็จะแสดงบนแผนที่ด้วย