วิธีฝังวิดเจ็ตแผนที่ในเว็บไซต์ใดก็ได้

เริ่มที่ตัวสร้าง (งานจริงมีแค่นี้)

ทุกอย่างเริ่มที่ ตัวสร้างโค้ดฝังแผนที่ การหาพิกัดจากที่อยู่เกิดขึ้น ครั้งเดียว ที่นั่น — สนิปเพ็ตที่คุณคัดลอกมีพิกัดคงที่ติดไปด้วย ดังนั้นระบบหาพิกัดล่มหรือการ “ปรับที่อยู่ให้เป็นมาตรฐาน” จะย้ายหมุดของคุณภายหลังไม่ได้ พิมพ์ที่อยู่ ดูหมุดลงตำแหน่ง แล้วลากหมุดไปที่ทางเข้าจริงก่อนคัดลอก การลากสิบวินาทีนั้นคือความต่างระหว่าง “ถูกถนน” กับ “ถูกประตู”

อยากดูการตั้งค่าหลายสาขาที่เสร็จแล้วก่อนสร้างของคุณเองไหม เปิดเดโมของตัวสร้าง — มันจะโหลดตัวอย่างบริษัทสามสาขา พร้อมที่อยู่ หมุดหมายเลขแบบมีสี และแผงรายการสถานที่ที่ทำงานจริงในพรีวิว พร้อมให้ลองกดเล่น

WordPress: ชอร์ตโค้ดของปลั๊กอิน หรือ iframe ดิบ?

ทั้งสองทางได้วิดเจ็ตเหมือนกันเป๊ะ — เลือกตามความชอบ

ทางปลั๊กอิน (แนะนำ): ดาวน์โหลด whatismylocation-widget.zip → wp-admin ▸ ปลั๊กอิน ▸ เพิ่มปลั๊กอินใหม่ ▸ อัปโหลดปลั๊กอิน → เปิดใช้งาน แล้วเพิ่มบล็อก ชอร์ตโค้ด:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

แอตทริบิวต์อ่านได้เหมือนตัวเลือกในตัวสร้าง: theme, marker, zoom, height, directions และสำหรับหลายสาขาใช้ pins="lat,lng,Label~Address|…" ร่วมกับ panel= และ motion= (ดูตารางอ้างอิงด้านล่าง) ส่วน WordPress ในตัวสร้างจะสร้างชอร์ตโค้ดทั้งชุดให้คุณ — ไม่ต้องพิมพ์เอง

ทางที่ไม่ใช้ปลั๊กอิน: วาง iframe จากตัวสร้างลงในบล็อก HTML กำหนดเอง วิดเจ็ตเดียวกัน ไม่มีปลั๊กอินให้อัปเดต ข้อแลกเปลี่ยนคือมาร์กอัปในเนื้อหาจะยาวขึ้น และแก้ไขแบบแอตทริบิวต์ภายหลังไม่ได้

Squarespace, Shopify, Notion — และที่เหลือ

นอกเหนือจาก WordPress งานมักเป็นการวางครั้งเดียว: เพิ่มอิลิเมนต์ HTML/ฝังโค้ดของแพลตฟอร์มคุณ (Wix Embed HTML, Squarespace บล็อก Code, Webflow Embed) แล้ววาง iframe ลงไป มีข้อต่างหนึ่งที่ทำให้วิดเจ็ตแผนที่ ง่ายกว่า วิดเจ็ตตำแหน่ง: มันไม่ต้องมีแอตทริบิวต์ allow="geolocation" เพราะไม่เคยขออะไรจากผู้เข้าชมเลย จึงไม่มีอะไรเปราะบางที่ต้องรักษาไว้เมื่อตัวสร้างหน้าเว็บเขียน HTML ของคุณใหม่

Squarespace: เพิ่มบล็อก Code แล้ววาง มีข้อควรรู้ไว้ก่อนหนึ่งข้อ: บล็อก Code ต้องใช้ แพ็กเกจ Business ขึ้นไป — ในแพ็กเกจ Personal บล็อกจะแสดงโค้ดเป็นข้อความธรรมดาแทนที่จะแสดงผลจริง

Shopify คู่ควรกับอะไรที่ดีกว่าการวางโค้ด: เรามี เซกชันธีม สำเร็จรูปให้ — ไฟล์เดียวในธีมของคุณให้แผงตั้งค่าแบบเนทีฟ พร้อมสาขาเป็นบล็อกที่ลากจัดลำดับได้ ไม่ต้องใช้แอปและไม่ต้องมีคีย์ API

Notion และ Google Sites ฝังด้วย URL ไม่ใช่ HTML ทั้งสองไม่รับสนิปเพ็ต iframe เลย — ให้กด Copy widget URL ในตัวสร้าง แล้ววางลงในบล็อก /embed ของ Notion หรือ Embed ▸ By URL ของ Google Sites วิดเจ็ตเป็นหน้าเว็บสมบูรณ์ในตัวเอง จึงแสดงผลได้ดีทั้งสองทาง

Salesforce Experience Cloud (เว็บไซต์ชุมชนแบบสาธารณะ): วาง iframe ลงในคอมโพเนนต์ HTML Editor แล้วให้ผู้ดูแลระบบเพิ่ม whatismylocation.ai ใน Setup ▸ Trusted URLs พร้อมไดเรกทีฟ CSP frame-src ไม่อย่างนั้น Salesforce จะบล็อกเฟรมแบบเงียบ ๆ ทีมที่เขียนโค้ดเองสามารถห่อ URL เดียวกันไว้ใน Lightning Web Component ประมาณ 10 บรรทัด:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

