Google Maps API คืออะไร วิธีขอ API Key ราคา และการคุมค่าใช้จ่าย

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

Google Maps API คืออะไร และต่างจากการฝังแผนที่ธรรมดายังไง

ต่างกันที่ระดับการควบคุม การฝังแผนที่ธรรมดา (โค้ด iframe ที่กดจากหน้า Google Maps) คือแผนที่นิ่ง ๆ ที่คุณแก้อะไรไม่ได้นอกจากตำแหน่งกับขนาด ขณะที่ Google Maps API ให้คุณสั่งงานแผนที่ด้วยโค้ดได้ เช่น วางหมุดหลายร้อยจุดจากฐานข้อมูล เปลี่ยนสีแผนที่ให้เข้ากับแบรนด์ คำนวณระยะทางจากคลังสินค้าถึงหน้างาน หรือแปลงที่อยู่ที่ลูกค้าพิมพ์ให้เป็นพิกัดละติจูด-ลองจิจูดเพื่อเก็บลงระบบ

สรุปเป็นหลักคิดง่าย ๆ คือ ถ้าต้องการแค่ “โชว์ว่าร้านอยู่ตรงนี้” ยังไม่จำเป็นต้องใช้ API แต่ถ้าแผนที่ต้องคุยกับข้อมูลของธุรกิจคุณ เช่น ดึงสาขาจากฐานข้อมูล กรองตามจังหวัด หรือคำนวณค่าขนส่ง จุดนั้นคือจุดที่ต้องใช้ Google Maps API

Google Maps Platform มี API อะไรบ้าง ใช้ตัวไหนตอนไหน

Google Maps Platform แบ่งบริการเป็น 3 กลุ่มหลัก คือ Maps (แสดงแผนที่), Routes (เส้นทางและระยะทาง) และ Places (ข้อมูลสถานที่และที่อยู่) เลือกตามโจทย์ได้ตามตารางนี้

ข้อควรรู้: Google ทยอยย้ายบริการรุ่นเก่าไปเป็นรุ่นใหม่ เช่น Directions API และ Distance Matrix API ถูกรวมเข้าเป็น Routes API และ Places API มีเวอร์ชันใหม่ (Places API New) ถ้าเริ่มโปรเจกต์ใหม่ควรเริ่มที่เวอร์ชันใหม่เลย เพราะเวอร์ชันเก่าจะไม่ได้ฟีเจอร์เพิ่มแล้ว

วิธีขอ Google Maps API Key ทีละขั้น

ขอ API Key ได้ที่ Google Cloud Console ใช้เวลาประมาณ 10–15 นาที ถ้ามีบัตรเครดิตพร้อมแล้ว ทำตามลำดับนี้

1. เข้า Google Cloud Console ด้วยบัญชี Google ที่ต้องการให้เป็นเจ้าของโปรเจกต์ (แนะนำใช้อีเมลบริษัท ไม่ใช่อีเมลส่วนตัวของพนักงาน)
2. สร้างโปรเจกต์ใหม่ ตั้งชื่อให้รู้เรื่อง เช่น company-website-maps เพื่อแยกค่าใช้จ่ายและสิทธิ์ออกจากโปรเจกต์อื่น
3. ผูกบัญชีชำระเงิน (Billing) ใส่บัตรเครดิต/เดบิตที่รองรับ ถ้าไม่เปิด billing แผนที่จะขึ้นเป็นสีเทาพร้อมข้อความ “For development purposes only”
4. เปิดใช้งาน API ที่ต้องใช้ ไปที่ APIs & Services → Library แล้วกด Enable เฉพาะตัวที่ใช้จริง เช่น Maps JavaScript API และ Geocoding API
5. สร้าง API Key ที่เมนู APIs & Services → Credentials → Create credentials → API key
6. จำกัดสิทธิ์คีย์ทันที ตั้ง Application restrictions และ API restrictions ตามหัวข้อถัดไป (ข้อนี้อย่าข้าม)
7. ตั้งงบและการแจ้งเตือน ที่ Billing → Budgets & alerts เพื่อให้มีอีเมลเตือนก่อนค่าใช้จ่ายเกินที่ตั้งไว้

