Cách thêm bản đồ Google vào trang web của bạn

01/05

Nhận khóa API Google Maps cho trang web của bạn

Chế độ xem đám mây của Google Developers Console. Ảnh chụp màn hình của J Kyrnin

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

  1. Đăng nhập vào Google bằng tài khoản Google của bạn.
  2. Chuyển đến Developers Console
  3. 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.
  4. Đọc và đồng ý với các điều khoản.
  5. Chuyển đến bảng điều khiển API và chọn “Truy cập API” từ menu bên trái
  6. 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 ...”.
  7. 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ó.
  8. 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 các số được chỉ định cho vĩ độ và kinh độ. Ảnh chụp màn hình của J Kyrnin

Để 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.

  1. Truy cập Geocoder.us và nhập địa chỉ của bạn vào hộp tìm kiếm.
  2. 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 độ (º).
  3. 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

Bản đồ Google. Ảnh chụp màn hình của J Kyrnin - Bản đồ hình ảnh lịch sự của Google

Đầ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:

04/05

Thêm điểm đánh dấu vào bản đồ của bạn

Bản đồ Google có điểm đánh dấu. Ảnh chụp màn hình của J Kyrnin - Bản đồ hình ảnh lịch sự của Google

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.

  1. 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.
  2. 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.
  3. Đố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);
  4. 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 "});
  5. 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".

  6. 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 đó: