Phần tử cơ bản để bắt đầu hiểu về Google Maps API application là phần tử ‘map’.
Ví dụ đơn giản sau hiển thị một trang web chứa bản đồ 1000x500 với trung tâm là Hà Nội, Việt Nam :
H3.3: map_api_basic.html
Trong thực hiện, chúng ta có một sốđiều cần lưu ý: •Thẻ ‘script’ thực hiện việc chèn Maps API. •Phần tử ‘div’ để chứa Map.
•Hàm JavaScript để tạo đối tượng “map”.
•Chúng ta khởi động đối tượng ‘map’ đó từ sự kiện ‘onLoad’ của thẻ
‘body’.
Để hiểu sâu hơn, chúng ta có những bước sau:
- Thực hiện việc load Google Maps API
Trang web của bạn phải chứa một script trỏ tới URL
“http://maps.google.com/maps?file=api&v=2&key=yourkey” , nó chứa những biểu tượng và định nghĩa cần thiết cho sử dụng Google Maps API.
- Phần tử Map DOM
Chúng ta tạo ra một phần tử ‘div’ và tham chiếu tới phần tử này trong DOM của trình duyệt (document object model).
- Đối tượng cơ bản – Gmap2
Ở đây chúng ta tạo một đối tượng ‘map’ sử dụng toán tử ‘’, đặc trưng một bản đồ là lớp Gmap2. Đối tượng của class định nghĩa một bản đồ trên một trang web.
Khi bạn tạo một đối tượng ‘map’ mới, bạn xác định một nốt DOM mới trong trang (thường sử dụng phần tử ‘div’) như một container cho bản đồ. Sau
đó chúng ta tham chiếu tới phần tử thẻ ‘div’ này thông qua
document.getElementById(). - Khởi động map <script src="http://maps.google.com/maps?file=api&v=2&key=yourkey " type="text/javascript"> </script>
<div id="my_map " style="width: 1000px; height: 500px"></div>
var map = new GMap2(document.getElementById("my_map "));
map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.setUIToDefault();
Một khi chúng ta đã tạo một map qua hàm tạo Gmap2, chúng ta phải khởi động nó. Việc này được hoàn thành với việc sử dụng hàm setCenter(). Hàm setCenter() yêu cầu một GlatLng chỉ ra tọa độ và một tham số chỉ ra độ
phóng đại, chú ý rằng hàm này phải được gửi trước tất cả các hàm trên map, bao gồm thiết lập và các thuộc tính khác của map.
Chúng ta gọi hàm setUIToDefault() để thiết lập giao diện bản đồ, bao gồm việc chuyển động quay và phóng to - thu nhỏ, lựa chọn loại bản đồ, ...
- Thực hiện loading map
Để đảm bảo bản đồ được đặt trên trang sau khi trang được load, chúng ta chỉ thực hiện hàm khi mà phần tử <body> của trang HTML nhận được một sự kiện onload.
Hàm Gunload() là một hàm chức năng thiết kếđể ngăn rò rỉ bộ nhớ.
- Vĩđộ và Kinh độ
Đối tượng GLatLng cung cấp một cơ chế cho phép bạn tham chiếu tới các vị trí của bản đồ. Bạn xây dựng đối tượng GlatLng, thông qua tham số {vĩ độ, kinh độ} nhưđược sử dụng trong bản đồ.