Google Maps เป็นบริการแผนที่บนเว็บที่ให้บริการพื้นที่ทางภูมิศาสตร์และแผนที่ถนนสำหรับทุกที่ในโลก อย่างไรก็ตาม เจ้าของเว็บไซต์บางรายได้รับข้อผิดพลาด “หน้านี้ไม่สามารถโหลด Google Maps ได้อย่างถูกต้อง ” แทนที่จะโหลด Google Map ข้อผิดพลาดนี้สามารถแสดงเป็น “หน้านี้ไม่ได้โหลด Google Maps อย่างถูกต้อง ดูคอนโซล JavaScript สำหรับรายละเอียดทางเทคนิค ”.
หมายเหตุ: โซลูชันนี้กำหนดเป้าหมายไปยังเจ้าของเว็บไซต์และไม่ใช่ผู้ใช้ทั่วไป
อะไรทำให้ Google แผนที่โหลดไม่ถูกต้อง
ปลั๊กอิน Google Map จะทำงานได้ดีโดยไม่มีข้อผิดพลาด แต่สิ่งต่างๆ ได้เปลี่ยนไปในช่วงไม่กี่ปีที่ผ่านมาเมื่อ Google เปลี่ยนกฎสำหรับเว็บไซต์ที่มีแผนที่แบบฝัง เจ้าของเว็บไซต์ก่อนหน้านี้สามารถทำงานนี้ได้โดยเพียงแค่ใช้โค้ดที่ฝัง แต่ตอนนี้พวกเขาต้องการคีย์ API เพื่อให้ Google Map ทำงานได้อย่างถูกต้อง หากคุณได้เพิ่มคีย์ API แล้ว คุณสามารถดูแท็บ "ตรวจสอบองค์ประกอบ -> คอนโซล" ใน Chrome เพื่อดูสาเหตุที่ Google ไม่อนุญาตให้ใช้ Maps บนไซต์ของคุณ อาจเป็นเพราะคีย์ไม่ถูกต้อง มีการจำกัดคีย์ ฯลฯ
เพิ่มคีย์ Google API ลงในการตั้งค่าไซต์ของคุณ
เพื่อให้ Google Map ทำงานสำหรับโครงการหรือเว็บไซต์ของคุณ คุณต้องสร้างคีย์ Google API และเพิ่มในการตั้งค่าของไซต์ของคุณ คุณต้องลงชื่อเข้าใช้ Google Developers เพื่อสร้างคีย์และแก้ไขข้อผิดพลาดอื่นๆ
หากคุณได้แทรกสคริปต์สำหรับแผนที่ด้วยตนเอง สคริปต์นั้นควรจะเป็นดังนี้ด้วยรหัส API ของคุณแทนที่ 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 ที่ได้รับความนิยมสูงสุด โดยมีเว็บไซต์มากกว่า 172 ล้านแห่งใช้งาน เราจะสาธิตขั้นตอนสำหรับ WordPress เท่านั้น
- ไปที่การตั้งค่าปลั๊กอิน ไม่ว่าคุณจะใช้สำหรับ Google แผนที่ และควรมีตัวเลือกในการเพิ่มคีย์ API หากไม่มี คุณอาจใช้ปลั๊กอินรุ่นเก่าหรือปลั๊กอินที่ล้าสมัย
- เปิดการตั้งค่าไว้สำหรับคีย์ API บนไซต์ WordPress ของคุณ
- ไปที่ Cloud Resource Manager ของ Google
- ลงชื่อเข้าใช้ Google หากยังไม่ได้เข้าสู่ระบบ
- คลิก “สร้างโครงการ ” ตั้งชื่อโครงการแล้วคลิก “สร้าง ”
- ไปที่หน้าเว็บ Enable API ของ Google
- คลิก “เลือกโครงการ ” ที่ด้านบน จากนั้นเลือกโครงการใหม่ที่คุณเพิ่งสร้างและดำเนินการต่อ
- กด “เปิดใช้งาน API และบริการ ”
- ค้นหา “Maps JavaScript API ” และเปิดมัน
- จากนั้นกดปุ่ม “เปิดใช้งาน " ปุ่ม
- คลิกเมนูการนำทาง เลือก “API &บริการ ” และไปที่ “ข้อมูลประจำตัว ”
- คลิกเมนูดร็อปดาวน์สร้างข้อมูลรับรอง และเลือก “คีย์ API ”
หมายเหตุ :คุณสามารถกำหนดให้เป็น Restrict Key เพื่อป้องกันการใช้โดยไม่ได้รับอนุญาตได้หากต้องการ - คลิก “ปิด ” จากนั้นคลิกที่คีย์ที่สร้างขึ้น
- เลือก “ผู้อ้างอิง HTTP ” ในข้อจำกัดการสมัคร
- เพิ่ม URL เว็บไซต์ของคุณแล้วคลิก “บันทึก ”
- คัดลอกคีย์แล้วกลับไปที่ไซต์ WordPress
- เลื่อนลงด้านล่างแผงด้านซ้ายและไปที่ “การตั้งค่า ”
- คุณจะพบตัวเลือกสำหรับ “คีย์ Google API ” เปิดแล้ววางคีย์ที่นั่น
- บันทึกการตั้งค่า ไปที่เพจของคุณและรีเฟรช
หมายเหตุ: ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานการเรียกเก็บเงินของคุณแล้ว เนื่องจาก Google ให้เครดิตมูลค่า 300$ เท่านั้น หรือใช้งานฟรี 12 เดือน (แบบใดที่ลดได้เร็วกว่า) หลังจากนั้น จะต้องตั้งค่าและดำเนินการเรียกเก็บเงิน
