เพิ่มระบบค้นหาอสังหาฯ MapScale ใน WordPress
ติดตั้งปลั๊กอิน MapScale เชื่อมฟิลด์ประกาศ และเผยแพร่แผนที่ค้นหาอสังหาฯ ในไทยทั้งภาษาไทยและอังกฤษ
เริ่มต้น
ดาวน์โหลดและติดตั้งไฟล์ ZIP ของปลั๊กอิน
ดาวน์โหลด /docs/downloads/mapscale-wordpress.zip จากนั้นไปที่ ปลั๊กอิน > เพิ่มปลั๊กอินใหม่ > อัปโหลดปลั๊กอิน ใน WordPress เลือกไฟล์ ZIP กดติดตั้ง แล้วเปิดใช้งาน MapScale ภายในไฟล์มีโฟลเดอร์ปลั๊กอิน mapscale อยู่แล้ว จึงไม่ต้องแตกไฟล์หรือเปลี่ยนชื่อก่อนอัปโหลด
สร้าง browser key และอนุญาต origin ของเว็บ WordPress
สร้าง publishable key แบบ pk_live_… หรือ pk_test_… และเปิดใช้ tiles กับ autocomplete เพิ่ม public origin ของเว็บไซต์ WordPress แบบตรงตัวใน allowed origins เช่น https://agency.example โดยใส่ scheme, hostname และ port ถ้ามี แต่ไม่ใส่ path ของหน้า หากมี staging หรือ origin อื่นให้เพิ่มแยกรายการ จากนั้นไปที่ ตั้งค่า > MapScale แล้ววาง key ในช่อง Publishable key
Publishable key: pk_live_your_key_here
Allowed origin: https://agency.exampleเปิดใช้ MapScale API ทุกตัวอย่างปลอดภัยจาก PHP
ปลั๊กอินมี server-side client ครบทั้ง 17 operation ใน MapScale OpenAPI ได้แก่ health, status, contact capture, trial-key creation, styles, tiles, fonts, routing, matrix, isochrone, forward/reverse geocoding, autocomplete, place details, admin-area reverse lookup และ static maps ส่วนที่ปลอดภัยใน browser ใช้ publishable key ขณะที่ routing, matrix และ geocoding ใช้ sk_ key เฉพาะใน PHP แนะนำให้กำหนด MAPSCALE_SECRET_KEY จาก environment ใน wp-config.php หรือให้ผู้ดูแลบันทึกที่ ตั้งค่า > MapScale ระบบจะไม่ส่ง secret ไปใน block หรือ JavaScript ใช้ mapscale_api() จากโค้ดธีมหรือปลั๊กอินได้ และ REST bridge /wp-json/mapscale/v1/api/{operation} อนุญาตเฉพาะผู้ใช้ที่มี manage_options
// wp-config.php — load the value from your host's secret environment.
define("MAPSCALE_SECRET_KEY", getenv("MAPSCALE_SECRET_KEY"));
// Theme/plugin PHP — never browser JavaScript.
$result = mapscale_api()->route([
"coordinates" => "100.5018,13.7563;100.5685,13.7367",
"profile" => "driving",
]);เชื่อม post type และ custom field ของประกาศ
ที่ ตั้งค่า > MapScale ให้ตั้งค่าให้ตรงกับข้อมูลที่ธีมหรือปลั๊กอินประกาศอสังหาฯ ของคุณเก็บอยู่ ค่าเริ่มต้นคือ property สำหรับ Property post type (property_post_type), _mapscale_latitude สำหรับ Latitude meta key (latitude_meta_key), _mapscale_longitude สำหรับ Longitude meta key (longitude_meta_key), _mapscale_price สำหรับ Price meta key (price_meta_key) และ _mapscale_bedrooms สำหรับ Bedrooms meta key (bedrooms_meta_key) เปลี่ยนค่าใดก็ตามที่ไม่ตรงกับเว็บของคุณ พิกัดต้องเป็นละติจูดและลองจิจูดเลขทศนิยม และระบบจะแสดงเฉพาะโพสต์ที่เผยแพร่แล้วและมีพิกัดถูกต้อง
Property post type: property
Latitude meta key: _mapscale_latitude
Longitude meta key: _mapscale_longitude
Price meta key: _mapscale_price
Bedrooms meta key: _mapscale_bedroomsปรับ integration ให้ตรงกับธีม
Block และ shortcode ใช้กับธีมมาตรฐานแบบ block หรือ classic ได้ CSS ถูกจำกัด scope ปรับตาม container รองรับ high contrast และเลือก auto, light หรือ dark ได้ แต่ความเข้ากันได้ของข้อมูลประกาศเป็นอีกเรื่อง adapter เริ่มต้นอ่าน post type หนึ่งชนิดและ post meta แบบ scalar สำหรับ latitude, longitude, ราคา และห้องนอน หากธีมเก็บพิกัดรวมกัน ใช้ custom table หรือ schema เฉพาะ ให้ใช้ filters mapscale_property_settings, mapscale_property_query_args, mapscale_property_latitude, mapscale_property_longitude, mapscale_property_record และ mapscale_properties การทดสอบจริงครอบคลุม WordPress 6.4 กับ Twenty Twenty-Four และ 16 ธีมฟรีบน current stack ได้แก่ Twenty Twenty-Three, Twenty Twenty-Four, Twenty Twenty-Five, Astra, Hello Elementor พร้อม Elementor, Kadence, GeneratePress, OceanWP, Neve, Blocksy, Sydney, Hestia, Real Estate Salient, Real Estate Manager, Real Estate Elementor และธีมลูก Real Estate Property Elementor ส่วน Divi, Houzez, RealHomes, WP Residence และ Homey ผ่าน public-demo CSS collision check แต่ยังต้องใช้ ZIP ที่มี license และ bundled plugins เพื่อรับรองการติดตั้งเต็มรูปแบบ
add_filter("mapscale_property_latitude", function ($value, $post) {
// Return a decimal latitude from your theme's storage format.
return $value;
}, 10, 2);เพิ่ม Gutenberg block หรือ shortcode
แก้ไขหน้า เพิ่มบล็อก MapScale Property Map (mapscale/property-map) แล้วเผยแพร่ หากใช้ Classic Editor หรือ page builder ให้ใส่ [mapscale_property_map] คุณกำหนด shortcode attributes เพื่อเปลี่ยนความสูง ระดับซูม จุดกึ่งกลาง ภาษา appearance แบบ auto/light/dark และจำนวนประกาศได้ ค่า language จะเป็นไทยอัตโนมัติเมื่อ WordPress locale ขึ้นต้นด้วย th และเป็นอังกฤษในกรณีอื่น ส่วน limit เริ่มต้นที่ 100 และไม่เกิน 500
[mapscale_property_map]
[mapscale_property_map height="560" zoom="12" lat="13.7563" lng="100.5018" language="th" appearance="dark" limit="150"]ทดสอบการค้นหาสถานที่ภาษาอังกฤษและไทย
เปิดหน้าที่เผยแพร่แล้วด้วยหน้าต่าง private ค้นหาสถานที่ที่รู้จักเป็นภาษาอังกฤษ เลือกคำแนะนำด้วยแป้นพิมพ์หรือ pointer แล้วตรวจว่าแผนที่เลื่อนไปยังสถานที่นั้น จากนั้นทดสอบซ้ำในหน้าที่ใช้ locale ภาษาไทย หรือกำหนด language="th" ใน shortcode แล้วค้นหาเป็นภาษาไทย ปลั๊กอินจะส่ง locale ที่เลือกไปยัง MapScale autocomplete รวมการพิมพ์ต่อเนื่องเป็น search session เดียว และอัปเดตหมุดประกาศที่เผยแพร่แล้วพร้อมรายการผลลัพธ์ตาม viewport ปัจจุบันเมื่อเลื่อนหรือซูมแผนที่
ดูแล integration ให้ปลอดภัยและรวดเร็ว
publishable key แบบ pk_ ปรากฏใน source ได้ตามปกติ ให้ป้องกันด้วย allowed-origin list และเปิดเฉพาะ product ที่ใช้ ส่วน sk_ key กำหนดได้เฉพาะ MAPSCALE_SECRET_KEY ใน wp-config.php หรือช่องตั้งค่าสำหรับผู้ดูแล ห้ามใส่ใน block, shortcode, HTML หรือ JavaScript ฝั่ง client REST bridge สำหรับ server APIs ต้องมีสิทธิ์ manage_options และไม่ใช่ public proxy ใช้ HTTPS อัปเดต WordPress กับปลั๊กอิน และคง limit เริ่มต้น 100 ไว้ก่อนจนกว่าจะวัดประสิทธิภาพแล้ว
แก้ปัญหาแผนที่ หมุด และการค้นหา
ถ้าแผนที่ว่างหรือพบสถานะ 401/403 ให้ตรวจว่า key ขึ้นต้นด้วย pk_live_ หรือ pk_test_ เปิด tiles และ autocomplete แล้ว และอนุญาต origin ตรงกับ browser หากหมุดไม่แสดง ให้ตรวจ post type, ชื่อ meta key ทั้งสี่, สถานะเผยแพร่, พิกัดเลขทศนิยม และ viewport ปัจจุบัน หากไม่มีคำแนะนำการค้นหา ให้ลองทั้งภาษาที่ต้องการและชื่อสถานที่ที่กว้างขึ้น แล้วดู API status ใน browser console ล้าง cache ของ WordPress หรือ page cache หลังเปลี่ยนการตั้งค่า และอย่าแก้ authorization error ด้วยการใส่ sk_ key ในหน้าเว็บ