Cách nhúng bản đồ vào website đơn giản, dễ hiểu

11:59 28/11/2023

Bạn muốn có một website sinh động và đầy đủ thông tin giúp người dùng biết được địa điểm của cửa hàng/doanh nghiệp/cá nhân đang ở đâu? Hãy cùng bài viết dưới đây thực hiện một số thao tác đơn giản để nhúng bản đồ vào website nhé!


Cách 1: Nhúng bản đồ vào website
Bước 1: Truy cập vào: https://www.google.com/maps
Bước 2: Nhập địa chỉ của vị trí vào thanh tìm kiếm để lấy thông tin trên bản đồ


Bước 3: Bước tiếp theo bạn nhấn vào mục Share

Hình ảnh bản đồ Trường Cao đẳng FPT Polytechnic cơ sở Hà Nội

Sau đó, bạn ấn sang phần Embed a map, bạn copy đoạn code iframe đó vào cho vào chỗ bạn muốn nó hiển thị trong theme. Hoặc bạn có thể vào trong 1 bài viết, 1 trang… và trong editor đó thì bạn chọn cho mình văn bản và dán đoạn code đó vào là được. Cách này cũng khá đơn giản nhưng nó có nhược điểm là không thêm được các thông tin thêm vào bản đồ.

Cách 2: Custom nhúng bản đồ vào website
Dưới đây là đoạn code bạn đặt vào chỗ cần hiển thị:

Lấy API_KEY ở đường dẫn TẠI ĐÂY
Bạn nhấn GET A KEY, nếu bạn chưa có project thì tạo 1 project, còn có rồi bạn có thể chọn nó và ấn Enable API và bạn copy đoạn API KEY đó và thay vào API_KEY_GOOGLE. Đến đây là bạn đã có một bạn đồ có thể custom thêm được thông tin: như nội dung, logo..
Chúc các bạn thành công!

Bộ môn Công nghệ Thông tin
Trường Cao đẳng FPT Polytechnic cơ sở Hà Nội

Cùng chuyên mục

Đăng Kí học Fpoly 2024

  • Max. file size: 512 MB.
  • Max. file size: 512 MB.
  • Max. file size: 512 MB.