Google Maps API cho phép lập trình viên tích hợp Google Maps vào trang web của họ. Google Maps API là một dịch vụ miễn phí, thƣờng không chứa quảng cáo, nếu sau này Google cho phép quảng cáo thì các công ty đặt quảng cáo phải tuân theo các quy định mà Google đặt ra.
Sử dụng Google Maps API có thể nhúng Google Maps vào một trang web cá nhân để che đi các dữ liệu cụ thể nào đó. Lúc đầu Maps API đƣợc viết bằng Javascript API, sau đó Maps API đã đƣợc mở rộng để chạy đƣợc API của Adobe Flash. Google Maps API miễn phí cho mục đích phi thƣơng mại, đƣợc dùng cho các trang web cho phép truy cập rộng rãi hoặc không thu phí truy cập. Các trang web không thỏa mãn nhu cầu khi sử dụng Google Maps API có thể mua Google Maps API Premier.
Thành công của Google Maps API đã sinh ra nhiều nền tảng khác gồm Yahoo! Map API, Bing Maps Platform, MapQuest Development Platform, OpenLayers.
Tất cả các ứng dụng Maps API cần tải Maps API bằng một khóa API. Khóa API cho phép giám sát ứng dụng và đảm bảo Google có thể trao đổi với ngƣời dùng về
ứng dụng khi cần. Nếu ứng dụng dùng Maps API vƣợt quá hạn mức cho phép, ngƣời dùng cần phải tải Maps API bằng khóa API để mua thêm hạn mức sử dụng. Để tạo khóa API, cần vào địa chỉ https://code.google.com/apis/console và đăng nhập bằng tài khoản Google, chọn đƣờng dẫn Services từ danh sách bên trái, kích hoạt dịch vụ Google Maps API v3, chọn đƣờng dẫn API Access từ danh sách bên trái, trong trang API Access sẽ thấy khóa API trong mục Simple API Access. Ứng dụng có Maps API sử dụng Key for browser apps. Một khóa có thể đƣợc dùng cho bất kỳ trang web nào. [4]
Để đƣa Maps API vào trang web, cách đơn giản là nhúng vào trang html qua thẻ <script> <html> <head> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&se nsor=SET_TO_TRUE_OR_FALSE"> </script> </head>
Đƣờng dẫn có trong thẻ <script> chính là địa chỉ của file JavaScript chứa tất cả các ký hiệu và định nghĩa cần thiết để có thể sử dụng đƣợc Google Maps API. Thẻ <script> này là bắt buộc phải có.
Tham số “key” chứa khóa API của ứng dụng.
Tham số “sensor” cũng là tham số bắt buộc, chỉ ra rằng ứng dụng có sử dụng cảm biến để xác định vị trí của ngƣời dùng hay không (ví dụ bộ định vị GPS).
Nếu ứng dụng là HTTPs, thay vì khai báo HTTP, cần phải khai báo HTTPS:
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor= SET_TO_TRUE_OR_FALSE"
type="text/javascript"></script>
Ngoài ra còn một tham số libraries là tham số tùy chọn để xác định xem có sử dụng “Libraries” hay không. “Libraries” là một module mã nguồn cung cấp bổ sung các chức năng cho JavaScript API.
Để bản đồ hiển thị đƣợc trên trang web, cần phải tạo ra thành phần <div> và tham chiếu đến thành phần này trong mô hình đối tƣợng văn bản của trình duyệt (DOM).
Thuộc tính zoom xác định độ phân giải để hiển thị màn hình, mức zoom 0 ứng với bản đồ thu nhỏ của toàn bộ trái đất, các mức cao hơn thì độ phân giải cao hơn và thể hiện đƣợc ít vùng hơn.
Khi khởi tạo bản đồ cũng cần phải khởi tạo loại bản đồ (MapType). MapType là một giao diện định nghĩa việc hiển thị và sử dụng bản đồ và việc chuyển đổi hệ tọa độ từ hệ tọa độ của màn hình máy tính sang hệ tọa độ thế giới thực. Mỗi loại bản đồ chứa một số phƣơng thức để xử lý việc giữ và thả các lát cắt và các thuộc tính. Có 4 loại bản đồ cơ bản: [5]
- ROADMAP: hiển thị lát cắt 2D của bản đồ thế giới. - SATELITTE: hiển thị lát cắt chụp ảnh.
- HYBRID: hiển thị bản đồ kết hợp giữa lát cắt chụp ảnh và lát cắt phân lớp các điểm nổi bật (đƣờng phố, tên thành phố…).
- TERRAIN: hiển thị lát cắt địa hình vật lý để hiển thị độ cao và nƣớc (núi, sông…).
Có thể thay đổi loại bản đồ bằng cách thiết lập thuộc tính mapTypeId (khởi tạo đối tƣợng Map option hoặc gọi phƣơng thức setMapTypeId().
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
Bản đồ hiển thị bằng Google Maps API chứa các thành phần giao diện ngƣời dùng cho phép ngƣời dùng tƣơng tác với bản đồ. Những thành phần này đƣợc gọi là các điều khiển, có thể đƣợc nhúng vào trong ứng dụng Google Maps API. Một số điều khiển cơ bản có thể liệt kê nhƣ sau: [4]
- Zoom control: hiển thị nút “+/-” cho phép phóng to, thu nhỏ bản đồ. Điều khiển này mặc định đƣợc đặt ở góc trái trên cùng của bản đồ (trên các thiết bị không cảm ứng) hoặc góc trái dƣới cùng (trên các thiết bị cảm ứng). Để chỉnh sửa điều khiển này có thể sử dụng lựa chọn ZoomControlOptions.
- Pan control: hiển thị nút để quay bản đồ. Điều khiển này đƣợc đặt mặc định ở góc trái trên cùng của bản đồ với các thiết bị không cảm ứng. Để chỉnh sửa điều khiển này có thể sử dụng lựa chọn PanControlOptions. - Scale control: hiển thị thành phần chia tỷ lệ bản đồ. Thành phần này
không đƣợc kích hoạt mặc định. Để chỉnh sửa điều khiển này có thể sử dụng lựa chọn ScaleControlOptions.
- MapType control: cho phép ngƣời dùng chuyển giữa các kiểu bản đồ. Thành phần này đƣợc đặt mặc định ở góc phải trên cùng của bản đồ. Để chỉnh sửa điều khiển này có thể sử dụng lựa chọn MapTypeControlOptions.
- Street View control: chứa các biểu tƣợng kéo đƣợc vào bản đồ để kích hoạt Street View. Thành phần này đƣợc đặt mặc định ở góc trái trên
cùng của bản đồ. Để chỉnh sửa điều khiển này có thể sử dụng lựa chọn StressViewControlOptions.
- Rotate control: chứa biểu tƣợng một vòng tròn nhỏ cho phép quay bản đồ chứa các hình xiên. Biểu tƣợng này đƣợc đặt mặc định ở góc trái trên cùng của bản đồ. Để chỉnh sửa điều khiển này có thể sử dụng lựa chọn RotateControlOptions.
- Overview Map control: hiển thị ánh xạ của bản đồ hiện tại dƣới vị trí rộng hơn. Thành phần này đƣợc đặt mặc định ở góc phải dƣới cùng của bản đồ. Để chỉnh sửa điều khiển này có thể sử dụng lựa chọn OverViewMapControlOptions. (adsbygoogle = window.adsbygoogle || []).push({});
Một số điều khiển mặc định đƣợc hiển thị trên bản đồ trong khi một số khác chỉ đƣợc hiển thị khi cài đặt thuộc tính là true.
Mỗi điều khiển chứa thuộc tính vị trí (position) thuộc kiểu ControlPosition giúp xác định xem điều khiển sẽ đƣợc đặt ở đâu trên bản đồ. Các vị trí hỗ trợ nhƣ sau: [4]
- TOP_CENTER: điều khiển đặt ở chính giữa, trên cùng của bản đồ. - TOP_LEFT: điều khiển đặt ở trên cùng bên trái của bản đồ.
- TOP_RIGHT: điều khiển đặ ở trên cùng bên phải của bản đồ.
- LEFT_TOP: điều khiển đặt ở phía trên, bên trái, dƣới thành phần TOP_LEFT.
- RIGHT_TOP: điều khiển đặt ở phía trên bên phải, dƣới thành phần TOP_RIGHT.
- LEFT_CENTER: điều khiển đặt ở bên trái, phía giữa, nằm giữa TOP_LEFT và BOTTOM_LEFT.
- RIGHT_CENTER: điều khiển đặt ở bên phải, phía giữa, nằm giữa TOP_RIGHT và BOTTOM_RIGHT.
- LEFT_BOTTOM: điều khiển đặt ở phía dƣới, bên trái, trên thành phần BOTTOM_LEFT.
- RIGHT_BOTTOM: điều khiển đặt ở phía dƣới, bên phải, trên thành phần BOTTOM_RIGHT.
- BOTTOM_CENTER: điều khiển đặt ở chính giữa, dƣới cùng của bản đồ. - BOTTOM_LEFT: điều khiển đặt ở chính giữa, dƣới cùng của bản đồ. - BOTTOM_RIGHT: điều khiển đặt ở chính giữa, dƣới cùng của bản đồ. Ngoài việc sử dụng các điều khiển sẵn có của API, ngƣời dùng có thể tự tạo ra các điều khiển riêng. Để tạo ra các điều khiển cần tuân theo một số nguyên tắc nhƣ
định nghĩa CSS cho thành phần điều khiển, xử lý tƣơng tác với ngƣời dùng hoặc bản đồ qua xử lý sự kiện, tạo thành phần <div> để giữ điều khiển và thêm điều khiển vào thuộc tính controls của bản đồ.