Hướng dẫn nhúng google map vào website
Bước 4: Click vào chữ Nhúng bản đồ trên popup rồi nhấn SAO CHÉP HTML như vậy là bạn đã lấy xong mã nhúng bản đồ địa chỉ bạn muốn nhúng. Giờ bạn chỉ việc đem mã HTML này gắn vào vị trí đặt mã nhúng trong trang quản trị web của bạn là được.
Lưu ý: Vì bộ quản trị web của mỗi công ty thiết kế web có thể khác nhau nên mình không chỉ chi tiết các bạn là vào mục nào trong trang quản trị nội dung để dán mã nhúng bản đồ, mà mình chỉ hướng dẫn các bạn đến phần lấy mã nhúng thôi. Còn gắn mã nhúng ở vị trí nào thì khi người làm web cho bạn bàn giao sản phẩm họ sẽ hướng dẫn bạn phải vào đâu để gắn mã nhúng. Thiết kế website wordpress theo yêu cầu tùy biến giúp quản trị website đơn giản dễ dàng bạn có thể tự mình thay đổi Cách chèn mã nhúng bản đồ vào website wordpress thật đơn giản với những hướng dẫn cơ bản, bạn có thể tự mình thay đổi sửa lại nội dung địa điểm trên website sao cho phù hợp nhất – Tạo cho người dùng khi ghé thăm website của bạn biết được vị trí địa điểm nơi bán hàng cung cấp dịch vụ của bạn. Sau đây là các bước hướng dẫn cụ thể. Bạn có thể tự mình làm theo để lấy mã code chèn vào website của bạn: Đối với website wordpress bạn muốn chèn bản đồ vào sẽ có các bước sau : Bảng tin -> giao diện -> widget -> tìm đến mục cần hiển thị bản đồ như Footer , slidebar hay Home -> pase mã nhúng vào Visual Editor hoặc văn bản rồi sửa lại kích thước sao cho phù hợp với website -> lưu thay đổi Chỉ cần vài thao tác đơn giản bạn đã có thể tự mình thay đổi thêm bản đồ vị trí chính xác vào website wordpress của bạn nhanh chóng dễ dàng rồi đấy Trước khi bắt đầu, chúng ta cần có key của Google Maps APIs dành cho developer. Với một tài khoản Google bất kỳ, bạn có thể dễ dàng đăng ký cho mình một key bằng link sau. Tất nhiên, với mỗi tài khoản miễn phí thì bạn sẽ bị giới hạn 25000 lần load bản đồ trong 1 ngày - thế chắc là cũng quá đủ để bạn nghịch rồi nhỉ , xem thêm chi tiết ở giới hạn sử dụngMình xin bắt đầu với một ví dụ đơn giản nhất khi tích hợp Google map vào web.
Bạn có thể thêm một số params như 6, 7... vào cho src ở đây để xác định ngôn ngữ, vùng địa lý,.. mà bạn cần.
Khởi tạo một 8 mới đơn giản nhất bằng như sau :
Khi khởi tạo map sẽ có các thuộc tính như 9, 0, cùng với một số control như 1, 2, 3, 4.... Tìm hiểu thêm ở đâyXem demo ở đây Với ví dụ trên đây thì bạn đã có thể tích hợp Google map vào web của mình, bạn có thể kéo hay là zoom trên đó. Tuy nhiên, Google cung cấp cho các lập trình viên (ngay cả ở bản miễn phí) nhiều tính năng rất tuyệt vời mà chúng ta cần tìm hiểu thêm để có thể sử dụng. Bạn gần như chỉ việc tùy chỉnh, thay đổi trong 5 mà thôi.Bài viết này mình xin trình bày những phần theo mình là cơ bản và cũng hay gặp nhất bạn mà cần biết khi tích hợp Google map. MarkerMarker dùng để xác định, đánh dấu một vị trí trên bản đồ, bạn có thể đánh dấu một hoặc nhiều điểm. Sau khi khởi tạo một map, ở đây chúng ta sẽ khởi tạo một marker mới bằng 6 ngay trong hàm 7 :
Nếu cần đánh dấu nhiều điểm trên bản đồ thì bạn chỉ việc khởi tạo nhiều 6 tương tự. Mặc định sẽ dùng icon như hình để đánh dấu nhưng chúng ta có thể thay đổi bằng thuộc tính 9 khi khởi tạo marker.Bạn cũng có thể làm nhiều việc với marker, xem thêm ví dụ ở đây. Geolocation (geographic locaion)Cho ta biết thông tin chi tiết của từng địa điểm trên bản đồ. Chỉ cần truyền tọa độ vào đối tượng 0, chúng ta sẽ có có danh sách các điểm có thể thỏa mãn với tọa độ đó, thường thì sẽ là điểm đầu tiên trong danh sách đó sẽ chính xác nhất.Với mỗi điểm trên bản đồ, ta có các phương thức như 1, 2... để xem thông tin về tên, tọa độ, id ... của điểm đó. Ở ví dụ dưới đây mình sẽ kết hợp với 3 để in một vài thông tin của điểm đó trong một khung nhỏ trên bản đồ :
Xem các ví dụ khác ở đây Sự kiện function initMap() {
var latLng = { lat: 21.0168864, lng: 105.7855574 }
// create map with center is latLng
// code
// each marker define one point
var marker = new google.maps.Marker({
position: latLng,
map: map,
});
}
|