Tạo bản đồ có mini map với Google Map API

Tram Ho

Giới thiệu

Mình đang thực hiện chức năng sử dụng Google Map API để vẽ bản đồ trong dự án, trong đó có một số yêu cầu của Khách cần thực hiện, nên mình viết bài này để chia sẻ lại cách thức thực hiện những yêu cầu đó. Tóm tắt lại yêu cầu của Khách như sau

  • Tạo bản đồ có mini map để đổi chế độ view thay cho button mặc định, khi di chuyển map chính thì mini map cũng sẽ di chuyển theo
  • Tạo bản đồ với nhiều marker, thay icon marker
  • Ẩn Google logo, footer của Google Map

Mini map chính là phần map nhỏ của bản đồ Google Map mà chúng ta hay dùng, nó giống như hình sau đây:

Tạo Map từ Google Map API

Đầu tiên chúng ta cần viết mã HTML như sau

Tạo markers

Tiếp theo chúng ta cần tạo ra một danh sách marker bằng cách tao 1 mảng fakeMarkers, sau đó chạy vòng lặp để tạo markerinfo window như sau:

Tạo mini map

Để tạo được mini map thì mình sẽ tạo ra một map mới neo ở một element HTML có id=”mini-map” với typeMap của minimap sẽ là dạng satellite (mặc định ở map chính đang là dạng roadmap). Tiếp theo sẽ thêm event khi click vào minimap sẽ thay đổi map chính về satellite và ở mini map sẽ thay đổi typeMap về roadmap, cụ thể code như sau

Kết quả sẽ được như hình dứoi đây

Thêm CSS ẩn footer và logo Google

Để ẩn thì chúng ta cần override lại CSS mặc định của Google Map, đoạn code như sau

Các bạn có thể xem kết quả ở link sau đây

Kết luận

Mong rằng bài viết có thể giúp ích được cho các bạn đang tìm hiểu về Google Map API, nếu có câu hỏi hoặc góp ý nào hãy viết dưới comment nhé, thanks!

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo