--- title: "การสร้างแผนที่ขั้นพื้นฐาน" description: "ตัวอย่างนี้จะแสดงวิธีการสร้างแผนที่ Longdo Map แบบพื้นฐาน โดยการใช้ JavaScript API" canonical_url: "https://map.longdo.com/docs/v3/javascript/maplayers/createmap/" last_updated: "2026-09-17T04:30:08.311Z" --- # การสร้างแผนที่ขั้นพื้นฐาน ```javascript Create Map Sample | Longdo Map
``` > **Note:** `[YOUR-KEY-API]` คือรหัสสำหรับใช้งาน Longdo Map API ซึ่งสามารถดูขั้นตอนการสมัครได้ที่ [วิธีการสมัคร Key API](https://map.longdo.com/console/) # สร้างแผนที่พร้อมกับตั้งค่าแผนที่เริ่มต้น โดยปกติแล้ว `new longdo.Map()` จะเปิดมาที่มุมมองซูมออกสุดพร้อมแสดงเครื่องมือทุกชิ้น ซึ่งเหมาะสำหรับทดสอบเฉย ๆ แต่ไม่ค่อยเหมาะกับหน้าเว็บจริง การกำหนดค่าเริ่มต้นช่วยให้ข้ามมุมมองเริ่มต้นนั้นไปได้เลย เช่น กำหนด `location` และ `zoom` ให้ไปที่พื้นที่ที่ผู้ใช้สนใจทันที, จำกัดระดับการซูมด้วย `zoomRange`, และเลือกชุดเครื่องมือ UI ให้เหมาะกับอุปกรณ์ — เช่นใช้ `longdo.UiComponent.None` บนแอปมือถือที่จะสร้างเครื่องมือควบคุมของตัวเองขึ้นมาใหม่ทั้งหมด ```javascript ``` ตัวแปรที่ใช้ในตัวอย่างด้านบน (หากไม่ระบุ Parameter ใดๆ จะใช้ค่า Default ของ Parameters นั้นแทน) - `layer` : Layer เริ่มต้นที่จะแสดง จะใส่เป็นค่าเดียวอย่าง `longdo.Layers.*` หรือเป็น array เพื่อซ้อนหลาย Layer ก็ได้ — ในตัวอย่างนี้คือ `[longdo.Layers.NORMAL, longdo.Layers.TRAFFIC]` (Default: `longdo.Layers.NORMAL`) - `zoom` : ระดับการซูมเริ่มต้น (Default: `7`) - `zoomRange` : จำกัดขอบเขตการซูมเข้า-ออกของผู้ใช้ กำหนดเป็น `{ min, max }` (Default: ซูมได้ทุกระดับ) - `location` : พิกัดกึ่งกลางแผนที่เริ่มต้น กำหนดเป็น `{ lon, lat }` (Default: ที่ตั้งสำนักงาน Metamedia ของ Longdo ในกรุงเทพฯ) - `placeholder` : Element ของ DOM ที่จะใช้แสดงแผนที่ - `ui` : ชุดเครื่องมือ UI ที่จะแสดงตอนเริ่มต้น — `longdo.UiComponent.None` คือไม่แสดงเครื่องมือใด ๆ เลย ดูรายการชุดเครื่องมือทั้งหมดได้ที่ [การเปิด-ปิดเครื่องมือบนแผนที่](/javascript/ui/map-tool) (Default: เลือกให้อัตโนมัติตามขนาดหน้าจอ) - `lastView` : เมื่อเป็น `true` (ค่าเริ่มต้น) แผนที่จะไม่สนใจค่า `location`/`zoom` ด้านบน แล้วดึงพิกัดและระดับการซูมล่าสุดที่ผู้ใช้เคยดูไว้กลับมาแสดงแทน โดยอ่านจาก local storage ของเบราว์เซอร์ ให้กำหนดเป็น `false` แบบในตัวอย่างนี้ เพื่อให้แผนที่เปิดที่ `location`/`zoom` ที่ระบุไว้เสมอ แทนที่จะเป็นตำแหน่งล่าสุดของผู้ใช้ที่กลับมาเปิดซ้ำ > **ดูเพิ่มเติม:** [MapOptions Documentation](https://api.longdo.com/map3/doc.html#MapOptions)