Google API là ứng dụng được sáng tạo bởi Google dùng để sử dụng Maps trên app điện thoại và website. Trong bài viết hôm nay, hãy cùng compamarketing tìm hiểu về Google api là gì? 8 bước tạo Google Map API đơn giản. Cùng theo dõi để tham khảo nhé!
1. API là gì?
API (Application Programming Interface) là một giao diện lập trình sử dụng các kết nối phương pháp với phần mềm và thư viện khác. API nằm trong hệ điều hành Windows và thậm chí Twitter cũng có web này. Tuy nhiên, trong mỗi nền tảng, API được sử dụng với nhiều ứng dụng khác nhau. API có thể hiểu giống như bàn phím, là bản đồ để kết nối người dùng với máy tính. Đây là giao diện phần mềm giữa hệ điều hành và chương trình.
Mỗi API cho Linux và Windows hoạt động khác nhau. API đang tìm kiếm mức độ truy cập bị cắt xén đối với các tệp đã sử dụng. Nói một cách đơn giản, API giống như công cụ để tạo phần mềm. API là nghệ thuật mới của Microsoft để xây dựng đến quá trình phân tích. API bao gồm: controller, routing, action response, loc container, filter, unit test, model binder, injection,… Ngoài ra, nó còn hỗ trợ các phương thức như: Post / Get / Delete / Put data.
2. Ứng dụng của API
2.1. Web API
Còn được gọi là hệ thống API được sử dụng trong trang web. Các trang web sử dụng các API cho phép bạn cập nhật, kết nối hoặc lấy dữ liệu dễ dàng hơn. Ví dụ, khi bạn tạo một chức năng đăng nhập thông qua Google, Twitter, Facebook, bạn đang gọi API Google. Bên cạnh đó, các ứng dụng trên điện thoại đều lấy dữ liệu thông qua API.
2.2. API trên hệ điều hành
Windows và Linux sử dụng các API để cung cấp dữ liệu, chỉ định các chức năng và sử dụng chúng như các phương pháp để kết nối. API giúp tạo phần mềm liên kết trực tiếp với hệ điều hành.
2.3. API của thư viện phần mềm hay framework
API sẽ quy định, mô tả các hành động mà thư viện dữ liệu cung cấp. Mỗi API có các điều khiển khác nhau và chúng giúp cho một chương trình ngôn ngữ có thể sử dụng các thư viện được xây dựng trong một chương trình ngôn ngữ khác. Ví dụ: bạn có thể yêu cầu thư viện tạo tệp PDF nhưng viết chúng bằng C ++.
3. Tính năng nổi bật của API
API sẽ hỗ trợ bạn xây dựng các HTTP đơn giản hơn và nhanh hơn. Nhờ mã nguồn mở, bạn có thể sử dụng bất kỳ ứng dụng khách nào có thể hỗ trợ JSON, XML. Đặc biệt, API hỗ trợ đầy đủ các thành phần HTTP như: URI, bộ nhớ đệm, forma nội dung, lập phiên bản, forma nội dung tiêu đề yêu cầu / phản hồi.
4. Ưu điểm của API
API có cấu hình đơn giản và hỗ trợ cao, có thể hỗ trợ đầy đủ RESTful và MVC như: định tuyến, kết quả hành động, chất kết dính mô hình, bộ lọc, bộ điều khiển, vùng chứa IoC, kiểm tra đơn vị, tiêm phụ thuộc với mã nguồn mở.
5. Tương tác giữa Server App và Google Servers
Bạn cần tạo một tài khoản tại https://console.developers.google.com để sử dụng API. Tất cả các đối tượng truy cập API phải thông qua Oauth để xác thực. Để thực hiện yêu cầu và truy cập API, người dùng cần có mã thông báo truy cập. Có thể nhận được mã thông báo tại Tài khoản dịch vụ được chứng nhận. Yêu cầu POST bao gồm các Tham số: loại cấp và Mã thông báo web JSON (JWT).
Đầu tiên là Jet-bearer và thứ hai là JWT bao gồm bất kỳ thông tin đăng nhập nào trong chuỗi được mã hóa trước đó. Trong đó:
- Tiêu đề được sử dụng để xác định thuật toán đăng nhập, được sử dụng để đăng nhập vào JWT.
- Phần Bộ xác nhận quyền sở hữu sẽ chứa email của tài khoản, thời gian hết hạn và phạm vi dịch vụ, v.v.
- Chữ ký của bộ yêu cầu và tiêu đề.
Sau khi yêu cầu được gửi và nhận bởi máy chủ, bạn sẽ có một mã thông báo truy cập để sử dụng trong 1 giờ. Sử dụng mã thông báo này để sử dụng các dịch vụ API của Google.
6. Tổng quan về Google Map API
6.1. Google Map API là gì?
Google Map là một bản đồ trực tuyến được áp dụng trên một trang web và ứng dụng di động miễn phí, do Google xuất bản và quản lý. Ứng dụng này cho phép người dùng sử dụng các tính năng như: tìm vị trí, tìm đường, hiển thị lộ trình tối ưu, hướng dẫn bắt xe buýt, các địa điểm chỉ định như bệnh viện, cây xăng, cây ATM, v.v.
Google Map API là phương pháp dùng để cho phép web B sử dụng dịch vụ hiển thị nội dung trong web A – Google Map thông qua Google Map API. Bản đồ tại web A sẽ được nhúng vào web B (cá nhân). Khi đó, web B có thể sử dụng tất cả các dịch vụ và tính năng mà Google Map đã cung cấp.
6.2. Một số ứng dụng của Google Map API
- Khi sử dụng Google Map API, bạn có thể đánh dấu trên bản đồ với tất cả thông tin về địa điểm đó như trường học, bệnh viện, máy ATM, v.v.
- Tính năng chỉ đường tối ưu, tìm địa điểm hoặc cung cấp cách tìm thông qua các dịch vụ có sẵn tại Google Map.
- Phân vùng rõ ràng các đặc khu như khu sản xuất, khu đô thị, khu ô nhiễm, v.v.
- Giám sát lưu lượng giao thông trong các khu vực được chỉ định.
6.3. Google Maps API thay đổi cách tính phí
API Google Map đã thay đổi cách tính phí cho các dịch vụ mà nó cung cấp. Khi tạo tài khoản mới, người dùng sẽ được sử dụng dịch vụ miễn phí trong giới hạn 200 USD / tháng. Điều này có nghĩa là bạn có thể phát triển các ứng dụng nhỏ (yêu cầu thấp) trong tháng đó miễn phí.
Ngoài ra, một số dịch vụ như Bản đồ động hay Bản đồ tĩnh cho di động đang được Google miễn phí để kích thích sự phát triển ứng dụng trên nền tảng có sẵn này.
6.4. Google Map API bị chặn ở Việt Nam
Việt Nam nằm trong danh sách cấm sử dụng Google Map API. Do đó, để có thể sử dụng MAP APO, bạn cần có Tài khoản thanh toán mới và phải nằm ngoài danh sách bị chặn mới có thể sử dụng được.
7. Hướng dẫn tạo Google Map API nhanh
Nếu bạn đã nắm vững khái niệm API Google là gì và cách thức hoạt động của nó. Bạn cũng có thể dễ dàng tạo Google Map Api bằng một số bước cơ bản:
- Bước 1: Truy cập vào Google API Console -> chọn Select a project (mỗi project sẽ có nhiều thư viện API)
- Bước 2: Thêm project mới bằng cách nhấn vào New project.
- Bước 3: Điền đầy đủ thông tin vào các mục project name và location -> chọn Create.
- Bước 4: Đến project vừa tạo, chọn APIs & Service -> sau đó chọn Credentials.
- Bước 5: Chọn Create Credentials -> sao chép Your API Key -> chọn Restrict Key.
- Bước 6: Điền mọi thông tin cần thiết -> chọn Save.
Điền thông tin theo hướng dẫn sau:
- Name: Đặt tên cho API để dễ dàng quản lý về sau
- Application restrictions: Http referrers (web sites)
- Website restrictions Nhập 2 giá trị sau
- *.your-domain.com/*
- https://your-domain.com/*
- API restrictions: Don’t restrict key
- Save: Lưu cài đặt API
Lưu ý: your-domain.com là tên miền của bạn muốn sử dụng Google Maps API.
- Bước 7:
Truy cập Project bạn vừa tạo → APIs & Servives → Library
Nhập các Thư viện sau → Enable:
- Maps JavaScript API
- Directions API
- Maps Embed API
- Geocoding API
- Places API
- Bước 8: Chọn Dashboard để kiểm tra thư viện xem đã cài đặt thành công hay chưa.
Qua 8 bước cơ bản, chúng ta đã hoàn thành quy trình tạo Google Map Api.
8. Tạo 1 Google Map đơn giản
8.1. Tạo 1 API Key
- Truy cập vào
https://code.google.com/apis/consolevà đăng nhập bằng tài khoản gmail của mình. - Click the APIs & auth -> APIs.
- Kéo xuống dưới tìm
Google Maps JavaScript API v3và kích hoạt dịch vụ bằng việc click vào button chuyển trạng thái từOFFsangON. - Click
API Access->Create new Browser key..., một API key sẽ hiện lên và bạn sẽ coppy lại để sử dụng.
8.2. Lấy kinh độ, vĩ độ để hiển thị bản đồ
Truy cập vào http://www.latlong.net/ và nhập địa điểm cần tìm.
8.3. Hiển thị bản đồ
<!DOCTYPE html>
<html>
<head>
<!– Add Google API Key –>
<script src=”http://maps.googleapis.com/maps/api/js?key=#{your_app_key}&sensor=false”>
</script>
<script>
//Khoi tao Map
function initialize() {
//Khai bao cac thuoc tinh
var mapProp = {
//Tam ban do, quy dinh boi kinh do va vi do
center:new google.maps.LatLng(51.508742, -0.120850),
//set default zoom cua ban do khi duoc load
zoom:5,
//Dinh nghia type
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//Truyen tham so cho cac thuoc tinh Map cho the div chua Map
var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head><body>
<!– Khai bao the div chua Map –>
<div id=”googleMap” style=”width:500px;height:380px;”></div>
</body>
</html>
9. Google Maps Overlays (Lớp phủ)
- Lớp phủ(overlays) là các đối tượng trên bản đồ, được xác định bởi tọa độ vĩ độ/ kinh độ.
- Các loại lớp phủ :
Marker: xác định một điểm trên bản đồ hoặc đánh dấu địa điểm dựa trên vĩ độ và kinh độ, có thể được hiển thị bằng icon (hình ảnh) tùy chỉnh của người dùng ví dụ như icon dưới đây:
Polyline: chuỗi các đường thẳng trên bản đồ.Polygon: chuỗi các đường thẳng trên bản đồ và các khối “closed” (tô màu cho 1 khối kín các điểm)Circle and Rectangle: đường tròn và hình chữ nhật.Info Windows: hiển thị nội dung trong 1popup ballonở phía trên của map.Custom overlays- Chi tiết : http://www.w3schools.com/googleAPI/google_maps_overlays.asp
9.1. Add 1 marker
add marker vào map bằng cách sử dụng method setMap() :
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
position: bắt buộc, quy định tọa độ LatLng của điểm được đánh dấu. (ở đây là tọa độ của biếnmyCenter)
9.2. Hiệu ứng cho Marker
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
animation: cách thức chuyển động của icon của điểm đánh dấu. CÓ 2 cách : DRAG (đứng yên), Bounce (dao động theo quỹ đạo lên – xuống).
9.3. Icon thay thế cho Marker
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
icon(tùy chọn): hình ảnh tùy chọn mà bạn muốn hiển thị thay thế hình ảnh mặc định. Dùng tùy chọn này thay thế chomarker.setIcon(link đến hình ảnh trong thư mục), ví dụ choicon:'pinkball.png'-> kết quả :
9.4. Polyline
Một Polyline là 1 đường được vẽ để nối 1 loạt các tọa độ(các điểm chỉ định trước (ví dụ : lộ trình của 1 chuyến đi, 1 khu vực địa lý… )
Các thuộc tính của 1 Polyline :
path: quy định cụ thể 1 số điểm (kinh độ – vĩ độ) cho dòngstrokeColor: màu cho dòng (màu định dạng format: “#FFFFFF”)strokeOpacity: độ mờ đục của dòng (là giá trị trong khoảng 0.0 và 1.0)strokeWeight: xác định độ rộng của dòng (tính theo pixel)editable: xác định quyền chỉnh sửa của người dùng đối với dòng (true / false)
// định nghĩa 1 trip: stavanger-amsterdam-london
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
//xác định các điểm cần nối trên bản đồ
path:myTrip,
// màu cho dòng : màu xanh lục
strokeColor:"#0000FF",
// độ đậm : 0.8
strokeOpacity:0.8,
// độ rộng line : 2px
strokeWeight:2
});
-> kết quả :
9.5. Polygon
Polygon tương tự như polyline nhưng có thêm tính năng khoanh vùng (xác định 1 tập hợp các điểm tạo thành 1 khối kín)
Thuộc tính tương tự như polyline nhưng có thêm 2 thuộc tính sau:
fillColor: chỉ định màu của khu vực được xác định (màu định dạng : “#FFFFFF”)fillOpacity: độ mờ đục của vùng xác định (giá trị trong khoảng 0.0 -> 1.0)
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
-> kết quả :
9.6. Circle
Các thuộc tính :
center: xác định trung tâm của vòng trònradius: bán kính của đường tròn (mét)strokeColor: màu cho đường viền (định dạng : “#FFFFFF”)strokeOpacity: độ mờ đục của đường viền (giá trị trong khoảng 0.0 -> 1.0)strokeWeight: độ rộng của đường viền (px)fillColor: chỉ định màu của khu vựcbên trong đường tròn (màu định dạng : “#FFFFFF”)fillOpacity: độ mờ đục của vùng xác định (giá trị trong khoảng 0.0 -> 1.0)editable: xác định quyền chỉnh sửa của người dùng đối với dòng (true / false)
var myCity = new google.maps.Circle({
center:amsterdam,
radius:40000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
-> kết quả :
9.7. InfoWindow
show 1 InfoWindow là 1 đoạn text cho 1 marker:
var infowindow = new google.maps.InfoWindow({
// nội dung của InfoWindow
content:"Hello World!"
});
infowindow.open(map,marker);
-> kết quả :
9.8. Tổng hợp các nội dung trên
- Ví dụ về đánh dấu địa điểm cho tòa nhà Landmark72 : Vào trang http://www.latlong.net/ để lấy tọa độ của địa điểm bạn muốn (ví dụ ở đây là
(21.017324, 105.784054)) để điền vào đoạn code sau :
<!DOCTYPE html>
<html>
<head>
<script
src=”http://maps.googleapis.com/maps/api/js”>
</script><script>
// khai báo tọa độ của place
var myCenter=new google.maps.LatLng(21.017324, 105.784054);function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};var map=new google.maps.Map(document.getElementById(“googleMap”),mapProp);
var marker=new google.maps.Marker({
position: myCenter,
//icon: “pinkball.png”,
//title: “Landmark 72 ^_^”,
//draggable: true,
//animation:google.maps.Animation.BOUNCE,
});marker.setMap(map);
}google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head><body>
<div id=”googleMap” style=”width:500px;height:380px;”></div>
</body>
</html>
Link demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_overlays_marker
Trong đó :
- map(tùy chọn): quy định đối tượng bản đồ được đánh dấu. nếu thuộc tính này được khai báo trong đây nó sẽ thay thế cho
marker.setMap(map). title(tùy chọn): tiêu đề của địa điểm (khi trỏ chuột vào vị trí điểm đó).draggable(tùy chọn): thể hiện sự chuyển động của điểm được đánh dấu. Nếu set giá trị TRUE thì tính động được khởi động (có thể di chuyển icon đánh dấu điểm hiện tại sang 1 địa điểm khác), hình minh họa :
10. Google Map Event
Sự kiện gồm 2 loại:
- UI Event: Lắng nghe sự kiện từ người dùng.
- MVC State change: Lắng nghe sự kiện từ sự thay đổi giá trị của các thuộc tính trên Map. Để lắng nghe sự kiện, ta sử dụng phương thức
addListener(). Phương thức này nhận vào 1 đối tượng, 1 kiểu sự kiện để lắng nghe và 1 phương thức xử lý khi sự kiện xảy ra.
10.1. UI Event
- Một số đối tượng trong Maps API được thiết kế để đáp ứng với sự kiện người sử dụng chẳng hạn như các sự kiện từ chuột hoặc bàn phím . Một đối tượng
google.maps.Markercó thể lắng nghe người sử dụng các sự kiện sau đây :click,dblclick,mouseup,mousedown,mouseover,mouseout.
Ví dụ:
- Click vào 1 marker để zoom bản đồ:
// Phóng to 9 lần khi click marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Demo: http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_click
- Mở 1 InfoWindow khi click vào Marker:
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
//bắt sự kiện click marker
google.maps.event.addListener(marker, 'click', function() {
//mở infowindow
infowindow.open(map,marker);
});
Demo: http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_infowindow
10.2. MVC State Change
Các sự kiện:
zoom_changed: sự kiện sẽ thực thi khi ta zoom size trên mapcenter_changed: sự kiện sẽ thực thi khi thuộc tínhcentercủa map thay đổititle_changed: sự kiện sẽ thực thi khi thuộc tính title của map thay đổiheading_changed: sự kiện sẽ thực thi khi thuộc tính heading của map thay đổidragstart: sự kiện sẽ thực thi khi người dùng bắt đầu drag bản đồdrag: sự kiện sẽ thực thi khi người dùng drag bản đồdragend: sự kiện sẽ thực thi khi người dùng kết thúc drag bản đồmaptypeid_changed: sự kiện sẽ thực thi khi thuộc tính maptypeid của map thay đổi b. Event Listeners (lắng nghe sự kiện)
- Handling Events
Ví dụ:
- Pan Back to Marker – Quay lại điểm đánh dấu (quay lại vị trí cũ sau n giây sau khi kéo marker)Khi di chuyển chuột làm thay đổi bản đồ, sự kiện này giúp điểm đánh dấu (marker) luôn hiển thị ở vị trí trung tâm của bản đồ
google.maps.event.addListener(map,'center_changed',function() {
// set thời gian quay lại là 3s
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});
Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_pan
- Truyền tham số cho UI Events Các sự kiện người dùng trong Google Map API thường được thêm vào một tham số sự kiện và tham số có thể được truy cập bằng sự kiện listener khi sự kiện xảy ra. Ví dụ:
- Set Markers and Open InfoWindow for Each Marker (tạo marker và infowindow tương ứng khi click vào 1 poin nào đó trong bản đồ)
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
//hàm placeMarker() sẽ thay thế 1 điểm được click bằng 1 marker và infowindow có chứa thông tin về tọa độ của điểm
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
-> kết quả :
Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_infowindow
- Sử dụng Closeres trong sự kiện Listerner Các event Listerner thường sử dụng Closures để truy cập đến các biến thường không nằm trong đối tượng của các sự kiện đó. Ví dụ: đoạn code dưới đây dùng Clousures để gán một thông điệp bí mật đến tập các marker, khi click vào mỗi marker sẽ hiện lên một phần của thông điệp ấy :
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Thêm ngẫu nhiên 5 marker
var southWest = new google.maps.LatLng(-31.203405, 125.244141);
var northEast = new google.maps.LatLng(-25.363882, 131.044922);
var bounds = new google.maps.LatLngBounds(southWest, northEast);
map.fitBounds(bounds);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var position = new google.maps.LatLng(
southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: position,
map: map
});
marker.setTitle((i + 1).toString());
attachSecretMessage(marker, i);
}
}
// 5 markers chỉ ra 1 secret message khi được click nhưng thông điệp không phải là trong dữ liệu mẫu của marker
function attachSecretMessage(marker, num) {
var message = ['This', 'is', 'the', 'secret', 'message'];
var infowindow = new google.maps.InfoWindow({
content: message[num]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Demo: https://google-developers.appspot.com/maps/documentation/javascript/examples/event-closure
- Thiết lập và truy xuất thuộc tính trong
event HandlersTrong các sự kiệnMVC State changechúng ta có thể truy xuất và thiết lập giá trị trong quá trình sự kiện được kích hoạt bằng các phương thứcgetProperties(),setProperties()trên đối tượng thực thi sự kiện.Ví dụ: ta sẽ thiết lập một xử lý sự kiện để đáp ứng phóng to bản đồ bằng cách đưa ra một cửa sổ thông tin hiển thị mức độ đó.
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
- Listening to
DOM Events(lắng nghe sự kiện từ DOM)Google Map Api hỗ trợ hai cách lắng nghe sự kiện từ DOM:
** a. Sử dụng phương thức**
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
// quay trở lại marker sau 3 giây kể từ khi vị trí trung tâm bị thay đổi
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
// sử dụng phương thức addDomListener để nghe ngóng sự kiện
google.maps.event.addDomListener(window, 'load', initialize);
Giải thích :
addDomListener(instance:Object, eventName:string, handler:Function)
instance: có thể là một DOM element hỗ trợ bởi brownser bao gồm:các thành phần của DOM: window hoặc document.body.myform.tên của element như: document.getElementById(“foo”).
evenName: tên sự kiện, ở đây là'load'.handler: là một phương thức khởi tạo map.
b. Sử dụng sự kiện onload() của tài liệu HTML trong thẻ
<script>
function initialize() {
// khởi tạo bản đồ
}
</script>
<body onload=”initialize()”>
<div id=”map-canvas”></div>
</body>
11. Map Controls
11.1. The Default Controls (Control mặc định)
Control mặc định thiết lập cho Google Map gồm:
Zoom– hiển thị 1 slider hoặc button “+/-” để điều khiển độ zoom (zoom level) của bản đồPan– công cụ để dịch chuyển bản đồ sang trái, phải, trên, dưới.MapType– cho phép người dùng chuyển đổi giữa các loại bản đồ (roadmapvàsatellite)Street View– hiển thị 1 iconPegman(hình người) để có thể kéo bản đồ để enable Street View (xem chi tiết về đường phố).
Một số control khác
Scale– hiển thị 1 thành phần chia tỷ lệ bản đồRotate– hiển thị một biểu tượng nhỏ hình tròn để xoay bản đồOverview Map– hiển thị mộtthumbnail overview mapcho phép xem bản đồ hiện tại trong một khu vực rộng hơn.
Bạn có thể chỉ định control nào được hiển thị khi tạo bản đồ (bên trong MapOptions) hoặc gọi bởi setOptions() để thay đổi các tùy chọn.
Vô hiệu hóa các control mặc định
Thiết lập thuộc tính disableDefaultUI (trong Map options object) thành true:
disableDefaultUI:true
Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_disable
11.2. Bật tất cả các control
- Một số control xuất hiện trên bản đồ theo mặc định, trong khi những control khác sẽ không xuất hiện trừ khi ta thiết lập chúng.
- Thêm hoặc xóa các control từ bản đồ được quy định trong
Map options object. - Thiết lập control thành
trueđể làm nó hiển thị (visible). Thiết lập control thànhfalseđể ẩn nó đi. Ví dụ, bật tất cả các control:
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_add
Kết quả :
Kết quả
Chỉnh sửa controls
- Một số map control có thể cấu hình được.
- Các control có thể được sửa đổi bằng cách xác định các trường
control options. - Ví dụ, các tùy chỉnh để thay đổi một
Zoom controlđược quy định bởi trườngzoomControlOptions. TrườngzoomControlOptionscó thể chứa:`google.maps.ZoomControlStyle.SMALL` – hiển thị 1 `mini-zoom` control (chỉ có 2 button + và -) `google.maps.ZoomControlStyle.LARGE` – hiển thị `zoom control` trượt tiêu chuẩn `google.maps.ZoomControlStyle.DEFAULT` – chọn zoom control tốt nhất dựa trên kích thước `device` và `map`
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_modify1
- Chú ý : Khi modify 1 control, phải luôn
enablecontrol đầu tiên (set là true) - Các control có thể cấu hình khác là
MapType control - Có thể thiết lập type control bởi trường mapTypeControlOptions. Trường mapTypeControlOptions có thể chứa:
google.maps.MapTypeControlStyle.HORIZONTAL_BAR– hiển thị 1 button cho mỗi map typegoogle.maps.MapTypeControlStyle.DROPDOWN_MENU– chọn map type thông qua 1 dropdown menugoogle.maps.MapTypeControlStyle.DEFAULT– hiển thị hành vi mặc định (phụ thuộc kíchcỡ màn hình – screen size)
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_modify2
- Bạn cũng có thể xác định vị trí control, với thuộc tính
ControlPosition:
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
// vị trí top center
position:google.maps.ControlPosition.TOP_CENTER
}
Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_modify3
Control tùy chỉnh-Custom Controls
Dưới đây là ví dụ tạo một control tùy chỉnh mà luôn luôn đưa bạn trở lại London, khi click vào bản đồ(nếu bản đồ được kéo):
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);
Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_custom
Google Maps Types
Google Maps – Basic Map Types
ROADMAP(bản đồ truyền thống, default 2D map)SATELLITE(photographic map)HYBRID(photographic map + tên đường và tên thành phố)TERRAIN(bản đồ với hệ thống sông ngòi, núi….) Kiểu của map được xác định bởi thuộc tínhmapTypeId:
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
// định kiểu cho bản đồ là HYBRID
mapTypeId: google.maps.MapTypeId.HYBRID
};
Hoặc có thể gọi method setMapTypeId() :
map.setMapTypeId(google.maps.MapTypeId.HYBRID);Google Maps – 45° Perspective View (view phối cảnh 45°)
Bản đồ loại SATELLITE và HYBRID hỗ trợ xem phối cảnh hình ảnh 45° cho 1 số vùng xác định (chỉ các vùng ở zoom level cao)
Nếu zoom vào 1 vùng với view phối cảnh 45°, bản đồ sẽ tự động thay đổi phối cảnh, thêm nữa thêm vào 1 số thứ sau :
- Một la bàn hình bánh xe cho
Pan control, cho phép bạn xoay hình ảnh. - 1
Rotate controlnằm giữaPan controlvàZoom control, cho phép bạn xoay ảnh 90° - 1
toggle control(công tắc bật – tắt) để điều chỉnh chế độ view phối cảnh 45° - Ví dụ:
var mapProp = {
center:myCenter,
zoom:18,
mapTypeId:google.maps.MapTypeId.HYBRID
};
Kết quả :
Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_types_45
Google Maps – Disable 45° Perspective View – setTilt(0) (tắt chức năng view phối cảnh 45°)
Tắt chức năng này bằng cách gọi setTilt(0) trong Map object :
map.setTilt(0);
Tip : để enable 45° perspective view ở đằng sau, gọi setTilt(4
Google Maps API Reference
Maps API Map() Constructor
Tạo 1 Google Map :
var map = new google.maps.Map(document.getElementById(“googleMap”),mapOpt);
Định nghĩa và sử dụng
Map() constructor tạo 1 bản đồ mới bên trong 1 thành phần HTML xác định (thường là
)
Cú pháp
new google.maps.Map(HTMLElement,MapOptions)
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| HTMLElement | Xác định những thành phần HTML trong map |
| MapOptions | 1 đối tượng MapOptions chứa khởi tạo các biến/option |
Các method của Map()
| Phương thức | Giá trị trả về | Mô tả |
|---|---|---|
| fitBounds (LatLngBounds) | None (không có) | Tập hợp các khung nhìn với các giới hạn xác định |
| getBounds() | LatLng, LatLng | Trả về kinh độ/vĩ độ của phía Tây Nam và phía Đông Bắc của khung nhìn hiện tại |
| getCenter() | LatLng | Trả về kinh độ/vĩ độ (lat/lng) của trung tâm bản đồ |
| getDiv() | Node | Trả về 1 đối tượng DOM chứa bản đồ |
| getHeading() | number (số) | Trả về số nhóm compass heading các hình ảnh trên không (cho loại SATELLITE (vệ tinh) và HYBRID) |
| getMapTypeId() | HYBRID ROADMAP SATELLITE TERRAIN | Trả về kiểu của map |
| getProjection() | Projection | Trả về Projection hiện tại |
| getStreetView() | StreetViewPanorama | Trả về StreetViewPanorama mặc định gắn với map |
| getTilt() | number | Trả về góc tới cho hình ảnh trên không (tính bằng độ) – dùng cho SATELLITE và HYBRID |
| getZoom() | number | Trả về zoom level hiện tại của map |
| panBy(xnumber,ynumber) | none | thay đổi trung tâm của map bằng khoảng cách nhất định (pixel) |
| panTo(LatLng) | none | thay đổi trung tâm của map bằng LatLng |
| panToBounds(LatLngBounds) | none | pan bản đồ bằng giá trị tối thiểu cần thiết để chứaLatLngBounds |
| setCenter(LatLng) | none | |
| setHeading(number) | none | thiết lập các nhóm compass heading các hình ảnh trên không(đo bằng độ) từ hướng Bắc |
| setMapTypeId(MapTypeId) | none | thay đổi loại bản đồ |
| setOptions(MapOptions) | none | |
| setStreetView(StreetViewPanorama) | none | kết nối StreetViewPanorama vào bản đồ |
| setTilt(number) | none | thiết lập góc tới cho hình ảnh trên không (đo bằng độ) – dùng cho SATELLITE và HYBRID |
| setZoom(number) | none |
Properties of Map() – Thuộc tính
| Thuộc tính | Type | Mô tả |
|---|---|---|
| controls | Array.<MVCArray.<Node>> | Điều khiển thêm để đính kèm vào bản đồ |
| mapTypes | MapTypeRegistry | Một số đăng ký của trường MapType bởi chuỗi ID |
| overlayMapTypes | MVCArray.<MapType> | Loại bản đồ thêm cho overlay |
Events of Map() – Sự kiện của Map
| Event | Đối số | Mô tả |
|---|---|---|
| bounds_changed | None (không có) | Kích hoạt khi giới hạn khung nhìn thay đổi |
| center_changed | none | Kích hoạt khi thuộc tính trung tâm thay đổi |
| click | MouseEvent | Kích hoạt khi người dùng click vào bản đồ |
| dblclick | MouseEvent | Kích hoạt khi người dùng click đúp vào bản đồ |
| drag | none | Kích hoạt liên tục trong khi người dùng kéo bản đồ |
| dragend | none | kích hoạt khi người dùng ngừng kéo bản đồ |
| dragstart | none | kích hoạt khi người dùng bắt đầu kéo bản đồ |
| heading_changed | none | kích hoạt khi bản đồ thay đổi heading property |
| idle | none | kích hoạt sau khi pan hoặc zoom bản đồ |
| maptypeid_changed | none | kích hoạt khi mapTypeId thay đổi |
| mousemove | MouseEvent | kích hoạt khi chuột đi qua vùng bản đồ |
| mouseout | MouseEvent | kích hoạt khi chuột ra khỏi vùng bản đồ |
| mouseover | MouseEvent | kích hoạt khi chuột vào vùng bản đồ |
| projection_changed | none | kích hoạt khi projection thay đổi |
| resize | none | kích hoạt khi bản đồ (map) thay đổi kích cỡ |
| rightclick | MouseEvent | kích hoạt khi click chuột phải vào bản đồ |
| tilesloaded | none | kích hoạt khi tile hoàn thành việc load |
| tilt_changed | none | kích hoạt khi tilt thay đổi |
| zoom_changed | none | kích hoạt khi zoom thay đổi |
6.8.Controls
| Constructor/Object | Mô tả |
|---|---|
| MapTypeControlOptions | Tùy chọn cho việc sửa đổi 1 control (vị trí và style) |
| MapTypeControlStyle | Xác định loại bản đồ hiển thị (menu Drop-down hay các button) |
| OverviewMapControlOptions | Các tùy chọn cho việc render của overview map control |
| PanControlOptions | Các tùy chọn cho việc render của pan control (vị trí) |
| RotateControlOptions | Các tùy chọn cho việc render của rotate control (vị trí) |
| ScaleControlOptions | Các tùy chọn cho việc render của scale control (vị trí và style) |
| ScaleControlStyle | Xác định loại scale control để hiển thị |
| StreetViewControlOptions | Các tùy chọn cho việc render của street view pegman control (vị trí) |
| ZoomControlOptions | Các tùy chọn cho việc render của zoom control (vị trí và style) |
| ZoomControlStyle | Xác định loại zoom control để hiển thị (rộng hay hẹp) |
| ControlPosition | Xác định vị trí các control trên map |
Trên đây là Google api là gì? 8 bước tạo Google Map API đơn giản. Hy vọng compamarketing đã mang đến bạn những thông tin hữu ích. Nếu có bất kì thắc mắc gì, hãy để lại comment bên dưới cho compamarketing nhé! Chúc các bạn thành công và đừng quên theo dõi các bài viết chia sẻ về thủ thuật của compamarketing.