Bỏ qua để đến nội dung
MapsLibVN

Nhúng bản đồ Việt Nam trong 5 phút

Đây là đường ngắn nhất. Muốn biết đủ điều kiện, yêu cầu và cách xử lý lỗi thì đọc Cài đặt.

1. Một dòng <script>

Phần tiêu đề “1. Một dòng <script>”

Cách nhanh nhất, không cần build. Bản UMD đã gói sẵn maplibre-gl và pmtiles.

<link rel="stylesheet" href="https://mapslibvn-docs.pages.dev/sdk/mapslibvn.css" />
<script src="https://mapslibvn-docs.pages.dev/sdk/mapslibvn.umd.js"></script>
<div id="map" style="height:400px"></div>
<script>
  MapsLibVN.createMap({
    container: 'map',
    apiKey: 'mlv_live_…',
    apiBase: 'https://api.ai-solutions.io.vn',
    center: [106.70, 10.776],
    zoom: 13,
  });
</script>

Chưa có khoá? Dùng khoá demo và chạy trên http://localhost — Nhúng thử trang của bạn hướng dẫn trong hai phút.

2. npm

Phần tiêu đề “2. npm”
Terminal window
pnpm add @mapslibvn/web maplibre-gl
import 'maplibre-gl/dist/maplibre-gl.css';
import * as maplibregl from 'maplibre-gl';
import { createMap } from '@mapslibvn/web';


const map = createMap(
  { container: 'map', apiKey: 'mlv_live_…', apiBase: 'https://api.ai-solutions.io.vn' },
  { maplibre: maplibregl },
);
map.addMarker({ lng: 106.7, lat: 10.776, popupHtml: '<b>Chợ Bến Thành</b>' });
map.on('poiClick', (poi) => console.log(poi.name));

maplibre-gl@^6.4.1 là peer dependency và bản ESM không gộp nó, nên phải truyền { maplibre: maplibregl }. map.gl là đối tượng maplibregl.Map — mọi API của MapLibre đều dùng được.

3. React

Phần tiêu đề “3. React”
import 'maplibre-gl/dist/maplibre-gl.css';
import { MapsLibVNMap, Marker } from '@mapslibvn/react';


<MapsLibVNMap apiKey="mlv_live_…" apiBase="https://api.ai-solutions.io.vn" containerStyle={{ height: 400 }}>
  <Marker lng={106.6981} lat={10.7725} />
</MapsLibVNMap>;

4. React Native

Phần tiêu đề “4. React Native”

App iOS/Android dùng @mapslibvn/react-native với cùng props (style, lang, poiLayer, onPoiClick) và khoá kind mobile. Xem React Native.

5. Endpoint và khoá

Phần tiêu đề “5. Endpoint và khoá”

Các ví dụ trên dùng API tại api.ai-solutions.io.vn và SDK phục vụ từ mapslibvn-docs.pages.dev. Cả hai là tên miền tạm thời và sẽ đổi khi MapsLibVN có tên miền riêng — xem REST API mục 1.

Khoá API phải khớp origin của trang nhúng. Nếu bị trả về lỗi origin_not_allowed, nghĩa là origin của bạn chưa nằm trong danh sách của khoá — xem Khoá API.

6. Đọc thêm

Phần tiêu đề “6. Đọc thêm”