วิธีเพิ่ม Google Map ลงในเว็บเพจด้วย API

ในการแทรกแผนที่ Google พร้อมเครื่องหมายระบุตำแหน่งลงในหน้าเว็บของคุณคุณจะต้องได้รับคีย์ซอฟต์แวร์พิเศษจาก Google จากนั้นเพิ่ม JavaScript ที่เกี่ยวข้องลงในหน้า แม้ว่ากระบวนการนี้จะตรงไปตรงมา แต่ก็ช่วยให้มีความรู้พื้นฐานเกี่ยวกับ HTML และ JavaScript อย่างคร่าวๆเป็นอย่างน้อย

รับคีย์ Google Maps API

เพื่อป้องกันเซิร์ฟเวอร์ของตนจากการถูกถล่มจากคำขอแผนที่และการค้นหาตำแหน่ง Google จึงควบคุมการเข้าถึงฐานข้อมูลแผนที่ คุณต้องลงทะเบียนกับ Google ในฐานะนักพัฒนาเพื่อรับรหัสเฉพาะเพื่อใช้ Application Programming Interface เพื่อขอข้อมูลจากเซิร์ฟเวอร์แผนที่ คีย์ API ให้บริการฟรีเว้นแต่คุณจะต้องการเข้าถึงเซิร์ฟเวอร์ของ Google สำหรับงานหนัก (ตัวอย่างเช่นเพื่อพัฒนาเว็บแอป)

ในการลงทะเบียนคีย์ API ของคุณ:

ไปที่คอนโซล Google Cloud Platform และหลังจากลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณแล้วให้สร้างโครงการใหม่หรือเลือกโครงการที่มีอยู่
คลิก ต่อ เพื่อเปิดใช้งาน API และบริการที่เกี่ยวข้อง
เกี่ยวกับ หนังสือรับรอง หน้ารับไฟล์ คีย์ API. กำหนดข้อ จำกัด ที่เกี่ยวข้องบนคีย์ตามความจำเป็น
รักษาความปลอดภัยคีย์ API ของคุณโดยใช้แนวทางปฏิบัติที่ดีที่สุดที่แนะนำโดย Google

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

แทรก JavaScript ลงในเว็บเพจของคุณ

ใส่โค้ดต่อไปนี้ลงในเว็บเพจของคุณในส่วน BODY ของเอกสาร HTML:

// เริ่มต้นและเพิ่มแผนที่
ฟังก์ชัน initMap () {
// ตำแหน่งของธง
ธง var = {lat: XXX, lng: YYY};
// แผนที่มีศูนย์กลางอยู่ที่ธง
var map = google.maps.Map ใหม่ (
document.getElementById ('แผนที่'), {zoom: 4, center: flag});
// เครื่องหมายตำแหน่งที่ธง
var marker = google.maps.Marker ใหม่ ({ตำแหน่ง: ธงแผนที่: แผนที่});
}