Google Maps คือบริการแผนที่เว็บ แต่เจ้าของเว็บบางคนเจอ Error: "This page can't load Google maps correctly" หรือ "See the JavaScript console for technical details"
หมายเหตุ: บทความนี้สำหรับเจ้าของเว็บ ไม่ใช่ผู้ใช้ทั่วไป
สาเหตุ Google Maps โหลดไม่ได้
ก่อนหน้า Embed Code ใช้ได้เลย แต่ Google เปลี่ยนกติกา: ต้องมี API Key ถ้ามี Key แล้วยัง Error ให้ดู Inspect Element > Console ใน Chrome จะเห็นสาเหตุ: Key ผิด, Key ถูก Restrict, ฯลฯ
เพิ่ม Google API Key ในเว็บไซต์
สร้าง API Key ใน Google Developers แล้วใส่ใน Setting ของเว็บ หากใส่ Script เอง ให้ใส่ Key แทน YOUR_API_KEY:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
ตัวอย่างขั้นตอนสำหรับ WordPress (CMS ยอดนิยม):
- เปิด Plugin Settings ของ Google Maps ที่ใช้ > หาช่อง API Key (ถ้าไม่มี อาจเป็น Plugin เก่า)
- เก็บหน้าต่าง Settings ไว้
- ไป Google Cloud Resource Manager
- Sign in Google > Create Project > ตั้งชื่อ > Create
- ไป Enabling API webpage
- Select a Project > เลือก Project ที่สร้าง > Continue
- Enable APIs and Services
- ค้นหา Maps JavaScript API > เปิด > Enable
- Menu > APIs & Services > Credentials
- Create Credentials > API Key (Restrict Key ได้ถ้าต้องการ)
- Close > คลิก Key ที่สร้าง
- Application Restrictions เลือก HTTP referrers
- เพิ่ม URL เว็บไซต์ > Save
- Copy Key > กลับ WordPress > Settings > Google API KEY > Paste > Save
- Refresh หน้าเว็บทดสอบ
สำคัญ: ต้องเปิด Billing ใน Google Cloud (ฟรี 300$ หรือ 12 เดือน ก่อนจะต้องจ่าย)