ถ้าเว็บของคุณให้ผู้รับจ้างภายนอกดูแล ให้บริษัทเป็นเจ้าของโปรเจกต์ Google Cloud เอง แล้วเพิ่มผู้พัฒนาเข้ามาเป็นผู้ใช้ร่วม ไม่ควรให้คีย์ไปอยู่ในบัญชีของ agency เพราะเวลาเปลี่ยนทีมจะย้ายลำบาก

จำกัดสิทธิ์ API Key อย่างไรไม่ให้คนอื่นเอาไปใช้จนบิลบาน

คีย์ที่ใช้กับ Maps JavaScript API จะโผล่อยู่ในซอร์สโค้ดหน้าเว็บ ใครก็เห็นได้ ดังนั้นการป้องกันที่ใช้จริงคือการล็อกว่า “คีย์นี้ถูกเรียกจากที่ไหนได้” ไม่ใช่การซ่อนคีย์

• Application restrictions — คีย์ฝั่งหน้าเว็บให้เลือก Websites (HTTP referrers) แล้วใส่โดเมนของคุณ เช่น https://yourdomain.com/* และ https://www.yourdomain.com/* ส่วนคีย์ที่เรียกจากเซิร์ฟเวอร์ให้เลือก IP addresses และใส่ IP ของเซิร์ฟเวอร์
• API restrictions — เลือกเฉพาะ API ที่คีย์นั้นต้องใช้ ไม่เปิด “Don’t restrict key” ทิ้งไว้
• แยกคีย์ตามงาน — คีย์สำหรับหน้าเว็บ, คีย์สำหรับ backend, คีย์สำหรับแอปมือถือ, คีย์สำหรับเครื่อง dev ควรแยกกัน เวลามีปัญหาจะปิดเฉพาะตัวที่รั่วได้
• ห้ามใส่คีย์ฝั่งเซิร์ฟเวอร์ในโค้ดหน้าเว็บ — คีย์ที่เรียก Geocoding หรือ Places จากฝั่งเซิร์ฟเวอร์ต้องเก็บใน environment variable เท่านั้น
• ตั้ง quota รายวัน — กำหนดเพดานจำนวนครั้งต่อวันไว้ ถ้ามีคนยิงถล่ม ระบบจะหยุดที่เพดาน ไม่ใช่หยุดที่วงเงินบัตรเครดิต

ราคา Google Maps API คิดอย่างไร และมีโควตาฟรีเท่าไหร่

Google Maps API คิดเงินตามจำนวนครั้งที่เรียกใช้ (per request หรือ per map load) แยกราคาตาม SKU ของแต่ละบริการ ไม่ใช่ค่ารายเดือนเหมา ๆ และตั้งแต่ต้นปี 2025 Google ได้ปรับรูปแบบโควตาฟรีจากเดิมที่ให้เครดิต 200 ดอลลาร์ต่อเดือน มาเป็นการให้ จำนวนครั้งเรียกใช้ฟรีต่อเดือนแยกตามระดับบริการ คือ Essentials, Pro และ Enterprise

ส่วนราคาเมื่อเกินโควตาฟรี อยู่ในระดับหลักดอลลาร์ต่อ 1,000 ครั้ง โดยกลุ่ม Maps และ Geocoding จะถูกกว่ากลุ่ม Places ค่อนข้างมาก ตัวอย่างที่พบบ่อย

• โหลดแผนที่แบบ Dynamic Maps อยู่ในช่วงประมาณ 7 ดอลลาร์ต่อ 1,000 ครั้ง
• Geocoding (แปลงที่อยู่เป็นพิกัด) อยู่ในช่วงประมาณ 5 ดอลลาร์ต่อ 1,000 ครั้ง
• Place Details ซึ่งเป็นตัวที่แพงกว่า อยู่ในช่วงหลักสิบดอลลาร์ต่อ 1,000 ครั้ง ขึ้นกับว่าขอฟิลด์ข้อมูลอะไรบ้าง
• Maps Embed API ใช้ได้ฟรีไม่จำกัดจำนวน ซึ่งเป็นเหตุผลที่เว็บธุรกิจส่วนใหญ่ควรเริ่มจากตัวนี้

ตัวเลขเหล่านี้เป็นราคาอ้างอิงเพื่อให้เห็นภาพลำดับความสำคัญของต้นทุน ก่อนวางงบจริงควรเปิดหน้า Pricing ของ Google Maps Platform เทียบกับ SKU ที่ระบบคุณเรียกใช้จริง เพราะ Google ปรับโครงสร้างราคาเป็นระยะ

ตัวอย่างประมาณค่าใช้จ่ายจริง

สมมติเว็บโรงงานแห่งหนึ่งมีหน้า “แผนที่โรงงาน” ที่คนเข้า 3,000 ครั้ง/เดือน และมีฟอร์มขอใบเสนอราคาที่ใช้ Autocomplete อีก 400 ครั้ง/เดือน กรณีนี้ทั้งสองรายการยังอยู่ในโควตาฟรี ค่าใช้จ่ายจึงมีแนวโน้มเป็น 0 บาท แต่ถ้าเป็นเว็บที่มีแผนที่โหลดทุกหน้าและมีผู้ใช้หลักแสน page view ต่อเดือน ค่าใช้จ่ายจะเริ่มเป็นหลักพันถึงหลักหมื่นบาทต่อเดือน — ความต่างอยู่ที่ “ออกแบบให้เรียกแผนที่เมื่อจำเป็น” หรือ “เรียกทุกครั้งที่โหลดหน้า”

7 วิธีคุมค่าใช้จ่าย Google Maps API ไม่ให้บานปลาย

1. ใช้ Maps Embed API หรือ Static Maps ในหน้าที่แค่ต้องการโชว์ตำแหน่ง ไม่ต้องใช้ Dynamic Maps
2. โหลดแผนที่เมื่อผู้ใช้กดดู (lazy load) เช่น แสดงภาพนิ่งก่อน แล้วเปลี่ยนเป็นแผนที่จริงเมื่อคลิก วิธีนี้ตัดจำนวน map load ได้มากในหน้าที่คนแค่เลื่อนผ่าน
3. แคชผลลัพธ์ Geocoding ที่อยู่สาขา ที่อยู่คลัง หรือที่อยู่ลูกค้าที่ไม่เปลี่ยน ควร geocode ครั้งเดียวแล้วเก็บพิกัดลงฐานข้อมูล ไม่ต้องยิงทุกครั้งที่เปิดหน้า (โปรดตรวจเงื่อนไขการเก็บข้อมูลใน Terms ของ Google ประกอบ เพราะบางข้อมูลมีข้อจำกัดระยะเวลาการเก็บ)
4. ทำ debounce ช่อง Autocomplete ให้ยิง request หลังผู้ใช้หยุดพิมพ์ประมาณ 300–500 มิลลิวินาที และใช้ session token เพื่อไม่ให้ถูกคิดเป็นหลายครั้ง
5. ขอเฉพาะฟิลด์ที่ใช้ ใน Place Details เพราะราคาผูกกับกลุ่มฟิลด์ที่ขอ ยิ่งขอเยอะยิ่งแพง
6. ตั้ง quota รายวันต่อ API ใน Google Cloud Console เป็นเพดานกันอุบัติเหตุ เช่น โค้ดวน loop ผิดพลาด
7. ตั้ง Budget alert หลายระดับ เช่น เตือนที่ 50% / 90% / 100% ของงบที่ตั้งไว้ และส่งเข้าอีเมลผู้ดูแลมากกว่าหนึ่งคน

ใส่แผนที่บนเว็บ WordPress ควรใช้ Embed หรือ JavaScript API

ถ้าเป้าหมายคือให้ลูกค้ากดนำทางมาที่ร้านหรือโรงงาน ให้ใช้ Maps Embed API เพราะฟรีและติดตั้งง่ายที่สุด เลือกใช้ JavaScript API เมื่อมีเงื่อนไขต่อไปนี้อย่างน้อยหนึ่งข้อ

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

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

ตัวอย่างโค้ดเริ่มต้น Maps JavaScript API

โครงสร้างพื้นฐานคือโหลดสคริปต์ของ Google พร้อม API Key แล้วสร้างแผนที่ลงใน div ที่กำหนดไว้ ตัวอย่างนี้แสดงแผนที่พร้อมหมุดหนึ่งจุด

<div id="map" style="height:400px"></div>

<script>
  async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

    const center = { lat: 18.7883, lng: 98.9853 }; // เชียงใหม่

    const map = new Map(document.getElementById("map"), {
      center: center,
      zoom: 15,
      mapId: "YOUR_MAP_ID"
    });

    new AdvancedMarkerElement({
      map: map,
      position: center,
      title: "สำนักงานของเรา"
    });
  }
