Hướng dẫn chèn Google Maps trên Internet Cập nhật 05/2022

Nếu bạn là một doanh nhân, bạn có thể muốn khách hàng tìm thấy cửa hàng của bạn một cách trực quan và dễ dàng hơn, cách tốt nhất ở đây là chèn Google Maps vào trang web thay vì chỉ cung cấp thông tin địa chỉ.

Google Maps hay Google maps là một ứng dụng bản đồ trực tuyến tuyệt vời với khả năng tìm kiếm bất kỳ vị trí nào trên thế giới, vì vậy khi bạn nhúng bản đồ vào trang web của mình, khách hàng sẽ không mất nhiều thời gian để tìm kiếm vị trí cửa hàng của bạn. Bài viết dưới đây sẽ hướng dẫn bạn cách chèn Google Maps vào trang web.

Cách chèn Google Maps vào một trang web

Làm theo các bước bên dưới để chèn một hoặc nhiều bản đồ vào trang web của bạn:

1. Nhận khóa API Google Maps cho trang web

Nhận khóa API Google Maps cho trang web

Cách tốt nhất để thêm Google vào trang web là sử dụng API Google Maps và Google cũng cung cấp cho bạn một khóa API để sử dụng bản đồ.

Bạn không nhất thiết phải có khóa API để sử dụng API Google Maps phiên bản 3, nhưng đó là một cách hữu ích để cho phép bạn theo dõi việc sử dụng và thanh toán cho việc truy xuất sau này. API Google Maps v3 có hạn ngạch một 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 trang web của bạn vượt quá giới hạn này, bạn có thể cần kích hoạt thanh toán để nhận được nhiều hơn.

Làm theo hướng dẫn bên dưới để nhận khóa API Google Maps:

2. Chuyển đổi địa chỉ thành tọa độ

Chuyển đổi địa chỉ thành tọa độ

Để sử dụng Google Maps trên Internet, bạn cần có vĩ độ và kinh độ của một vị trí. Bạn sẽ nhận được thông tin này từ định vị GPS hoặc bạn sẽ sử dụng một công cụ trực tuyến như Geocoder.usto. Bạn làm theo các bước sau:

  • Truy cập Geocoder.us và nhập địa chỉ của bạn vào trường tìm kiếm.
  • Đầu tiên sao chép số cho vĩ độ (không có chữ cái nào ở phía trước) và dán nó vào tệp văn bản. Bạn không cần một cơ quan cấp bằng (o).
  • Đầu tiên sao chép số cho kinh độ (không có chữ cái nào ở phía trước) và dán nó vào tệp văn bản.

Kinh độ và vĩ độ của bạn có thể giống như ví dụ dưới đây:

40,756076
-73.990838

Chú ý: 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ự cho bạn.

3. Chèn Google Maps vào trang web

Chèn Google Maps vào trang web

Bước 1: Thêm tọa độ bản đồ

  • Mở trang web và thêm phần sau ĐẦU của tài liệu.
  • Thay thế phần được đánh dấu bằng vĩ độ và kinh độ mà bạn đã lưu ý trong bước 2.

Bước 2: Thêm các yếu tố bản đồ vào trang web của bạn

Khi bạn đã thêm tất cả các yếu tố ĐẦU của tài liệu của bạn, bạn cần xác định vị trí bản đồ trên trang web. Để làm điều này, hãy thêm một phần tử. DIV Với thiên nhiên sắc = “bản đồ – canvas”. Hãy chú ý tạo kiểu cho div này với chiều rộng và chiều cao thích hợp trên trang của bạn.

Bước 3: Thêm và xác minh

Điều cuối cùng cần làm là tải trang của bạn lên và kiểm tra xem bản đồ có hiển thị hay không. Dưới đây là một ví dụ về bản đồ Google trên trang. Lưu ý rằng do cách thức hoạt động của CMS About.com, bạn có thể cần phải 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ử huấn luyện nó với thuộc tính BODY: onload = “initialize ()”>

Bạn cần kiểm tra một vài người như sau nếu bản đồ không hiển thị:

  • Tìm lỗi chính tả trong JavaScript của bạn, bao gồm cả JavaScript phân biệt chữ hoa chữ thường.
  • Đảm bảo các tùy chọn thu phóng và trung tâm được đặt.
  • Đảm bảo rằng phần tử DIV của bạn nằm trên trang có ID chính xác.
  • Xác nhận rằng phần tử DIV của bạn có chiều cao.

4. Thêm biểu tượng điểm đánh dấu vào bản đồ

Thêm điểm đánh dấu vị trí giúp người dùng xác định nơi họ cần đến. Để thêm điểm đánh dấu màu đỏ chuẩn của Google Maps, hãy thêm mã sau vào dòng lệnh bên dưới dòng var map =…:

let myLatlng = new google.maps.LatLng (vĩ độ, kinh độ);
var marker = new google.maps.Marker ({
vị trí: myLatlng,
map: bản đồ,
xác định: “Trụ sở cũ của About.com”
});

Thay thế văn bản được đánh dấu bằng vĩ độ và kinh độ của bạn cũng như 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 internet tùy thích, chỉ cần thêm các biến mới với tọa độ mới 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ẽ chỉ hiển thị nếu người dùng thực hiện phóng to.

var latlng2 = new google.maps.LatLng (37.3316591, -122.0301778);
var myMarker2 = new google.maps.Marker ({
vị trí: latlng2,
map: bản đồ,
xác định: “Máy tính xách tay của Apple”
});

5. Thêm thẻ thứ 2 trở lên vào trang web

Nếu bạn muốn hiển thị nhiều thẻ trên trang, bạn có thể chỉ cần làm theo các bước sau:

  • Nhận kinh độ và vĩ độ của tất cả bản đồ bạn muốn hiển thị trên trang web.
  • Đầu tiên bạn hãy lắp thẻ vào như bước 3 ở trên. Và nếu bạn muốn thêm điểm đánh dấu vị trí, hãy làm theo bước 4.
  • Đối với thẻ thứ 2, bạn có thể cần thêm 3 dòng mới vào tập lệnh biểu mẫu của mình ():

var latlng2 = new google.maps.LatLng (tọa độ thứ 2);
var myOptions2 = {zoom: 18, middle: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP}; var map2 = new google.maps.Map (report.getElementById (“map_canvas_2”), myOptions2);

Nếu bạn cũng muốn thêm điểm đánh dấu vị trí vào bản đồ này, hãy thêm điểm đánh dấu thứ 2 tại tọa độ thứ 2 và bản đồ thứ 2:

var myMarker2 = new google.maps.Marker ({place: latlng2, map: map2, mã định danh: “Tên điểm đánh dấu của bạn”});

Sau đó, thêm thẻ thứ hai vào nơi bạn muốn. Và hãy đảm bảo cung cấp ID: sắc = “map_canvas_2” cho điều đó.

Khi trang của bạn tải, hai bản đồ sẽ xuất hiện.

Hai bản đồ trên một trang web

Đối với hoạt động buôn bán, điều cần thiết là cung cấp một bản đồ nhất định trực tiếp trên trang web để giúp khách hàng tìm thấy cửa hàng một cách dễ dàng. Và chỉ cần làm theo hướng dẫn từ nội dung trên, bạn có thể chèn Google Maps vào trang web của mình.