การขอ Google Maps API เพื่อนำแผนที่ของ Google มาติดบนเว็บไซต์ของคุณ

การขอ Google Maps API เพื่อนำแผนที่ของ Google มาติดบนเว็บไซต์ของคุณ สามารถทำตามขั้นตอนต่อไปนี้ได้เลย:

1. สมัครบัญชี Google Cloud

ก่อนใช้งาน Google Maps API คุณต้องมีบัญชี Google และสมัครใช้งาน Google Cloud Platform (GCP)

  1. ไปที่ Google Cloud Console
  2. ลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณ
  3. คลิก My first project แล้วกด New Project (สร้างโครงการใหม่)
  4. ตั้งชื่อโครงการของคุณ (เช่น My Website Map)
  5. คลิก Create เพื่อสร้างโปรเจกต์

2. เปิดใช้งาน Google Maps API

  1. ไปที่ Navigation Menu (≡) > APIs & Services > Library
  2. ค้นหา Maps JavaScript API และคลิกเข้าไป
  3. กด Enable เพื่อเปิดใช้งาน API
  4. หากต้องการใช้งาน Google Places API หรือ Geocoding API สามารถค้นหาและเปิดใช้งานในลักษณะเดียวกัน

3. สร้าง API Key

  1. ไปที่ Navigation Menu (≡) > APIs & Services > Credentials
  2. กด Create Credentials และเลือก API Key
  3. ระบบจะสร้าง API Key ให้คุณ ให้นำ Key นี้ไปใช้ในเว็บไซต์
  4. (แนะนำ) คลิก API Key และเลือก Restrict Key เพื่อจำกัดการใช้งาน API ให้เฉพาะโดเมนของคุณ

4. ตั้งค่าการจำกัดสิทธิ์ API Key (Security)

  1. ไปที่ Credentials แล้วเลือก API Key ของคุณ
  2. ในส่วน Application restrictions เลือก HTTP referrers (websites) แล้วเพิ่ม URL เว็บไซต์ของคุณ เช่น:
    https://yourwebsite.com/*
  3. ในส่วน API restrictions เลือกเฉพาะ Maps JavaScript API
  4. กด Save เพื่อบันทึก

5. เพิ่ม Google Maps ลงในเว็บไซต์

เมื่อคุณมี API Key แล้ว ให้นำไปใช้กับเว็บไซต์ของคุณโดยเพิ่มโค้ดนี้เข้าไปใน HTML:

html
<!DOCTYPE html>
<html lang="th">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>แผนที่ Google Maps</title>
        <style>
                #map {
                        height: 500px;
                        width: 100%;
                }
        </style>
</head>
<body>        <h2>Google Maps บนเว็บไซต์ของคุณ</h2>
        <div id=“map”></div>        <script>
                function initMap() {
                        var location = { lat: 18.7883, lng: 98.9853 }; // พิกัดของเชียงใหม่
                        var map = new google.maps.Map(document.getElementById(“map”), {
                                zoom: 13,
                                center: location
                        });
                        var marker = new google.maps.Marker({
                                position: location,
                                map: map
                        });
                }
        </script>        <script async defer src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”></script>

</body>
</html>

👉 เปลี่ยน YOUR_API_KEY เป็น API Key ที่คุณสร้างขึ้น

6. ทดสอบและปรับแต่ง

  • เปิดไฟล์ HTML ในเบราว์เซอร์เพื่อตรวจสอบว่า Google Maps แสดงผลถูกต้องหรือไม่
  • หากเกิดข้อผิดพลาด ให้เปิด Developer Console (F12 ใน Chrome) เพื่อตรวจสอบ Error และแก้ไข

7. เปิดใช้งานการเรียกเก็บเงิน (Billing)

Google Maps API ต้องเปิดใช้ Billing Account แต่คุณจะได้รับเครดิตฟรี $200 ต่อเดือน ซึ่งเพียงพอสำหรับการใช้งานทั่วไป เช่น:

  • แสดงแผนที่บนเว็บไซต์
  • ใช้ฟีเจอร์เส้นทาง หรือสถานที่

ไปที่ Billing in Google Cloud เพื่อเพิ่มวิธีชำระเงิน

สรุป

  1. สมัครบัญชี Google Cloud
  2. สร้าง Project และเปิด Maps JavaScript API
  3. สร้าง API Key และจำกัดสิทธิ์ให้ปลอดภัย
  4. ใส่โค้ด Google Maps ในเว็บไซต์ของคุณ
  5. ทดสอบการทำงานและตรวจสอบข้อผิดพลาด