วิธีเพิ่มแผนที่ Google Maps ในเว็บไซต์ WordPress

บอกตำแหน่งร้านค้าหรือธุรกิจของคุณได้ง่ายๆ ด้วย Google Maps บนเว็บ WordPress ไม่ต้องเขียนโค้ด

วิธีเพิ่มแผนที่ Google Maps ในเว็บไซต์ WordPress

หากคุณมีร้านค้า ออฟฟิศ หรือธุรกิจที่ต้องการบอกทิศทางให้ลูกค้า การเพิ่มแผนที่ Google Maps ในเว็บไซต์ WordPress เป็นสิ่งจำเป็นมาก บทความนี้จะสอนทุกวิธีตั้งแต่แบบง่ายที่สุดไม่ต้องใช้ API Key ไปจนถึงการใช้ปลั๊กอินขั้นสูง

ทำไมต้องมีแผนที่ในเว็บไซต์?

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

วิธีที่ 1: Embed Google Maps โดยตรง (ไม่ต้องใช้ API)

วิธีนี้ง่ายที่สุด ไม่ต้องสมัคร API Key ใดๆ เหมาะสำหรับผู้เริ่มต้น

  1. ไปที่ maps.google.com และค้นหาสถานที่ของคุณ
  2. คลิกที่ชื่อสถานที่ หรือพินบนแผนที่
  3. คลิกปุ่ม "Share" (แชร์) ที่แถบด้านซ้าย
  4. เลือกแท็บ "Embed a map" (ฝังแผนที่)
  5. เลือกขนาดแผนที่: Small / Medium / Large / Custom size
  6. คลิก "Copy HTML" เพื่อคัดลอกโค้ด

ตัวอย่างโค้ดที่ได้จาก Google Maps:

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

จากนั้นในเว็บ WordPress ให้ทำดังนี้:

  1. เปิดหน้า/โพสต์ที่ต้องการเพิ่มแผนที่ในตัวแก้ไข (Editor)
  2. คลิก "+" Add Block → ค้นหา "Custom HTML"
  3. วางโค้ด iframe ที่คัดลอกมาลงในบล็อก Custom HTML
  4. กด Preview เพื่อดูตัวอย่าง แล้ว Publish
Tip: หากต้องการให้แผนที่ responsive (ปรับขนาดตามหน้าจอ) ให้เพิ่ม CSS: iframe { width: 100%; } ในส่วน Custom CSS ของ WordPress

วิธีที่ 2: ใช้ปลั๊กอิน WP Google Maps

ปลั๊กอิน WP Google Maps เป็นตัวเลือกยอดนิยมที่ช่วยให้จัดการแผนที่ได้ง่ายขึ้น และรองรับการเพิ่ม Marker หลายจุด

  1. ไปที่ WordPress Admin → Plugins → Add New
  2. ค้นหา "WP Google Maps"
  3. คลิก Install Now แล้ว Activate
  4. ไปที่เมนู WP Google Maps ที่ปรากฏขึ้นใหม่ในแถบซ้าย
  5. คลิก "Create a Map" แล้วตั้งชื่อแผนที่
  6. คลิก "Add a Marker" เพื่อปักหมุดตำแหน่ง
  7. ป้อนที่อยู่ในช่องค้นหา แล้วคลิก "Find Address"
  8. คัดลอก Shortcode เช่น [wpgmza id="1"]
  9. วาง Shortcode ในหน้า/โพสต์ที่ต้องการแสดงแผนที่

วิธีที่ 3: ใช้ปลั๊กอิน Google Maps Widget by WP Monsters

หากต้องการแผนที่ใน Widget (Sidebar หรือ Footer) ปลั๊กอิน Google Maps Widget เป็นตัวเลือกที่ดี ติดตั้งและใช้งานได้เลยโดยไม่ต้องใช้ API Key

  1. ติดตั้งปลั๊กอิน "Google Maps Widget" จาก Plugin Directory
  2. ไปที่ Appearance → Widgets
  3. ลาก Widget "Google Maps Widget" ไปยังตำแหน่งที่ต้องการ
  4. ใส่ที่อยู่หรือพิกัด และปรับขนาดแผนที่ตามต้องการ
  5. คลิก Save

วิธีที่ 4: ใช้ Elementor เพิ่มแผนที่ (สำหรับผู้ใช้ Elementor)

หากเว็บไซต์ของคุณสร้างด้วย Elementor การเพิ่มแผนที่ทำได้ง่ายมากผ่าน Widget ในตัว

  1. เปิดหน้าที่ต้องการแก้ไขด้วย Elementor
  2. ค้นหา Widget "Google Maps" ในแถบซ้าย
  3. ลากวาง Widget ไปยังตำแหน่งที่ต้องการ
  4. ในแท็บ Content ป้อนที่อยู่ของคุณในช่อง "Location"
  5. ปรับ Zoom Level และ Height ตามต้องการ
  6. คลิก Publish / Update
Tip: Elementor Pro รองรับ Google Maps API Key เพื่อปรับแต่งสีแผนที่และซ่อนธุรกิจคู่แข่งบนแผนที่ได้

