NTM Solutions

Facebook Youtube Google+

Thứ Bảy, 20 tháng 8, 2016

Lập trình GOOGLE MAPS API - Bài 1: Google Maps API cơ bản

Bài 1: Google Maps API cơ bản

Cho phép bạn hiển thị bản đồ đường đi trên website của bạn.

Google Maps API (Application Programming Interface)

Phần hướng dẫn này tôi viết về lập trình Google Maps API.

Tôi mặc định các bạn đã biết về HTML + JavaScript (bạn nào chưa biết HTML hay JavaScript vui lòng xem lại phần hướng dẫn HTML, JavaScript).

Môi trường soạn thảo (IDE) bạn dùng gì cũng được (tôi xài Notepad++) miễn nó có hỗ trợ ngôn ngữ Java Script và có tô màu cho dễ nhìn càng hay.

Google Maps API cho phép bạn tùy biến bản đồ (tất nhiên của Google) và thông tin hiển thị trên bản đồ.
API là 1 tập hợp các hàm và phương thức có thể được sử dụng để viết chương trình phần mềm.

GOOGLE MAPS CƠ BẢN
Sau đây là ví dụ tạo 01 bản đồ với tâm điểm là thành phố Hồ Chí Minh

<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:
new google.maps.LatLng(10.854512, 106.640425),
zoom:
9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window,
'load', initialize);</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>

Phần giải thích

Bước 1: Thêm thư viện Google API vào trang web

Thư viện Google Maps API là 1 thư viện viết bằng Java Script.Ta thêm vào phần <head></head> của trang web bằng thẻ
<script src="http://maps.googleapis.com/maps/api/js"></script>

Bước 2: Thiết lập các thuộc tính của bản đồ
Tạo hàm thiết lập bản đồ
function initialize() {
}

Trong hàm này bạn tạo 01 đối tượng (mapProp) để thiết lập các thuộc tính của bản đồ
var mapProp = {
  center:new google.maps.LatLng(10.854512, 106.640425),
  zoom: 9,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

center: xác định tâm điểm của bản đồ.Đối tượng LatLng để xác định tọa độ chính xác của tâm điểm (latitude:vĩ độ, kinh độ:longitude).
Để biết tọa độ của 1 vị trí bất kỳ, mở Google Maps-> nhấp phải lên bản đồ chọn Đây là gì? (What is here?)
Zoom: độ phóng đại (số càng lớn càng gần)


mapTypeId: loại bản đồ
  • ROADMAP (bản đồ 2D mặc định)
  • SATELLITE (bản đồ hình vệ tinh)
  • HYBRID (hình vệ tinh + đường sá và tên thành phố)
  • TERRAIN (bản đồ địa hình đồi núi,sông ngòi,...)
Bước 3: Tạo thẻ HTML chứa bản đồ
Tạo 1 thẻ <div> để chứa bản đồ. Sử dụng CSS định kích thước thẻ (cũng là kích thước bản đồ):
<div id="googleMap" style="width:500px;height:380px;"></div>
Bước 4: Tạo 01 đối tượng Map
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);


Đoạn code trên tạo 1 bản đồ mới trong thẻ HTML có id=”googleMap” dùng tham số là mapProp đã khai báo ở trên.


Bước 5: Thêm vào 1 sự kiện(eventListener) để tải bản đồ lúc website bắt đầu load


google.maps.event.addDomListener(window, 'load', initialize);


Ngoài ra, bạn cũng có thể gọi thư viện hàm Google API bằng cách dùng hàm (đặt ở <body> hay <head> đều được). Sau đó dùng sự kiện window.onload để gọi hàm này

function loadScript() {
  var script = document.createElement("script");
  script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
  document.body.appendChild(script);
}
window.onload = loadScript;


Và đây là thành quả cuối cùng

Xem video clip Bài 1: Google Maps là gì

<<video >>