แก้ไข: หน้านี้ไม่สามารถโหลด Google Maps ได้อย่างถูกต้อง

วิธีการ



ลองใช้เครื่องมือของเราเพื่อกำจัดปัญหา

Google Maps เป็นบริการแผนที่บนเว็บที่ให้บริการพื้นที่ทางภูมิศาสตร์และแผนที่ถนนสำหรับทุกที่ในโลก อย่างไรก็ตามเจ้าของเว็บไซต์บางรายได้รับข้อผิดพลาด“ หน้านี้ไม่สามารถโหลด Google Maps ได้อย่างถูกต้อง ” แทนที่จะโหลด Google Map ข้อผิดพลาดนี้สามารถแสดงเป็น“ หน้านี้โหลด Google Maps ไม่ถูกต้อง ดูคอนโซล JavaScript สำหรับรายละเอียดทางเทคนิค ”.



อ๊ะ! เกิดข้อผิดพลาด - หน้านี้โหลด Google Maps ไม่ถูกต้อง



บันทึก: โซลูชันนี้มีเป้าหมายสำหรับเจ้าของเว็บไซต์ไม่ใช่ผู้ใช้ทั่วไป



อะไรทำให้ Google Maps โหลดไม่ถูกต้อง

แผนที่ของกูเกิล ปลั๊กอินจะทำงานได้ดีโดยไม่มีข้อผิดพลาดใด ๆ แต่ในช่วงสองสามปีที่ผ่านมามีการเปลี่ยนแปลงเมื่อ Google เปลี่ยนกฎสำหรับเว็บไซต์ที่มีแผนที่ในตัว เจ้าของเว็บไซต์สามารถทำงานนี้ได้ก่อนหน้านี้โดยใช้โค้ดฝังตัว แต่ตอนนี้พวกเขาต้องการคีย์ API เพื่อให้ Google Map ทำงานได้อย่างถูกต้อง หากคุณได้เพิ่มคีย์ API แล้วคุณสามารถดูแท็บ 'ตรวจสอบองค์ประกอบ -> คอนโซล' ใน Chrome เพื่อดูสาเหตุที่แท้จริงที่ Google ไม่อนุญาตให้ใช้ Maps บนไซต์ของคุณ อาจเป็นเพราะคีย์ไม่ถูกต้องคีย์ถูก จำกัด เป็นต้น

เพิ่ม Google API Key ในการตั้งค่าไซต์ของคุณ

ในการทำให้ Google Map ทำงานสำหรับโครงการหรือเว็บไซต์ของคุณคุณต้องสร้างคีย์ Google API และเพิ่มในการตั้งค่าของไซต์ของคุณ คุณต้องลงชื่อเข้าใช้ Google Developers เพื่อสร้างคีย์และแก้ไขข้อผิดพลาดอื่น ๆ

หากคุณแทรกสคริปต์สำหรับแผนที่ด้วยตนเองควรจะเป็นดังนี้พร้อมกับคีย์ API ของคุณแทน YOUR_API_KEY



  ไม่ตรงกัน ผัดผ่อน src='https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY& โทรกลับ = initMap 'ประเภท='text / javascript'>

เนื่องจาก WordPress เป็น CMS ที่ได้รับความนิยมมากที่สุดโดยมีเว็บไซต์มากกว่า 172 ล้านเว็บไซต์ใช้งาน เราจะสาธิตขั้นตอนสำหรับ WordPress เท่านั้น

  1. ไปที่การตั้งค่าปลั๊กอินไม่ว่าคุณจะใช้ Google Maps แบบใดและควรมีตัวเลือกในการเพิ่มคีย์ API หากไม่มีคุณอาจใช้ปลั๊กอินเวอร์ชันเก่าหรือปลั๊กอินที่ล้าสมัย

    ปลั๊กอิน Google API ใน WordPress

  2. เปิดการตั้งค่าไว้สำหรับคีย์ API บนไฟล์ ไซต์ WordPress .
  3. ไปที่ Cloud Resource Manager ของ Google
  4. ลงชื่อเข้าใช้ Google หากยังไม่ได้เข้าสู่ระบบ
  5. คลิก“ สร้างโครงการ ” ตั้งชื่อโครงการแล้วคลิก“ สร้าง '

    การสร้างโครงการ

  6. ไปที่ API การเปิดใช้งานของ Google หน้าเว็บ.
  7. คลิก“ เลือกโครงการ ” ด้านบนจากนั้นเลือกโปรเจ็กต์ใหม่ที่คุณเพิ่งสร้างและ ดำเนินการต่อ
  8. กด“ เปิดใช้งาน API และบริการ '
  9. ค้นหา ' Maps JavaScript API ” และเปิดมัน
  10. จากนั้นกดปุ่ม“ เปิดใช้งาน ปุ่ม '

    การเปิดใช้ API สำหรับโครงการ

  11. คลิกเมนูการนำทางเลือก“ API และบริการ ” และไปที่“ ข้อมูลรับรอง '
  12. คลิกสร้างข้อมูลรับรองแบบเลื่อนลงแล้วเลือก“ คีย์ API '
    บันทึก : คุณสามารถกำหนดให้เป็น Restrict Key เพื่อป้องกันการใช้งานโดยไม่ได้รับอนุญาตได้หากต้องการ
  13. คลิก“ ปิด ” จากนั้นคลิกที่คีย์ที่สร้างขึ้น
  14. เลือก“ ผู้อ้างอิง HTTP ” ในข้อ จำกัด ของแอปพลิเคชัน
  15. เพิ่ม URL เว็บไซต์ของคุณแล้วคลิก“ บันทึก '
  16. ตอนนี้คัดลอกคีย์และกลับไปที่ไซต์ WordPress

    การสร้างคีย์ API สำหรับไซต์

  17. เลื่อนลงด้านล่างแผงด้านซ้ายและไปที่“ การตั้งค่า '
  18. คุณจะพบตัวเลือกสำหรับ“ คีย์ API ของ Google 'เปิดและวางคีย์ที่นั่น
  19. บันทึกการตั้งค่าไปที่เพจของคุณและรีเฟรช

บันทึก: ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานการเรียกเก็บเงินของคุณแล้วเนื่องจาก Google อนุญาตให้ใช้เครดิตมูลค่า 300 $ หรือใช้งานฟรี 12 เดือนเท่านั้น (แล้วแต่จำนวนใดจะลดลงเร็วกว่า) หลังจากนั้นจะต้องมีการตั้งค่าและดำเนินการเรียกเก็บเงิน

อ่าน 2 นาที