01/05
Nhận khóa API Google Maps cho trang web của bạn
Cách tốt nhất để thêm bản đồ Google vào trang web của bạn là sử dụng API Google Maps. Và Google khuyên bạn nên lấy khóa API để sử dụng bản đồ.
Bạn không bắt buộc phải có khóa API để sử dụng API Google Maps v3, nhưng nó rất hữu ích vì nó cho phép bạn theo dõi việc sử dụng của mình và trả tiền để có thêm quyền truy cập. API Google Maps v3 có hạn ngạch 1 yêu cầu mỗi giây cho mỗi người dùng với tối đa 25.000 yêu cầu mỗi ngày. Nếu các trang của bạn vượt quá các giới hạn đó, bạn sẽ cần phải bật thanh toán để nhận được nhiều hơn.
Cách nhận Khóa API Google Maps
- Đăng nhập vào Google bằng tài khoản Google của bạn.
- Chuyển đến Developers Console
- Cuộn qua danh sách và tìm API Google Maps v3, sau đó nhấp vào nút “TẮT” để bật tính năng này.
- Đọc và đồng ý với các điều khoản.
- Chuyển đến bảng điều khiển API và chọn “Truy cập API” từ menu bên trái
- Trong phần “Truy cập API đơn giản”, nhấp vào nút “Tạo khóa máy chủ mới ...”.
- Nhập địa chỉ IP của máy chủ web của bạn. Đây là IP nơi yêu cầu Maps của bạn sẽ đến từ đó. Nếu bạn không biết địa chỉ IP của mình, bạn có thể tra cứu nó.
- Sao chép văn bản trên dòng “Khóa API:” (không bao gồm tiêu đề đó). Đây là khóa API của bạn cho bản đồ của bạn.
02 trên 05
Chuyển đổi địa chỉ của bạn thành tọa độ
Để sử dụng Google Maps trên các trang web của bạn, bạn cần phải có vĩ độ và kinh độ cho vị trí đó. Bạn có thể lấy chúng từ GPS hoặc bạn có thể sử dụng một công cụ trực tuyến như Geocoder.us để cho bạn biết.
- Truy cập Geocoder.us và nhập địa chỉ của bạn vào hộp tìm kiếm.
- Sao chép số đầu tiên cho vĩ độ (không có chữ cái ở phía trước) và dán vào một tệp văn bản. Bạn không cần chỉ báo độ (º).
- Sao chép số đầu tiên cho kinh độ (một lần nữa mà không có một chữ cái ở phía trước) và dán nó vào tập tin văn bản của bạn.
Kinh độ và vĩ độ của bạn sẽ trông giống như sau:
40,756076
-73,990838
Geocoder.us chỉ hoạt động cho các địa chỉ ở Hoa Kỳ, nếu bạn cần lấy tọa độ ở một quốc gia khác, bạn nên tìm kiếm một công cụ tương tự trong khu vực của bạn.
03 trên 05
Thêm bản đồ vào trang web của bạn
Đầu tiên, thêm Tập lệnh bản đồ vào
Tài liệu của bạn
Mở trang web của bạn và thêm phần sau vào phần đầu của tài liệu của bạn.
Thay đổi phần được đánh dấu thành số vĩ độ và kinh độ bạn đã viết trong bước hai.
Thứ hai, Thêm phần tử bản đồ vào trang của bạn
Khi bạn đã thêm tất cả các phần tử tập lệnh vào phần đầu của tài liệu, bạn cần định vị bản đồ của mình trên trang. Bạn làm điều này bằng cách thêm phần tử DIV với thuộc tính id = "map-canvas". Tôi khuyên bạn cũng nên tạo kiểu div này với chiều rộng và chiều cao phù hợp trên trang của bạn:
Cuối cùng, Tải lên và kiểm tra
Điều cuối cùng cần làm là tải lên trang của bạn và kiểm tra xem bản đồ của bạn có hiển thị hay không. Dưới đây là ví dụ về bản đồ Google trên trang. Lưu ý, vì cách mà About.com CMS hoạt động, bạn sẽ phải nhấp vào liên kết để hiển thị bản đồ. Đây không phải là trường hợp trên trang của bạn.
Nếu bản đồ của bạn không hiển thị, hãy thử khởi tạo bản đồ với thuộc tính BODY:
onload = "initialize ()" >
Những thứ khác để kiểm tra xem bản đồ của bạn có đang tải không bao gồm:
- Hãy tìm lỗi chính tả trong JavaScript của bạn, bao gồm cả trường hợp. JavaScript phân biệt chữ hoa chữ thường.
- Đảm bảo rằng bạn đã đặt tùy chọn thu phóng và trung tâm.
- Đảm bảo rằng phần tử DIV của bạn nằm trên trang có ID chính xác.
- Đảm bảo rằng phần tử DIV của bạn có chiều cao.
04/05
Thêm điểm đánh dấu vào bản đồ của bạn
Nhưng những gì tốt là một bản đồ vị trí của bạn nếu không có điểm đánh dấu nói với mọi người nơi họ nên đi?
Để thêm điểm đánh dấu màu đỏ Google Maps chuẩn, hãy thêm thông tin sau vào tập lệnh của bạn bên dưới dòng var map = ...:
var myLatlng = new google.maps.LatLng ( vĩ độ, kinh độ );
var marker = new google.maps.Marker ({
vị trí: myLatlng,
bản đồ, bản đồ,
title: " Trụ sở cũ của About.com "
});
Thay đổi văn bản được đánh dấu thành vĩ độ và kinh độ của bạn và tiêu đề bạn muốn xuất hiện khi mọi người di chuột qua điểm đánh dấu.
Bạn có thể thêm bao nhiêu điểm đánh dấu vào trang theo ý muốn, chỉ cần thêm các biến mới với các tọa độ và tiêu đề mới, nhưng nếu bản đồ quá nhỏ để hiển thị tất cả các điểm đánh dấu, chúng sẽ không hiển thị trừ khi người đọc phóng to.
var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = new google.maps.Marker ({
vị trí: latlng 2 ,
bản đồ, bản đồ,
tiêu đề: " Apple Computer "
});
Dưới đây là ví dụ về bản đồ Google có điểm đánh dấu. Lưu ý, vì cách mà About.com CMS hoạt động, bạn phải nhấp vào liên kết để hiển thị bản đồ. Đây không phải là trường hợp trên trang của bạn.
05/05
Thêm một bản đồ thứ hai (hoặc nhiều hơn) vào trang của bạn
Nếu bạn đã xem trang Google maps mẫu của tôi, bạn sẽ nhận thấy rằng tôi có nhiều hơn một bản đồ được hiển thị trên trang. Điều này rất dễ làm. Đây là cách làm.
- Lấy vĩ độ và kinh độ của tất cả các bản đồ bạn muốn hiển thị như chúng ta đã học ở bước 2 của hướng dẫn này.
- Chèn bản đồ đầu tiên như chúng ta đã học ở bước 3 của hướng dẫn này. Nếu bạn muốn bản đồ có điểm đánh dấu, hãy thêm điểm đánh dấu như trong bước 4.
- Đối với bản đồ thứ hai, bạn sẽ cần phải thêm 3 dòng mới vào tập lệnh initialize ():
var latlng2 = new google.maps.LatLng ( tọa độ thứ hai );
var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Nếu bạn muốn đánh dấu trên bản đồ mới, hãy thêm điểm đánh dấu thứ hai trỏ vào tọa độ thứ hai và bản đồ thứ hai:
var myMarker2 = new google.maps.Marker ({vị trí: latlng2 , bản đồ: map2 , tiêu đề: " Tiêu đề đánh dấu của bạn "}); - Sau đó, thêm thứ hai
nơi bạn muốn bản đồ thứ hai. Và hãy chắc chắn cung cấp cho nó id id = "map_canvas_2".
- Khi trang của bạn tải, hai bản đồ sẽ hiển thị
Đây là mã của một trang có hai bản đồ Google trên đó: