Đưa -googleMap-vao website

Nhúng Google Maps Vào Website

Trong website, bạn muốn hiện bản đồ Google map của 1 địa điểm nào đó (ví dụ 105 Bà Huyện Thanh Quan). Vậy phải làm thế nào? Hướng dẫn dưới đây:

Bước 1: Đăng ký một tài khoản mail với google nếu bạn chưa có tài khoản nào
Bước 2 : nhập URL : http://code.google.com/apis/maps/


( Chọn : Sign up for a Google Maps API key
Bước 3 : nhập địa chỉ site của bạn vào




Bước 4 : Google sẽ phát sinh cho bạn một key :


Bước 5 : Chép đoạn code sau bỏ vào trước tag trong trang web của bạn


Bước 6 : Trở qua trang web google, click vào link Loading the Maps API


Sẽ xuất hiện đoạn code mẫu như bên dưới. Hãy chép đoạn code chứa hàm initialize (xem hình dưới) vào trước kết thúc trang web của bạn.


Bước 7 : Đưa vào tag Body sự kiện onload và onunload . Đưa tag div vào trong tag body như hình


( Các thông số cần chú ý :


Bước 8: Thêm mô tả cho vị trí hiện bản đồ
Nhắp sau dòng map.setCenter(new GLatLng(37.4419,-122.1419), 13); (xem hình trên) rổi Enter xuống hàng gõ lệnh sau :
map.openInfoWindow(map.getCenter(), document.createTextNode("Góc Tú Xương, Quận 3, TPHCM"));
Bước 9: Chỉnh kinh độ , vĩ độ , độ zoom phù hợp nơi bạn muốn hiện bản đồ. Ví dụ kinh độ/vĩ độ của 105 bà huyện thanh quan góc Tú xương là 10.779622500015304,106.68488502502441
Bước 10: F12 xem thử trang web, bạn sẽ thấy bản đồ như sau :


( Ngoài ra ta có thể chỉnh độ rộng cao của div chứa bản đồ :


Lab bổ sung: Vậy làm sao biết địa chỉ góc Tú Xương Bà Huyện Thanh Quan là 10.779622500015304,106.68488502502441 ? Hãy theo hướng dẫn cách chọn tọa độ của địa điểm mà bạn muốn hiện bản đồ:
Bước 1 : bạn gõ địa chỉ sao vào trang : http://open.atlas.free.fr/GMapsTransparenciesImgOver.php
( Chọn Map :
( Bạn Chọn Zoom out : đến cập độ 2 và chọn vị trí là nước Việt Nam


Bước 2 : Nhắp double vào nước vị trí Việt Nam ,chọn TP HCM và Zoom In đến level 16. Chọn vị trí bạn muốn xác định tọa độ , click double vào vị trí muốn xác định tọa độ


( Sau đó ta nhìn xuống phía dưới trang sẽ thấy tọa độ được lấy :


Lấy tọa độ thu được đưa vào code như sau :

Sản phẩm :