หลายสาขา: แผงรายการสถานที่

ใส่ได้ถึง 10 สถานที่ในโค้ดฝังหนึ่งชุด ในโหมด Advanced ของตัวสร้าง ให้วางตำแหน่งหมุดแต่ละอัน ใส่ป้ายชื่อและที่อยู่ แล้วกด Add location ผู้เข้าชมจะได้ แผงรายการสถานที่ — เป็นแอคคอร์เดียนข้างแผนที่บนเดสก์ท็อป และเป็นแถบการ์ดแบบปัดได้บนมือถือ — พร้อมหมุดที่มีหมายเลข: เลือกสาขาแล้วแผนที่จะบินไปหา และแสดงที่อยู่พร้อมลิงก์ขอเส้นทางของสาขานั้นเอง

• panel= เลือกเลย์เอาต์: auto (ค่าเริ่มต้น — อยู่ด้านข้างเมื่อ iframe กว้าง เป็นแถบเมื่อแคบ), side, bottom หรือ none สำหรับหมุดธรรมดา + ป็อปอัป
• motion= กำหนดแอนิเมชันตอนสลับ: smooth (ค่าเริ่มต้น แบบบิน), fade, lively หรือ none ผู้เข้าชมที่ตั้ง “ลดการเคลื่อนไหว” ไว้ในระบบจะได้แบบเปลี่ยนทันทีเสมอ ไม่ว่าคุณเลือกอะไร
• open=no เริ่มต้นโดยย่อทุกรายการไว้ แผนที่จะปรับให้เห็นทุกสาขาอัตโนมัติ และ zoom ของคุณจะกลายเป็นค่าสูงสุด

อ้างอิงตัวเลือก

การแก้ปัญหาใน WordPress

ชอร์ตโค้ดแสดงเป็นข้อความตรง ๆ บนหน้าเว็บ บล็อกนั้นไม่ประมวลผลชอร์ตโค้ด ในตัวแก้ไขบล็อกให้ใช้บล็อก ชอร์ตโค้ด (ไม่ใช่บล็อกโค้ดหรือบล็อกจัดรูปแบบไว้แล้ว) ใน Elementor ให้ใช้วิดเจ็ต Shortcode ใน Divi ใช้โมดูล Code ผู้ใช้ตัวแก้ไขแบบคลาสสิก: พิมพ์ในแท็บ Visual เป็นข้อความธรรมดา

ไม่มีอะไรขึ้นเลย ดูซอร์สโค้ดของหน้าและค้นหาคำว่า whatismylocation ถ้าเจอคอมเมนต์ HTML เรื่อง lat/lng ที่ขาดไป หมายความว่าพิกัดไม่มีหรือไม่ถูกต้อง ให้คัดลอกชอร์ตโค้ดทั้งชุดจากตัวสร้าง อย่าพิมพ์แอตทริบิวต์เอง

iframe หายไปเมื่อกดบันทึก (ทางที่ไม่ใช้ปลั๊กอิน) WordPress จะตัด iframe ออกสำหรับบทบาทผู้ใช้ที่ไม่มีความสามารถ unfiltered_html — บนมัลติไซต์นั้นรวมถึงผู้ดูแลระบบโดยค่าเริ่มต้น — และปลั๊กอินความปลอดภัยบางตัวก็ทำแบบเดียวกัน ชอร์ตโค้ดของปลั๊กอินคือทางแก้ที่สะอาด เพราะไม่ต้องพึ่งว่าบทบาทของคุณได้รับอนุญาตให้บันทึก iframe ดิบ

แผนที่เป็นสีเทา / ไทล์ไม่โหลด ไทล์มาจาก tile.openstreetmap.org แอดบล็อกเกอร์ที่เข้มมากหรือเครือข่ายองค์กรอาจบล็อกไว้ (การ์ดโอเวอร์เลย์ยังแสดงอยู่) ลองยืนยันด้วยเครือข่ายอื่น หรือมือถือที่ใช้เน็ตมือถือ

ไม่มีแผงรายการสถานที่ แผงจะปรากฏตั้งแต่ 2 หมุดขึ้นไป — สถานที่เดียวจะได้การ์ดโอเวอร์เลย์แบบคลาสสิก และตรวจดูว่าไม่ได้ตั้ง panel="none" ไว้

แอนิเมชันตอนสลับไม่เล่น เกือบทุกครั้งเกิดจากการตั้งค่า “ลดการเคลื่อนไหว” ในระบบปฏิบัติการของผู้เข้าชม (หรือของคุณเอง) วิดเจ็ตเคารพค่านั้นตามการออกแบบและสลับทันที นี่ไม่ใช่บั๊ก และผู้เข้าชมคนอื่นยังเห็นพรีเซ็ตที่คุณเลือก

การแก้ไขไม่แสดงผล ปลั๊กอินแคช (หรือแคชของโฮสต์) กำลังเสิร์ฟหน้าเก่า ให้ล้างแคชของหน้านั้นหลังแก้แอตทริบิวต์ชอร์ตโค้ด — ตัววิดเจ็ตเองไม่มีอะไรต้องแคช