Triển khai Google Maps bằng Google Maps JavaScript API
Để sử dụng Google Maps JavaScript API trong dự án của bạn, bạn cần thực hiện các bước sau:
Tạo API Key:
• Truy cập vào Google Cloud Platform: https://console.cloud.google.com/ và tạo một dự án mới nếu chưa có.
Truy cập Project bạn vừa tạo → APIs & Servives → Library
![](https://forum.caeruxlab.com/assets/files/2024-02-07/1707284847-82393-2.png)
Tùy mục đích sử dụng, Enable các API sau:
• Maps JavaScript API
• Directions API
• Maps Embed API
• Geocoding API
• Places API
• Trong phần Credentials, tạo một API key.
![](https://forum.caeruxlab.com/assets/files/2024-02-07/1707284847-142183-3.png)
Giữ key cẩn thận nha ~
• Giới hạn API key (Restrict Key) nếu cần thiết (tùy theo mục đích sử dụng).
Ví dụ hạn chế Websites thì phải thêm URL vào nhé
![](https://forum.caeruxlab.com/assets/files/2024-02-07/1707285312-694270-4.png)
Hạn chế API được phép gọi (nhỡ có API nào đó chạy ngoài mục đích sử dụng mà ta không kiểm soát được là mất $ đó )
![](https://forum.caeruxlab.com/assets/files/2024-02-07/1707284847-239105-5.png)
Tạo xong API KEY thì thêm Map vào trang web thôi
<!DOCTYPE html>
<html>
<head>
<title>Bản đồ Google</title>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Tạo bản đồ với trung tâm là Hà Nội
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: 21.028923, lng: 105.830190}
});
// Thêm đánh dấu
var marker = new google.maps.Marker({
position: {lat: 21.028923, lng: 105.830190},
map: map,
title: 'Hà Nội'
});
}
</script>
</body>
</html>
1 vài thành phần cơ bản của map là: Map, Marker, LatLng (latitude, longitude = kinh độ, vĩ độ)
Map yêu cầu 1 tọa độ làm trung tâm, các options có thể tham khảo thêm tại docs
var opts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(latitude, longitude),
minZoom: 8,
maxZoom: 15,
fullscreenControl: false,
};
var map = new google.maps.Map(document.getElementById("map"), opts);
var latLng = new google.maps.LatLng(102.1313, 40.123);
var marker = new google.maps.Marker({
position: latLng,
optimized: false,
map: map,
icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
});
![](https://forum.caeruxlab.com/assets/files/2024-02-07/1707287367-604565-6.png)
Tham khảo bảng phí dịch vụ
https://mapsplatform.google.com/pricing/
Tài liệu đầy đủ nhất 😉
https://developers.google.com/maps/documentation/javascript