Google Map API

Chương 1 : 
Trong khi mọi người đã quen với image tĩnh thì google lặng lẽ phát triển google maps từ khi đã hoàn thành gmail . Sau đó , họ đưa lên vệ tinh .
Qua cuốn sách này , chúng ta sẽ trải nghiệm từ thấp-> cao, với các ví dụ từ đơn giản -> phức tạp .
KML: Your First Map 
Trong năm 2006, google ra gói support cho file KML . Bạn có thể dễ dàng nhúng URL vào trong search box và google sẽ trỏ tới đó . Chúng ta sẽ không bàn sâu về nó , nhưng chúng ta sẽ thử 1 ví dụ đơn giản để chạy nó .
KML là viết tắt của : Keyhole Markup Language , nó là kết hợp của google code và XML .
Đầu tiên , chúng ta tạo file toronto.kml , và nội dung chúng ta sẽ mượn từ wikipedia . và chúng ta sẽ thấy vị trí chúng qua google maps .

 

toronto.kml 
 CN Tower 
The CN Tower (Canada's National Tower, Canadian National Tower), at 553.33 metres (1,815 ft., 5 inches) is the tallest freestanding structure on land. It is located in the city of Toronto, Ontario, Canada, and is considered the signature icon of the city. The CN Tower attracts close to two million visitors annually. http://en.wikipedia.org/wiki/CN_Tower 
 -79.386864,43.642426  

Để thấy kết quả , ta upload file kml lên host , và lên google maps , paste URL đó vào search field . ta sẽ thấy kết quả :
Giới thiệu về Wayfaring.com.
Đây là 1 dịch vụ mà nó sử dụng google api, và nó cho phép người dùng tạo map tại bất cứ nơi nào họ muốn . Chỉ cần 1 account tại website trên , bạn có thể tạo map mà bạn muốn.
Để biết thêm chi tiết, bạn thử tạo add a waypoint và add a route trong đó , sẽ hiểu được các tính năng của site .

Chương 2 : Getting Started
Trong chương này , bạn sẽ học cách tạo project google maps.
The first map :
Trong phần này , bạn sẽ học các google Api key , và sử dụng chúng sau này .
Keying Up : Trước khi bạn tạo google maps application, bạn cần có google maps api key . Để có nó, bạn cần vào http://www.google.com/apis/maps/signup.html để đăng kí nhận google api key , sau đó chúng ta nhận key , key của chúng ta có dạng : 
ABQIAAAAGZ-pnGJosgnPUTzQUU-KdBTR2osnlv5EkiJwpolcVjSqqg8kehQFBKfr6wyvj7ol_XRIYBXQTQF1QQ

Sau đó , chúng ta sẽ nhúng key vào domain của chúng ta , code để nhúng vào như sau :

Code trên có 3 điểm cần chú ý : 
A) Key = Yourkey . Đó là key mà google cho bạn khi đăng kí .
B) Function load() . Là function gọi google .
C) Div id=”map” . Dù đó là div rỗng nhưng google sẽ dùng nó để gán bản đồ vào .
Chú ý : class GlatLng là lớp rất mạnh với nhiều tính nănng , chúng ta sẽ bàn đến nó sau này .

Specifying a New Location
Đoạn :

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

có tham số 37.4419,-122.1419 là tâm điểm của bản đồ khi load lên . Để có thể xác định vị trí mặc định khi bản đồ load lên , bạn có thể vào http://maps.google.com/ -> gõ địa chỉ bạn muốn vào , sau đó sẽ ra được địa điểm đó , tại URL bạn sẽ thấy 3 tham số , VD : tôi gõ "phú mỹ hưng" vào -> click vào link bên trái, phía trên màn hình -> URL là : 

http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=ph%C3%BA+m%E1%BB%B9+h%C6%B0ng&sll=37.0625,-95.677068&sspn=40.324283,107.138672&ie=UTF8&hq=ph%C3%BA+m%E1%BB%B9+h%C6%B0ng&hnear=&radius=15000&ll=10.75557,106.638451&spn=0.093767,0.209255&z=13&iwloc=B

Bạn sẽ thấy ll=10.75557,106.638451 chính là 2 giá trị center . Bạn thay giá trị đó vào link cũ , sẽ thấy khi load bản đồ lên , center mặc định sẽ là phú mỹ hưng .

Separating Code from Content
Để code trở nên dễ thao tác hơn , ta phân code ra làm 3 trang , 1 trang index, 1 trang data, 1 trang js_function . Trong đó trang index là trang chính , nó sẽ gọi các trang js và trang data vào , trang js cung cấp các phương thức , trang data dùng php để load dữ liêu lên . Ta có trang như sau :

Index.php

map_functions.js

var centerLatitude = 37.818361;
var centerLongitude = -122.478032;
var startZoom = 13;
var map;
function init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
var location = new GLatLng(centerLatitude, centerLongitude);
map.setCenter(location, startZoom);
}
}
window.onload = init;
window.onunload = GUnload;

