Goong SDK Posts

Hướng dẫn sử dụng Goong SDK trên JavaScript

Trong bài viết hôm nay, các bạn sẽ được hướng dẫn cách tích hợp MapView cơ bản của Goong vào 1 trang web bằng JavaScript. Đến cuối tutorial, các bạn đã có thể hoàn thành một trang web với các chức năng map view, tìm kiếm với đề xuất kết quả và ghim pin trên bản đồ.

Để dùng được SDK và API, các bạn cần keys/token. Hãy truy cập vào account.goong.io để tạo tài khoản, rồi tạo keys tại https://account.goong.io/keys. Xin lưu ý là cần 1 key cho API và 1 key cho Map Tiles.

Bước 1 – Tạo MapView: ( https://docs.goong.io/js/guide )
Include các file JavaScript và CSS cần thiết:

<script src='https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.2/dist/goong-js.js'></script>
<link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.2/dist/goong-js.css" rel="stylesheet" />

Tạo một HTML element có chứa MapView với đoạn code dưới, thay <your access token here> bằng key Map Tiles đã tạo ở bước trên. Các bạn có thể tùy chỉnh kích thước với 2 tham số widthheightvà thay đổi tọa độ trung tâm (long, lat), mức zoom khởi đầu tại center:zoom: :

<div id='map' ></div>
<script>
goongjs.accessToken = '<your access token here>';
var map = new goongjs.Map({
    container: 'map',
    style: 'https://tiles.goong.io/assets/goong_map_web.json'
    center: [105.7938073,21.0244247],
    zoom: 15 
});
</script>

Add thêm button để thể hiện map full màn hình với method addControl:

<div id='map' ></div>
<script>
goongjs.accessToken = '<your access token here>';
var map = new goongjs.Map({
    container: 'map',
    style: 'https://tiles.goong.io/assets/goong_map_web.json'
    center: [105.7938073,21.0244247],
    zoom: 15 
});
map.addControl(new goongjs.FullscreenControl());
</script>

Add thêm button để hiển thị tọa độ người dùng (trình duyệt sẽ yêu cầu truy cập quyền location):

<div id='map' ></div>
<script>
goongjs.accessToken = '<your access token here>';
var map = new goongjs.Map({
    container: 'map',
    style: 'https://tiles.goong.io/assets/goong_map_web.json'
    center: [105.7938073,21.0244247],
    zoom: 15 
});
map.addControl(
        new goongjs.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: true
        })
);
</script>

Add Navigation Control cho MapView:

<div id='map' ></div>
<script>
goongjs.accessToken = '<your access token here>';
var map = new goongjs.Map({
    container: 'map',
    style: 'https://tiles.goong.io/assets/goong_map_web.json'
    center: [105.7938073,21.0244247],
    zoom: 15 
});
map.addControl(new goongjs.NavigationControl());
</script>

Dùng control element goong-geocoder để search các địa điểm qua Goong Autocomplete API.

Include file JavaScript cần thiết:

<script src='https://cdn.jsdelivr.net/npm/@goongmaps/goong-geocoder@1.0.2/dist/goong-geocoder.min.js'></script>
<link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-geocoder@1.0.2/dist/goong-geocoder.css" rel="stylesheet" type="text/css"/>

<!-- Promise polyfill script required to use Goong Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

Dùng control element goong-geocoder để search các địa điểm qua Goong Autocomplete API. Điền API key các bạn đã tạo tại <add your API key here>.

<div id="map"></div>
<script>
  goongjs.accessToken = "<add your Maptiles key here>";
    var map = new goongjs.Map({
        container: 'map', // container id
        style: 'https://tiles.goong.io/assets/goong_map_web.json', // stylesheet location
        center: [105, 21], // starting position [lng, lat]
        zoom: 9 // starting zoom
    });
map.addControl(
new GoongGeocoder({
accessToken: "<add your API key here>",
goongjs: goongjs
})
);
</script>

Nếu muốn tùy chỉnh kích cỡ của control goong-geocoder, các bạn có thể dùng cách sau:

<style>
.geocoder {
position: absolute;
z-index: 1;
width: 50%;
left: 50%;
margin-left: -25%;
top: 20px;
}
.goongjs-ctrl-geocoder {
min-width: 100%;
}
</style>
<div id="map"></div>
<div id="geocoder" class="geocoder"></div>
 
<script>
	goongjs.accessToken = "<add your Maptiles key here>";
    var map = new goongjs.Map({
        container: 'map', // container id
        style: 'https://tiles.goong.io/assets/goong_map_web.json', // stylesheet location
        center: [105, 21], // starting position [lng, lat]
        zoom: 9 // starting zoom
});
 
var geocoder = new GoongGeocoder({
accessToken: "<add your API key here>",
goongjs: goongjs
});
 
document.getElementById('geocoder').appendChild(geocoder.onAdd(map));
</script>