การเพิ่ม Google Maps ด้วย API Key (ขั้นสูง)

หากต้องการฟีเจอร์พิเศษเช่น Custom Styles หรือ Multiple Markers จำนวนมาก คุณอาจต้องใช้ API Key

  1. ไปที่ console.cloud.google.com และล็อกอินด้วย Google Account
  2. สร้าง Project ใหม่ หรือเลือก Project ที่มีอยู่
  3. ไปที่ APIs & Services → Library
  4. ค้นหาและเปิดใช้ "Maps JavaScript API" และ "Maps Embed API"
  5. ไปที่ APIs & Services → Credentials
  6. คลิก Create Credentials → API Key
  7. คัดลอก API Key และนำไปใส่ในปลั๊กอินที่ต้องการ
Tip: Google ให้ Credit ฟรี $200 ต่อเดือน ซึ่งเพียงพอสำหรับเว็บขนาดเล็กถึงกลาง ควรตั้ง Quota Limit เพื่อป้องกันค่าใช้จ่ายเกิน

ทำให้แผนที่ Responsive บนมือถือ

แผนที่ที่ฝังด้วย iframe อาจไม่ Responsive บนมือถือโดยอัตโนมัติ ให้เพิ่ม CSS นี้:

/* ใส่ใน Appearance > Customize > Additional CSS */
.map-container {
  position: relative;
  padding-bottom: 56.25%; /* อัตราส่วน 16:9 */
  height: 0;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

แล้วห่อ iframe ด้วย div ที่มี class map-container:

<div class="map-container">
  <iframe src="..."></iframe>
</div>

ตรวจสอบว่า Google Maps ทำงานถูกต้อง

หลังเพิ่มแผนที่แล้ว ให้ตรวจสอบทุกจุดเหล่านี้:

1. เปิดเว็บไซต์บน Desktop และดูว่าแผนที่แสดงผลถูกต้อง
2. เปิดบน Mobile (หรือ DevTools > Toggle Device Toolbar)
   - แผนที่ต้องปรับขนาดตามหน้าจอ
   - ต้องคลิก/แตะได้ปกติ
3. คลิกปุ่ม "View Larger Map" ในแผนที่
   - ต้องเปิด Google Maps และแสดงตำแหน่งที่ถูกต้อง
4. ทดสอบปุ่ม "Get Directions" / "นำทาง"
   - ต้องเปิด Google Maps เพื่อนำทางได้
5. ตรวจสอบ Console (F12) ว่าไม่มี Error เกี่ยวกับ Maps API
Tip: ใช้ Google PageSpeed Insights เพื่อตรวจสอบว่า Google Maps ไม่ทำให้เว็บโหลดช้าเกินไป หากช้า ให้ใช้เทคนิค Lazy Load iframe

แก้ปัญหาที่พบบ่อย

Error: "This page can't load Google Maps correctly"

ปัญหา: API Key ไม่ถูกต้องหรือยังไม่ได้ตั้งค่า

Error: แผนที่แสดงเป็นสีเทา (Grey Box)

ปัญหา: iframe โหลดไม่สำเร็จหรือ URL ไม่ถูกต้อง

Error: แผนที่ไม่ Responsive บนมือถือ

ปัญหา: iframe มีขนาดตายตัว ไม่ปรับตามหน้าจอ

Error: "You must enable Billing" ใน Google Cloud Console

ปัญหา: Google Maps Platform ต้องการ Billing Account แม้ว่าจะมี Free Tier

Error: แผนที่แสดงตำแหน่งผิด

ปัญหา: การค้นหาที่อยู่ไม่แม่นยำ

คำถามที่พบบ่อย (FAQ)

Q: ต้องใช้ API Key เพื่อ Embed Google Maps ในเว็บไซต์ไหม?

A: ไม่จำเป็น ถ้าใช้วิธี Embed ผ่าน iframe จาก maps.google.com โดยตรง วิธีนี้ฟรี 100% ไม่ต้องสมัคร API Key API Key จำเป็นเฉพาะเมื่อใช้ Google Maps JavaScript API หรือฟีเจอร์ขั้นสูงอื่นๆ

Q: แผนที่จาก Google Maps ฟรีสำหรับเว็บไซต์ธุรกิจไหม?

A: การ Embed แผนที่ผ่าน iframe ฟรีสำหรับทุกคน แต่หากใช้ Maps API จะมี Free Tier $200 ต่อเดือน ซึ่งเพียงพอสำหรับเว็บทั่วไปที่มี Traffic ไม่สูงมาก

Q: ควรใช้ปลั๊กอิน Google Maps หรือ Embed โดยตรง?

A: สำหรับการแสดงแผนที่ตำแหน่งเดียวแบบง่ายๆ แนะนำ Embed โดยตรง เพราะไม่ต้องพึ่งปลั๊กอินเพิ่มเติม แต่หากต้องการ Marker หลายจุด Custom Style หรือการค้นหาในแผนที่ ควรใช้ปลั๊กอินจะสะดวกกว่า

บทความที่เกี่ยวข้อง