Basic Interaction
Sau khi bạn đã center được map, bây giờ bạn cần thao tác nhiều hơn thế trên map, đúng không ?
a) Using Map Control Widgets
Google cung cấp 5 control sau, để bạn thao tác :
1) GLargeMapControl : large pan and zoom control .
2) GSmallMapControl : mini pan and zoom control .
3) GScaleControl : độ phóng to .
4) GSmallZoomControl : 2 button zoom của google . 
5) GMapTypeControl : cho người dùng chuyển đổi giữa Map, satelite , và hybrid types .

Khi muốn add chúng vào , bạn add thông qua hàm addControl(). Ví dụ , tôi muốn add small map control vào site, tôi dùng hàm : 

map.setCenter(new GLatLng(10.75557,106.638451), 13);
// bắt đầu từ đây  
map.addControl(new GSmallMapControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());

Để xem chi tiết các class này , bạn search code OOP của các class này để tùy biến theo ý mình .

Creating Markers
Add marker để xác định điểm đánh dấu của chúng ta trên bản đồ . Chúng ta chọn :
var marker=new Gmarker(location);
Để xác định điểm ta muốn đánh dấu . (location là vị trí center của bản đổ chúng ta, hoặc điểm nào đó, tùy vào bạn . 
Sau đó dùng hàm : addOverlay(marker) để đưa marker vào bản đồ .

function init()
{
    if (GBrowserIsCompatible()) {	
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        var location = new GLatLng(centerLatitude, centerLongitude);
        map.setCenter(location, startZoom);
        var marker = new GMarker(location)
        map.addOverlay(marker);
    }
}

Sau khi code xong , ta có kết quả như sau :

Opening Info Windows
Và bây giờ, chúng ta sẽ đi đến phần phản hồi người dùng , Khi người dùng click vào marker , chúng ta sẽ phản hồi lại thông tin .
Ở mức độ basic như là xuất ra hộp alert , ta gõ như sau :

GEvent.addListener(marker, 'click',
function() {
alert("You clicked the marker!");
}
);

Khi click vào marker , ta xuất ra dòng "You clicked the marker".

Để xuất ra thông tin chi tiết của hộp info, ta dùng hàm openInfoWindowHtml() .
VD :

GEvent.addListener(marker, 'click',
function() {
marker.openInfoWindowHtml(description);
}
); 

Và để sử dụng chúng , ta làm như sau :

var centerLatitude = 37.818361;
var centerLongitude = -122.478032;
var description = 'Golden Gate Bridge';
var startZoom = 13;
var map;
// ham add marker
function addMarker(latitude, longitude, description) {
var marker = new GMarker(new GLatLng(latitude, longitude));
GEvent.addListener(marker, 'click',
function() {
marker.openInfoWindowHtml(description);
}
);
map.addOverlay(marker);
}
// ket thuc
function init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
// goi add marker
addMarker(centerLatitude, centerLongitude, description);
// ket thuc goi
}
}
window.onload = init;
window.onunload = GUnload;

A List of Points
Bạn cần nhiều điểm marker , chứ đâu chỉ 1 , phải không ? Để làm được điều đó, chúng ta sẽ sử dụng mảng giá trị .
Và mảng của chúng ta sẽ như thế này : 

var myMarker = {
'latitude': 37.818361,
'longitude': -122.478032,
'name': 'Golden Gate Bridge'
};

Và mảng cha , để lưu tất cả các mảng con bên trong, được khai báo như sau :

var myMarkers = [Marker1, Marker2, Marker3, Marker4];

Ví dụ, ta muốn lưu 3 marker, ta gõ như sau :

var markers = [
{
'latitude': 37.818361,
'longitude': -122.478032,
'name': 'Golden Gate Bridge'
},
{
'latitude': 40.6897,
'longitude': -74.0446,
'name': 'Statue of Liberty'
},
{
'latitude': 38.889166,
'longitude': -77.035307,
'name': 'Washington Monument'
}
];

Sau đó, để duyệt mảng , ta dùng hàm :

for (id in markers) {
// create a marker at markers[id].latitude, markers[id].longitude
}

Hàm này sẽ chạy hết tất cả các markers của chúng ta . Cứ mỗi vòng chạy , nó sẽ tạo ra 1 marker trên bản đồ .

Như vậy , tới thời điểm này , ta đã có đủ các hàm để đưa vào . Và ta chạy code cuối cùng trong file map_functions.js

var map;
var centerLatitude = -95.0446;
var centerLongitude = 40.6897;
var startZoom = 3;
function addMarker(longitude, latitude, description) {
var marker = new GMarker(new GLatLng(latitude, longitude));
GEvent.addListener(marker, 'click',
function() {
marker.openInfoWindowHtml(description);
}
);
map.addOverlay(marker);
}
function init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
for(id in markers) {
addMarker(markers[id].latitude, markers[id].longitude, markers[id].name);
}
}
}
window.onload = init;
window.onunload = GUnload;

Ghi chú :
-Hàm for(id in markers) { addMarker(markers[id].latitude, markers[id].longitude, markers[id].name); } mỗi lần chạy sẽ gọi hàm addMarker bên trên , và add marker lên màn hình . 
- còn markers là data ta phải khai báo trong file data.php . File đó có nội dung giống đoạn khai báo mảng markers phía trên .