Buzz
Nếu bạn là một doanh nhân, bạn sẽ muốn thu hút khách hàng đến cửa hàng của mình một cách trực quan và dễ dàng hơn. Cách tốt nhất để làm điều này là thêm Google Maps vào trang web thay vì chỉ cung cấp thông tin địa chỉ.
Tải Google Maps cho iOS miễn phí
Mytour Google Maps cho Android
Tải Google Maps cho Symbian
Google Maps, ứng dụng bản đồ của Google, là công cụ tuyệt vời giúp bạn dễ dàng tìm kiếm mọi địa điểm trên thế giới. Khi nhúng bản đồ vào trang web của bạn, khách hàng sẽ dễ dàng tìm thấy cửa hàng của bạn mà không mất nhiều thời gian. Bài viết sau đây sẽ hướng dẫn cách tích hợp Google Maps vào trang web của bạn.
Cách thêm Google Maps vào trang web
Dưới đây là các bước bạn cần thực hiện để nhúng một hoặc nhiều bản đồ vào trang web của mình:
1. Lấy mã khóa API Google Maps cho trang web của bạn
Cách hiệu quả nhất để tích hợp Google vào trang web là sử dụng Google Maps API và Google khuyến nghị bạn lấy một khóa API để sử dụng bản đồ.
Bạn không bắt buộc phải có một khóa API để sử dụng Google Maps API v3, nhưng đó là một cách hữu ích để theo dõi việc sử dụng và trả tiền để truy cập nhiều tính năng hơn. Google Maps API v3 có hạn mức một yêu cầu mỗi giây cho một người dùng với tối đa 25000 yêu cầu mỗi ngày. Nếu trang web của bạn vượt quá giới hạn đó, bạn sẽ cần kích hoạt thanh toán để có thêm yêu cầu.
Hãy thực hiện theo hướng dẫn sau để lấy khóa API của Google Maps:
- Đăng nhập vào Google bằng tài khoản Google của bạn.
- Truy cập vào Bảng điều khiển Developers.
- Trong danh sách, tìm Google Maps API v3, sau đó nhấp vào nút OFF để bật nó.
- Đọc và đồng ý với các điều khoản.
- Trong mục Simple API Access, nhấp vào Tạo khóa máy chủ mới..
- Nhập địa chỉ IP của trang web của bạn. 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 tên đó). Đây là khóa API của bạn cho bản đồ của bạn.
2. Chuyển địa chỉ sang tọa độ
Để sử dụng Google Maps trên trang web, bạn cần biết kinh độ và vĩ độ của vị trí. Bạn có thể lấy thông tin này từ GPS hoặc sử dụng công cụ trực tuyến như Geocoder.usto. Hãy làm theo các bước sau:
- Truy cập vào trang Geocoder.us và nhập địa chỉ của bạn vào ô tìm kiếm.
- Copy số đầu tiên của vĩ độ (không bao gồm chữ cái ở phía trước) và dán vào một tập tin văn bản. Bạn không cần thêm đơn vị độ (o).
- Copy số đầu tiên của kinh độ (không bao gồm chữ cái ở phía trước) và dán vào tập tin văn bản.
Vĩ độ và kinh độ của bạn sẽ có dạng như sau:
40.756076
-73.990838
Lưu ý: Geocoder.us chỉ hỗ trợ các địa chỉ ở Hoa Kỳ. Nếu bạn cần tọa độ ở các quốc gia khác, hãy tìm một công cụ tương tự phù hợp với địa điểm của bạn.
3. Thêm Google Maps vào trang web
Bước 1: Thêm tọa độ của bản đồ
- Mở trang web và thêm những điều sau vào HEAD của trang.
- Thay đổi phần được đánh dấu theo vĩ độ và kinh độ bạn đã ghi chú ở bước thứ hai.
Bước 2: Thêm các thành phần của bản đồ vào trang web của bạn
Sau khi đã thêm tất cả các thành phần vào HEAD của tài liệu của bạn, bạn cần đặt vị trí bản đồ trên trang web. Bạn có thể làm điều này bằng cách thêm một phần tử DIV với thuộc tính id = 'map - canvas'. Hãy nhớ tạo div này với chiều rộng và chiều cao phù hợp trên trang của bạn.
Bước 3: Tải lên và kiểm tra
Cuối cùng, bạn cần tải trang web của mình lên và kiểm tra xem bản đồ có hiển thị không. Dưới đây là một ví dụ về bản đồ Google trên trang. Lưu ý, vì cách hệ thống CMS của About.com hoạt động, bạn cần nhấp vào liên kết để bản đồ xuất hiện.
Nếu bản đồ không hiển thị, hãy thử khởi tạo nó với thuộc tính BODY: onload='initialize()'>
Bạn cần kiểm tra những điều sau nếu bản đồ không hiển thị:
- Kiểm tra lỗi chính tả trong mã JavaScript của bạn, bao gồm cả việc JavaScript phân biệt chữ hoa chữ thường.
- Đảm bảo bạn đã cài đặ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 có ID chính xác trên trang.
- Đảm bảo rằng phần tử DIV của bạn có chiều cao.
4. Thêm biểu tượng đánh dấu vào bản đồ
Việc thêm biểu tượng đánh dấu vị trí giúp người dùng biết nơi họ cần đến. Để thêm một điểm đánh dấu màu đỏ chuẩn của Google Maps, thêm đoạn mã sau vào dòng lệnh dưới dòng var map = ...:
var myLatlng = new google.maps.LatLng(latitude,longitude);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
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 di chuột qua điểm đánh dấu.
Bạn có thể thêm nhiều biểu tượng đánh dấu vào trang web theo ý muốn. Chỉ cần thêm các biến mới với tọa độ và tiêu đề mới. Tuy nhiên, nếu bản đồ quá nhỏ để hiển thị tất cả các điểm đánh dấu, chúng sẽ không được hiển thị trừ khi người dùng phóng to ra.
var latlng2 = new google.maps.LatLng(37.3316591,-122.0301778);
var myMarker2 = new google.maps.Marker({
position: latlng2,
map: map,
title:'Apple Computer'
});
5. Thêm bản đồ thứ hai hoặc nhiều hơn nữa vào website
Nếu bạn muốn hiển thị nhiều bản đồ hơn trên trang, bạn có thể thực hiện một cách dễ dàng theo các bước sau:
- Lấy kinh độ và vĩ độ cho tất cả bản đồ bạn muốn hiển thị trên trang web.
- Chèn bản đồ đầu tiên giống như bước 3 ở trên. Và nếu bạn muốn thêm điểm đánh dấu vị trí, bạn thực hiện theo bước 4.
- Đối với bản đồ thứ hai, bạn cần thêm 3 dòng mới vào script khởi tạo ( ) của bạn:
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 thêm điểm đánh dấu vị trí vào bản đồ này, chỉ cần thêm điểm đánh dấu thứ hai vào tọa độ thứ hai và bản đồ thứ hai:
var myMarker2 = new google.maps.Marker({ position: latlng2, map: map2, title:'Tiêu đề Điểm Đánh Dấu Của Bạn' });
Sau đó, thêm bản đồ thứ hai vào vị trí bạn muốn. Và đảm bảo cung cấp ID cho nó: id = 'map_canvas_2'
Khi tải trang của bạn, hai bản đồ sẽ hiển thị.
Đối với các doanh nghiệp buôn bán, việc cung cấp một bản đồ cụ thể trên trang web giúp khách hàng dễ dàng tìm đường đến cửa hàng là rất quan trọng. Và chỉ cần làm theo hướng dẫn trong bài viết này, bạn đã có thể thêm Google Maps vào trang web của mình một cách dễ dàng.
