ย้ายจาก Google Maps API มาใช้ MapLibre: เทียบโค้ดทีละส่วน และเช็กลิสต์ก่อนย้าย

MapLibre GL JS เป็นไลบรารีแผนที่ vector แบบโอเพนซอร์ส ใช้ฟรีไม่คิดค่าต่อการเปิดแผนที่ ทีมที่อยากลดบิล Google Maps ส่วนใหญ่จึงย้ายมาใช้ MapLibre คู่กับผู้ให้บริการข้อมูลแผนที่ เส้นทาง และการค้นหา บทความนี้เทียบโค้ดทีละส่วนและสรุปจุดที่ต้องระวัง

ต้องมีอะไรบ้าง

ไลบรารีแผนที่ MapLibre GL JS สำหรับเว็บ หรือ MapLibre Native สำหรับ Android/iOS (Flutter และ React Native มีปลั๊กอินที่รองรับ)
Style + tiles ข้อมูลแผนที่ที่ MapLibre วาด ระบุเป็น URL ของ style
API เส้นทางและค้นหาสถานที่ เรียกผ่าน REST แทน DirectionsService และ Geocoder ของ Google

ตัวอย่างในบทความนี้ใช้ RRevX Maps API ซึ่งมีครบทั้งสามส่วนสำหรับไทยและลาว ใช้คีย์เดียว

เทียบโค้ดทีละส่วน

Google Maps	MapLibre + REST API
`new google.maps.Map(el, {center, zoom})`	`new maplibregl.Map({container, style, center: [lng, lat], zoom})`
`new google.maps.Marker({position, map})`	`new maplibregl.Marker().setLngLat([lng, lat]).addTo(map)`
`new google.maps.InfoWindow({content})`	`new maplibregl.Popup().setHTML(html)` แล้ว `marker.setPopup(popup)`
`map.addListener('click', e => e.latLng)`	`map.on('click', e => e.lngLat)`
`google.maps.Polyline` / `Polygon`	`map.addSource(id, {type: 'geojson', data})` + `map.addLayer({type: 'line'})`
`DirectionsService.route()`	`GET /v1/route/{lng,lat;lng,lat}?geometries=geojson`
`DistanceMatrixService`	`GET /v1/table/{จุด;จุด;…}`
`Geocoder.geocode({address})`	`GET /v1/geocode?q=`
`places.Autocomplete`	`GET /v1/autocomplete?q=&session=`
`MarkerClusterer`	GeoJSON source `cluster: true` (มีในตัว)

ก่อนและหลัง

// ก่อน (Google)
const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: 13.7457, lng: 100.5341 }, zoom: 15
});
new google.maps.Marker({ position: { lat: 13.7457, lng: 100.5341 }, map });

// หลัง (MapLibre + RRevX Maps API)
const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.rrevx.com/v1/styles/liberty.json?key=rx_pub_…',
  center: [100.5341, 13.7457], // [lng, lat]
  zoom: 14
});
new maplibregl.Marker().setLngLat([100.5341, 13.7457]).addTo(map);

จุดที่พลาดบ่อย

ลำดับพิกัดกลับกัน Google ใช้ {lat, lng} ส่วน MapLibre และ GeoJSON ใช้ [lng, lat] หมุดที่ไปโผล่กลางทะเลส่วนใหญ่มาจากจุดนี้
ระดับซูมต่างกันราว 1 ภาพเท่ากัน Google zoom 15 ≈ MapLibre zoom 14
ต้องแสดงเครดิตข้อมูล แผนที่จาก OpenStreetMap ต้องแสดง © OpenStreetMap contributors ห้ามซ่อนปุ่มเครดิตมุมแผนที่
คีย์ในหน้าเว็บต้องผูกโดเมน ใช้คีย์สาธารณะที่จำกัดโดเมน และเก็บคีย์ลับไว้ฝั่งเซิร์ฟเวอร์
หน่วยของผลลัพธ์ ระยะเป็นเมตร เวลาเป็นวินาที ตรวจโค้ดที่แปลงหน่วยเดิมด้วย

ย้ายทีละส่วน ไม่ต้องรื้อทั้งระบบ

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

สิ่งที่ยังย้ายไม่ได้

ภาพดาวเทียม Street View และข้อมูลจราจรสด ยังไม่มีใน RRevX Maps API ถ้าแอปต้องใช้ส่วนนี้ เก็บไว้กับ Google เฉพาะจุดนั้น แล้วย้ายส่วนที่เหลือเพื่อลดบิล

เอกสารฉบับเต็ม (ทุก endpoint ตัวอย่าง cURL / JavaScript / Python และรหัส error) อยู่ที่ rrevx.com/maps/docs ถ้าอยากให้ทีมงานช่วยย้ายทั้งระบบ ติดต่อเราได้ที่นี่

เริ่มใช้ฟรี — สร้างคีย์ API