LẬP TRÌNH GOOGLE MAPS API - BÀI 5 - CÁC KIỂU BẢN ĐỒ TRONG GOOGLE MAPS

Có 04 kiểu bản đồ trong Google Maps

• ROADMAP (bản đồ 2D mặc định)
  
• SATELLITE (bản đồ hình ảnh vệ tinh)
  
• HYBRID (hình vệ tinh + đường phố, tên các địa điểm)
  
• TERRAIN (bản đồ địa hình rừng, núi,sông..)
  

Kiểu bản đồ được xác định bên trong thuộc tính đối tượng Map, thiết lập thuộc tính mapTypeId:

var mapProp = {
  center:new google.maps.LatLng(10.824811, 106.677836),
  zoom:7,
  mapTypeId: google.maps.MapTypeId.HYBRID
};

hoặc gọi phương thức của đối tượng map: setMapTypeId() method:

map.setMapTypeId(google.maps.MapTypeId.HYBRID);

1 - Xem Google Maps theo phối cảnh 45

02 loại bản đồ SATELLITE và HYBRID hỗ trợ xem hình ảnh phối cảnh 45° ở 1 vài khu vực (chỉ khi bạn phóng to).

LẬP TRÌNH GOOGLE MAPS API - Bài 4 – CÁC ĐIỀU KHIỂN

1 - Những đối tượng ĐIỀU KHIỂN MẶC ĐỊNH

• Zoom – với 2 nút (+) và (-) để phóng xa thu gần
  
• Pan - Hiển thị các nút di chuyển (trên di động???)
  
• MapType – kiểu hiển thị (bản đồ 2d hay ảnh vệ tinh...)
  
• Street View – xem đường phố thật bằng cách nắm hình nộm Pegman bỏ vào bản đồ (có chỗ xem được có chỗ không)
  

Và 1 số đối tượng bổ sung:

• Scale – thu phóng xa gần.
  
• Rotate – xoay hướng bản đồ.
  
• Overview Map – hiển thị 1 bản đồ nhỏ thumbnail phản ánh phần bản đồ đang hiển thị.
  

Bạn có thể thêm các điều khiển này bằng cách thêm thuộc tính khi tạo map (bên trong MapOptions) hoặc bằng cách gọi phương thức setOptions()


disableDefaultUI:true

LẬP TRÌNH GOOGLE MAPS API – BÀI 3 XỬ LÝ SỰ KIỆN

1 - Click vào điểm đánh dấu để ZOOM

Tôi sử dụng lại đoạn code hiển thị điểm đánh dấu (Marker) ở chương trước.

Bây giờ cái chúng ta muốn làm là khi click chuột vào điểm đánh dấu bản đồ sẽ phóng to ra.

Đây là phần code thêm vào hàm initialize()

google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });

2 - Quay về điểm đánh dấu

Chúng ta sẽ lập trình sao cho sau 3 giây kể từ khi bản đồ bị thay đổi vị trí sẽ tự động quay về điểm đánh dấu (trọng tâm).

google.maps.event.addListener(map,'center_changed',function() {
  window.setTimeout(function() {
    map.panTo(marker.getPosition());
  },3000);
});

Lập trình Google Maps API: Bài 2 – Vẽ đối tượng lên Google Maps (Overlays)

Các loại đối tượng sau đây có thể vẽ lên bản đồ Google Maps :

• Marker (điểm đánh dấu) – tọa độ 01 điểm trên bản đồ. Điểm đánh dấu này có thể thay thế bằng 01 file hình.
• Polyline ( các đường thẳng)
• Polygon (hình đa giác) – là tập hợp các đường thẳng “khép kín”.
• Hình tròn và hình chữ nhật
• Info Windows – 01 cửa sổ popup hiển thị thông tin lên bản đồ.
• Custom overlays

Các bạn nên thuộc tên các đối tượng Overlays bằng tiếng Anh để sau này có thể search hoặc đọc tài liệu trên site google developer.

1- Thêm điểm đánh dấu (Marker)

Phương thức Marker tạo ra 01 điểm đánh dấu mới trên bản đồ. (chú ý rằng phải thiết lập giá trị cho thuộc tính position).

Thêm điểm đánh dấu vào bản đồ bằng phương thức setMap()

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);

Điện thoại di động

Hệ điều hành Android

Hệ điều hành IOS

Kiến thức Hệ Điều Hành - Bài 1

Hệ điều hành

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