Cách để chèn Bản đồ Google Maps vào Website Cực dễ dàng
Cách để chèn Bản đồ Google Maps vào Website Cực dễ dàng

Khi chúng ta truy cập vào website của một ai đó, và chúng ta muốn tra đường đi đến văn phòng của công ty đó thì việc trên website được chèn sẵn bản đồ Google Maps thì quá thuận tiện cho chúng ta. Và các bạn nghĩ sao nếu khách hàng truy cập vào website của mình cũng sẽ như vậy Thật tiện lợi phải không nào? Hãy cùng tham khảo Cách để chèn Bản đồ Google Maps vào Website Cực trong bài viết này nhé.

Cách để chèn Bản đồ Google Maps vào Website 

ETI.VN chia cách làm thanh 3 bước:

  • Bước 1: Lấy mã nhúng bản đồ
  • Bước 2: Chèn vào website
  • Bước 3: Cân chỉnh kích thước và lưu lại

Vậy bạn đã hình dung được chúng ta sẽ làm gì rồi phải không? 

Đầu tiên chúng ta sẽ cần phải Lấy mã nhúng bản đồ.

Bạn truy cập vào Địa điểm Google Maps của bạn, sau đó bấm chia sẻ --> Chọn  nhúng bản đồ --> Sau đó bạn Copy đoạn mã mà Google Maps hiện ra bằng cách bấm Sao chép HTML. 

lay-ma-nhung-html


 

Bạn sẽ được một đoạn mã trông giống thế này:

Chúng ta đã có mã nhúng HTML rồi. Bây giờ thì chèn vào Website thôi.

Cách để chèn Bản đồ Google Maps vào Website Wordpress

Giả sử bạn muốn chèn bản đồ vào Bài viết, thì bạn cần vào mục viết bài mới. Và chọn sang tab "Văn bản" trong trình soạn thảo.

dua-trinh-soan-thao-wordpress-5-0-ve-phien-ban-cu2


Và tiếp theo bạn chèn đoạn mã vừa rồi vào thôi.

Cách để chèn Bản đồ Google Maps vào Website Nền tảng khác

Bạn sẽ cần tìm một thứ gọi là "Mã HTML" trong trình soạn thảo văn bản.

tim-ma-html-trong-trinh-soan-thao

Và trình soạn thảo sẽ hiển thị một đống mã HTML ra, và bạn chỉ cần dán mã nhúng HTML của bản đồ vào thôi là sẽ hiển thị được bản đồ (ETI.VN sẽ test thử ở đây luôn nhé, bạn chỉ cần để trỏ chuột ở nơi muốn thêm và bấm mã HTML -> chèn là được).

Bây giờ thì bản đồ đã được hiển thị lên website. Tiếp theo ta sẽ cùng cân chỉnh kích thước cho phù hợp nhé.

Bạn tìm đoạn như trong hình, và điều chỉnh thông số chỗ ETI.VN tô vàng.

can-chinh-kich-thuoc-ban-do

 

Bây giờ test thử width lên 100% xem sao nhé.

can-chinh-100%
 

Và bản đã thấy kết quả rồi đó! Chúc các bạn thành công!


Đăng ngày 10/05/2021 bởi ETI Team | Lượt xem: 447

0383735400