Mục lục:

Cách nhúng Google Maps vào trang web: 4 bước
Cách nhúng Google Maps vào trang web: 4 bước

Video: Cách nhúng Google Maps vào trang web: 4 bước

Video: Cách nhúng Google Maps vào trang web: 4 bước
Video: Hướng dẫn nhúng Google Maps vào website wordpress cực đơn giản [thủ thuật wordpress] 2024, Tháng mười một
Anonim
Cách nhúng Google Maps vào trang web
Cách nhúng Google Maps vào trang web

Bình chọn cho tôi trong Thử thách bản đồ!

Gần đây, tôi đã tạo một trang web sử dụng Google Maps. Nhúng Google Maps vào trang web của tôi khá dễ dàng và không khó thực hiện. Trong Tài liệu hướng dẫn này, tôi sẽ chỉ cho bạn cách dễ dàng nhúng Google Maps vào trang web của bạn.

Thành thật mà nói với bạn, tôi chỉ nhúng Google Maps vào trang web của mình cho vui thôi. Không có quá nhiều thứ để làm khi ở trong vùng cách ly, vậy tại sao không tạo một trang web sử dụng Google Maps sau đó hiển thị cho mọi người các bước mà tôi đã thực hiện khi tạo trang web này.

Bây giờ tôi phải nói rằng, bạn phải biết một hoặc hai điều về HTML và CSS để nhúng Google Maps vào trang web của bạn. Nếu bạn không biết gì về HTML hoặc CSS, hãy thử truy cập

Lưu ý: Tôi không liên kết với W3Schools dưới bất kỳ hình thức nào. Đó chỉ là một trang web mà tôi thấy hữu ích khi học HTML và CSS.

Quân nhu

  • Trình soạn thảo văn bản (sẽ được sử dụng để tùy chỉnh trang web của bạn và cung cấp nội dung trên trang web của bạn).
  • Google Maps (những gì sẽ được nhúng vào trang web của bạn).
  • Hiểu biết cơ bản về HTML và CSS (đây là những ngôn ngữ lập trình sau đây sẽ được sử dụng khi tùy chỉnh trang web của bạn và cung cấp nội dung trên trang web của bạn).

Bước 1: Cung cấp nội dung trên trang web của bạn

Cung cấp nội dung trên trang web của bạn
Cung cấp nội dung trên trang web của bạn
Cung cấp nội dung trên trang web của bạn
Cung cấp nội dung trên trang web của bạn

Chuyển đến phần mềm soạn thảo văn bản trên máy tính của bạn. Ví dụ, vì tôi có Windows, tôi nên sử dụng Notepad. Sau khi bạn vào Notepad, hãy nhập như sau:

bản đồ Google

bản đồ Google

Sau khi bạn nhập xong phần sau trong Notepad, hãy truy cập Google Maps, nơi sau này bạn sẽ lấy mã để bạn sử dụng để nhúng Google Maps vào trang web của mình.

Đây là liên kết để bạn truy cập Google Maps:

Bước 2: Nhúng Google Maps vào trang web của bạn

Nhúng Google Maps vào trang web của bạn
Nhúng Google Maps vào trang web của bạn
Nhúng Google Maps vào trang web của bạn
Nhúng Google Maps vào trang web của bạn
Nhúng Google Maps vào trang web của bạn
Nhúng Google Maps vào trang web của bạn

Khi bạn đã ở trên Google Maps, hãy nhấp vào nút "Trình đơn" và sau đó tìm "Chia sẻ hoặc nhúng bản đồ". Khi bạn thấy "Chia sẻ hoặc nhúng bản đồ", hãy nhấp vào nó. Khi bạn đã nhấp vào đó, bạn sẽ thấy "Gửi liên kết" và "Nhúng bản đồ". Bây giờ hãy nhấp vào "Nhúng bản đồ", khi bạn đã nhấp vào "Nhúng bản đồ", bây giờ bạn sẽ thấy một mũi tên xuống ở bên trái của hộp văn bản sẽ được sử dụng để chọn mức độ lớn hay nhỏ mà bạn muốn bản đồ. Sao chép văn bản trong hộp. Và dán văn bản vào HTML của trang web của bạn.

Bước 3: Tùy chỉnh trang web của bạn

Tùy chỉnh trang web của bạn
Tùy chỉnh trang web của bạn
Tùy chỉnh trang web của bạn
Tùy chỉnh trang web của bạn

Quay lại phần mềm soạn thảo văn bản trên máy tính của bạn và nhập nội dung sau:

Google Maps body {background-color: rgb (129, 207, 224, 1);}

bản đồ Google

Thẻ kiểu được sử dụng để tùy chỉnh trang web của bạn. Bây giờ, tôi sẽ khuyên bạn rằng bước này sử dụng CSS. Bạn có thể nhập thông tin sau để trang web của bạn trông giống hệt như trang web của tôi.

Sau khi hoàn tất, hãy lưu tệp của bạn dưới dạng "Google Maps.html". Đừng quên phần html vì nếu bạn không bao gồm phần này, bạn không thể tạo ra một trang web.

Bước 4: Xem xét sản phẩm cuối cùng của bạn

Nhìn vào sản phẩm cuối cùng của bạn
Nhìn vào sản phẩm cuối cùng của bạn

Khi bạn đã thực hiện xong tất cả các bước trong Tài liệu hướng dẫn này, hãy xem kỹ sản phẩm cuối cùng của bạn. Nếu bạn hài lòng với sản phẩm cuối cùng của mình, điều đó thật tuyệt. Tuy nhiên, nếu bạn không hài lòng với sản phẩm cuối cùng của mình, hãy quay lại Notepad của bạn và cố gắng sửa chữa sản phẩm cuối cùng của bạn để lần sau khi bạn xem kỹ sản phẩm cuối cùng của mình, bạn sẽ hài lòng với những gì bạn đã tạo ra ban tay của bạn.

Nếu bạn muốn xem mã nguồn của tôi, bạn có thể tìm thấy mã nguồn này ở cuối Sách hướng dẫn này. Cảm ơn bạn đã xem Tài liệu hướng dẫn của tôi và chúc bạn viết mã vui vẻ!

Xin nhắc lại, hãy bình chọn cho tôi trong Thử thách bản đồ!

Đề xuất: