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

เอกสารนี้เป็นเอกสารฉบับปรับปรุงของบทความเก่าที่ใช้ GMP API เวอร์ชันเก่า เนื้อหานี้อัปเดตเป็น Places API เวอร์ชันใหม่ที่เปิดตัวในปี 2023-24 และ Routes API ที่เปิดตัวในปี 2023

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

แผนภาพระบบ

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

ตัวอย่างที่ 1 - สถานที่ท่องเที่ยวที่ไม่มีลานจอดรถ

เลือกตำแหน่งที่ไม่ได้เชื่อมต่อกับริมถนนโดยตรงเพื่อให้ต้องเรียกข้อมูลเส้นทางแยกต่างหาก ปลายทางคือมหาวิหารน็อทร์-ดามในปารีส และเราจะใช้สถานีรถไฟ Gare de l'Est เป็นจุดเริ่มต้น (48.87697775149635, 2.3592247806755564)

Gare l'Est

คนขับรถจะออกจากสถานีประมาณ 16 นาทีทางเหนือของน็อทร์-ดาม Notre Dame เป็นสถานที่ท่องเที่ยวชื่อดังบนเกาะที่มีทางเข้าเป็นสะพาน ถนนบางสายเป็นทางเดียว และไม่มีที่จอดรถขนาดใหญ่อยู่บริเวณใกล้เคียง งานนี้จึงน่าจะมีความท้าทายที่น่าสนใจ

  1. คำขอ Places API

คําขอ Places API ตัวอย่างนี้ใช้การค้นหาข้อความเพื่อค้นหา Notre Dame ดูรายละเอียดได้ในเอกสารสำหรับนักพัฒนาซอฟต์แวร์ "$APIKEY" ในตัวอย่างเหล่านี้คือคีย์ API ที่คุณมีสำหรับ Google Maps Platform Places และ Routes API ที่เปิดใช้ในคอนโซล Google Cloud ดูคำอธิบายโดยละเอียดได้ที่เอกสารประกอบสำหรับการเริ่มต้นใช้งาน Google Maps Platform

คำขอ Places API ใหม่มีรูปแบบใหม่ ช่องคำตอบจะไม่เป็นแบบคงที่อีกต่อไป และในฐานะนักพัฒนาซอฟต์แวร์ คุณต้องกำหนด FieldMask ในส่วนหัว การใช้ fieldmask มีการระบุไว้ในเอกสารประกอบ

curl -X POST --data @notre_dame.json \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H 'X-Goog-FieldMask: places.id,places.displayName,places.formattedAddress,places.location' \
'https://places.googleapis.com/v1/places:searchText'

เมื่อใช้เนื้อหา "notre_date.json" สําหรับพารามิเตอร์การค้นหา ให้ทําดังนี้

{
   "textQuery": "Notre Dame, Paris",
   "languageCode": "en"
}

การตอบกลับคำขอข้างต้นจะให้พิกัดละติจูดและลองจิจูดต่อไปนี้

{
  "places": [
    {
      "id": "ChIJATr1n-Fx5kcRjQb6q6cdQDY",
      "formattedAddress": "6 Parvis Notre-Dame - Pl. Jean-Paul II, 75004 Paris, France",
      "location": {
        "latitude": 48.852968200000007,
        "longitude": 2.3499021
      },
      "displayName": {
        "text": "Cathédrale Notre-Dame de Paris",
        "languageCode": "en"
      }
    }
  ]
}

ดังที่คุณเห็น พิกัดดังกล่าวระบุตำแหน่งของมหาวิหารน็อทร์-ดาม

รูปภาพทางเข้า Notre Dame แผนที่ของบริเวณน็อทร์ดาม

ในฐานะนักพัฒนาแอปหรือผู้ให้บริการ คุณควรแจ้งให้โชเฟอร์ทราบโดยอัตโนมัติว่า "กำลังมองหาที่จอดรถใกล้กับ Notre Dame ใช่ไหม" หรือหากโชเฟอร์มียานพาหนะไฟฟ้า คุณอาจต้องค้นหาสถานีชาร์จ ประสบการณ์ของผู้ใช้จะแตกต่างกันไปโดยขึ้นอยู่กับอุปกรณ์และหน้าจอ แต่คุณอาจพิจารณาใช้ข้อความโต้ตอบที่มองไม่เห็นชัดเจนซึ่งจะหายไปหลังจากผ่านไปครู่หนึ่งในกรณีนี้ หากต้องการค้นหาที่จอดรถใกล้กับ Notre Dame ให้ทำการค้นหาสถานที่ใกล้เคียงของ Places API ด้วยประเภท "parking" และ "electric_vehicle_charging_station" ที่มีรัศมี 500 เมตร ตัวอย่างต่อไปนี้จะแสดงผลลัพธ์ที่เอียงไปทางพื้นที่จอดรถภายใน 500 เมตรจาก Notre Dame

curl -X POST -d '{
  "includedTypes": ["parking", "electric_vehicle_charging_station"],
  "maxResultCount": 10,
  "rankPreference": "DISTANCE",
  "locationRestriction": {
    "circle": {
      "center": {
        "latitude": 48.852968200000007,
        "longitude": 2.3499021},
      "radius": 500.0
    }
  }
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H "X-Goog-FieldMask: places.displayName,places.location" \
https://places.googleapis.com/v1/places:searchNearby

ผลการค้นหาแรกคือสถานีชาร์จที่ 48.854981, 2.350629 แต่ผลการค้นหาของคุณอาจแตกต่างออกไปเมื่อคุณเรียกใช้ตัวอย่างนี้ ใช้ตำแหน่งนี้ในส่วนถัดไปซึ่งเราจะส่งคำขอ Routes API

  1. **คําขอ Routes API **

หากต้องการค้นหาเส้นทางจากสถานีไปยังสถานีชาร์จใกล้กับ Notre Dame คุณต้องทำคําขอ Routes API เพียงตั้งค่าพารามิเตอร์ต้นทางและปลายทาง ดูตัวเลือกอื่นๆ ในเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์

curl -X POST -d '{
  "origin":{
    "location":{
      "latLng":{
        "latitude": 48.87697775149635,
        "longitude": 2.3592247806755564
      }
    }
  },
  "destination":{
    "location":{
      "latLng":{
       "latitude": 48.854981,
        "longitude": 2.350629
      }
    }
  },
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE",
  "departureTime": "2024-05-16T15:01:23.045123456Z",
  "computeAlternativeRoutes": false,
  "routeModifiers": {
    "avoidTolls": false,
    "avoidHighways": false,
    "avoidFerries": false
  },
  "languageCode": "en-US",
  "units": "METRIC"
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.legs,routes.polyline.encodedPolyline' \
'https://routes.googleapis.com/directions/v2:computeRoutes'

โดยปกติแล้วการตอบกลับของ Routes API จะมีคำแนะนำเส้นทางหลายรายการ หากต้องการรวมข้อมูลเส้นทางในการตอบกลับ ให้กําหนด "routes.legs" ในฟิลด์มาสก์ เส้นทางแต่ละเส้นทางประกอบด้วย "ช่วง" หลายช่วง และแต่ละช่วงประกอบด้วย "ขั้นตอน" หลายขั้นตอนที่แสดงระยะทางและพิกัดการเดินทาง หากต้องการค้นหาพิกัดสุดท้ายที่เข้าถึงได้ด้วยรถยนต์ ให้ใช้ช่อง "endLocation" ของขั้นตอนสุดท้ายของระยะทางสุดท้ายในเส้นทางที่คุณเลือก "latitude": 48.854937299999996, "longitude": 2.3505841999999997

สถานที่นี้อาจไม่ใช่ตัวเลือกแรก แต่เมื่อดูแผนที่หรือ Google Street View คุณจะพบว่าสถานที่นี้อยู่ห่างจาก Notre Dame โดยใช้เวลาเดินเพียง 6-7 นาที

เส้นทางไปยัง Notre Dame

เส้นทางเดินเท้าจากจุดจอดรถของสถานีชาร์จไปยังมหาวิหารนอเทรอดาม

สรุปสำหรับตัวอย่างที่ 1

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

  • คำขอการค้นหาข้อความของ Places API เพื่อค้นหาพิกัดของ Notre Dame
  • การค้นหาสถานที่ใกล้เคียงของ Places API เพื่อค้นหาพื้นที่จอดรถที่มีสถานีชาร์จรถยนต์ไฟฟ้าภายในระยะ 500 เมตรจากพิกัดเหล่านั้น
  • คำขอ Routes API เพื่อค้นหาเส้นทางไปยังสถานีชาร์จ

ตัวอย่างที่ 2 - การนำทางไปยังอาคารผู้โดยสารในสนามบินขนาดใหญ่

แผนที่สนามบิน Heathrow

ลองดูตัวอย่างอื่นที่คนขับพยายามไปยังพื้นที่ขนาดใหญ่ซึ่งมีสถานที่ตั้ง จุดที่น่าสนใจ หรือจุดส่งผู้โดยสารหลายแห่ง คนขับกำลังออกจากสนามกีฬาเวมบลีย์ สหราชอาณาจักร (51.557263604707224, -0.2794575145680608) และพยายามไปที่อาคารผู้โดยสาร 5 ของสนามบินลอนดอนฮีทโธรว์

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

curl -X POST -d '{
  "input": "Heathrow",
  "includedPrimaryTypes": ["airport"]
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
https://places.googleapis.com/v1/places:autocomplete

การค้นหาข้างต้นแสดงรายการเทอร์มินอลและจุดส่งสินค้าแต่ละแห่งที่เทอร์มินอลเหล่านั้น จากรายการผลการค้นหา เราพบ "อาคาร 5 ของสนามบิน Heathrow ในลอนดอน" และรหัสสถานที่

"place_id" : "ChIJo21hnPxxdkgRksRL0KQRWII",

การใช้พารามิเตอร์ "placeId" ช่วยให้เราสามารถบอก Routes API ว่าเราพยายามไปถึงสถานที่หนึ่งๆ ไม่ใช่พิกัดที่กำหนดเอง

curl -X POST -d '{
  "origin":{
    "location":{
      "latLng":{
        "latitude": 51.557263604707224,
        "longitude": -0.2794575145680608
      }
    }
  },
  "destination":{
    "placeId": "ChIJo21hnPxxdkgRksRL0KQRWII"
  },
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE",
  "departureTime": "2024-05-16T15:01:23.045123456Z",
  "computeAlternativeRoutes": false,
  "languageCode": "en-US",
  "units": "METRIC"
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.legs,routes.polyline.encodedPolyline' \
'https://routes.googleapis.com/directions/v2:computeRoutes'

อีกครั้ง เช่นเดียวกับตัวอย่างก่อนหน้านี้ เมื่ออ่านทุกขั้นตอนในการตอบกลับ JSON คุณจะเห็นส่วนสุดท้ายของการเดินทางและพิกัดละติจูดและลองจิจูดของสถานที่สิ้นสุด (51.4714348, "longitude": -0.48967890000000003)

Terminal 5 Street View

สรุปสำหรับตัวอย่างที่ 2

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

  • คำขอ Autocomplete (ใหม่) ของ Places API เพื่อค้นหาอาคาร 5 ของสนามบิน Heathrow
  • คําขอ Routes API เพื่อขอเส้นทางจาก Wembley ไปยังเทอร์มินัล 5

ตัวอย่างนี้เป็นเพียงตัวอย่างเล็กๆ น้อยๆ ของฟีเจอร์ใหม่ใน Places API ลองดูสถานที่ประเภทใหม่ เช่น สนามบินและสนามบินนานาชาติ

บทสรุป

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

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

การดำเนินการถัดไป

การเริ่มต้นใช้งาน GMP : https://developers.google.com/maps/get-started

แหล่งข้อมูลอื่นๆ ที่แนะนํา

เอกสารประกอบเกี่ยวกับฟีเจอร์เติมข้อความอัตโนมัติ (ใหม่) ของ Places API : https://developers.google.com/maps/documentation/places/web-service/place-autocomplete

เอกสารประกอบของ Routes API : https://developers.google.com/maps/documentation/routes

ผู้ร่วมให้ข้อมูล

ผู้เขียนหลัก: Mikko Toivanen | Google Maps Platform Solutions Engineer