</script>

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

ข้อควรรู้สองข้อ: หนึ่ง คลาส google.maps.Marker แบบเดิมถูกประกาศเป็น deprecated แล้ว โปรเจกต์ใหม่ควรใช้ AdvancedMarkerElement ซึ่งต้องมี Map ID จาก Cloud Console สอง การใช้ importLibrary จะโหลดเฉพาะไลบรารีที่ใช้ ทำให้หน้าเว็บเบากว่าการโหลดทั้งก้อน

SME โรงงาน และธุรกิจก่อสร้างใช้ Google Maps API ทำอะไรได้จริง

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

• คำนวณค่าขนส่งตามระยะทางอัตโนมัติ — ให้ลูกค้าใส่ที่อยู่หน้างาน ระบบดึงระยะทางจากคลังมาคูณอัตราค่าขนส่งต่อกิโลเมตร ออกเป็นตัวเลขในใบเสนอราคาทันที
• เช็กอิน–เช็กเอาต์หน้างานพร้อมพิกัด — ทีมติดตั้งหรือช่างถ่ายรูปงานแล้วระบบบันทึกพิกัดกับเวลาไว้เป็นหลักฐานประกอบการเบิกงวดงาน
• วางแผนคิวรถส่งของ — จัดลำดับจุดส่งในวันเดียวกันให้เส้นทางสั้นลง ลดค่าน้ำมันและจำนวนเที่ยว
• ตรวจพื้นที่ให้บริการ — กำหนดขอบเขตพื้นที่บริการเป็นรูปหลายเหลี่ยม ถ้าลูกค้าอยู่นอกเขตให้ระบบแจ้งค่าเดินทางเพิ่มแทนที่จะให้ฝ่ายขายมานั่งเช็กเอง
• ช่องกรอกที่อยู่แบบ Autocomplete ในฟอร์ม — ลดที่อยู่ตกหล่นและรหัสไปรษณีย์ผิด ซึ่งเป็นสาเหตุคลาสสิกของของส่งไม่ถึง
• แสดงแผนที่ที่ตั้งโรงงานพร้อมเส้นทางเข้าซอย — สำคัญกับลูกค้า B2B ที่ต้องนำรถบรรทุกเข้ามารับสินค้า

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

ปัญหาและ error ที่เจอบ่อย พร้อมวิธีแก้

ทางเลือกอื่นแทน Google Maps API

ถ้าโจทย์คือลดต้นทุนหรือไม่ต้องการผูกกับบัตรเครดิต มีทางเลือกที่ใช้ได้จริงหลายตัว แต่ต้องยอมแลกบางอย่าง

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

เช็กลิสต์ก่อนเริ่มใช้ Google Maps API บนเว็บธุรกิจ

1. โปรเจกต์ Google Cloud อยู่ในชื่อบัญชีของบริษัท ไม่ใช่บัญชีส่วนตัวหรือของผู้รับจ้าง
2. เปิด billing แล้ว และมีผู้รับผิดชอบดูใบแจ้งหนี้ชัดเจน
3. Enable เฉพาะ API ที่ใช้ ไม่เปิดทิ้งไว้
4. แยกคีย์ frontend / backend และตั้ง restriction ครบทั้งสองแบบ
5. ตั้ง quota รายวัน และ budget alert อย่างน้อย 2 ระดับ
6. หน้าไหนไม่มีแผนที่ ต้องไม่โหลดสคริปต์แผนที่
7. ข้อมูลพิกัดที่ไม่เปลี่ยนถูกเก็บลงฐานข้อมูลแล้ว ไม่ยิง Geocoding ซ้ำ
8. แผนที่แสดงผลถูกต้องบนมือถือ และมีปุ่ม “นำทาง” ที่เปิดแอป Google Maps ได้
9. มีวิธีสำรองเมื่อ API ล่ม เช่น แสดงภาพแผนที่นิ่งกับที่อยู่เป็นข้อความ
10. ข้อมูลธุรกิจบน Google Business Profile ตรงกับที่อยู่บนเว็บ เพื่อให้ค้นหาแบบท้องถิ่นทำงานได้ดี

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