Bản đồ là một khía cạnh thiết yếu của bất kỳ trang web kinh doanh. Ngay cả khi bạn hoàn toàn dựa trên internet, khách hàng vẫn muốn biết bạn là ai và bạn sống ở đâu. Google Maps hiện là mặc định cho nhiều trang web vì nó dễ sử dụng nhất, dường như chính xác nhất và miễn phí. Đến cuối hướng dẫn này, bạn sẽ biết chính xác cách nhúng Google Map phản hồi vào trang web của mình.
Google Maps mặc định không phải lúc nào cũng phản hồi nên có thể không mở rộng theo các kích thước màn hình khác nhau. Tùy thuộc vào việc bạn đang sử dụng plugin WordPress hay tự nhúng nó bằng mã, có thể cần thêm một vài dòng CSS để làm cho bản đồ phản hồi.
Thiết kế web đáp ứng
Responsive là một thuật ngữ quan trọng ở đây. Nó mô tả thiết kế web có tính đến trải nghiệm người dùng và thiết bị để đảm bảo nó giống nhau bất kể bạn sử dụng thiết bị nào để truy cập trang web. Ví dụ: một trang web đáp ứng sẽ cung cấp cùng một chất lượng trải nghiệm cho dù bạn truy cập nó trên máy tính để bàn, máy tính bảng hoặc điện thoại thông minh.
Để làm điều này, trang web phải thích ứng với các độ phân giải khác nhau, kích thước màn hình và chạm.
Nhúng Bản đồ Google phản hồi vào trang web
Có ba cách tôi biết để nhúng Google Maps vào trang web. Nếu bạn sử dụng một chủ đề WordPress, nó có thể có tính năng tích hợp. Bạn cũng có thể sử dụng một plugin hoặc bạn có thể nhúng mã trực tiếp từ Google vào bất kỳ trang web nào. Các tùy chọn thứ nhất và thứ hai rất tốt cho người dùng WordPress, các plugin khác cũng sử dụng các plugin để bạn được bảo vệ ở đó. Tùy chọn cuối cùng, sử dụng mã sẽ hoạt động trên hầu hết các trang web bất kể chúng được xây dựng như thế nào.
Sử dụng một chủ đề WordPress để nhúng Google Map đáp ứng
Một số chủ đề WordPress sẽ có một tính năng dành riêng cho Google Maps. Vì bản đồ là một nền tảng cơ bản cho các trang web hiện đại, một số nhà thiết kế chủ đề đã triển khai chúng trực tiếp vào thiết kế của họ. Nếu chủ đề của bạn có tính năng bản đồ, có thể bạn sẽ cần API Google Maps để làm cho nó hoạt động. Bạn thêm API vào các tùy chọn chủ đề và nó sẽ nói chuyện trực tiếp với Google để xây dựng bản đồ mỗi lần truy cập.
- Truy cập trang này trên trang web Google để bắt đầu quy trình API.
- Chọn nút Bắt đầu màu xanh.
- Chọn biểu tượng menu ba dòng ở phía trên bên trái của màn hình mới.
- Chọn API & Dịch vụ và sau đó Thông tin xác thực.
- Chọn Tạo thông tin xác thực và sau đó API Key.
- Chọn Giới hạn khóa và chọn Giới thiệu HTTP.
- Chọn Lưu.
- Sao chép Khóa API và dán nó vào trang tùy chọn thiết kế yêu cầu nó.
Khi bạn có Khóa API, bạn có thể triển khai Google Map vào trang web của mình bằng các công cụ thiết kế chủ đề. Miễn là chủ đề phản hồi, bản đồ cũng vậy.
Sử dụng plugin để nhúng Google Map đáp ứng
WordPress sử dụng plugin, Joomla sử dụng Tiện ích mở rộng, Drupal sử dụng các mô-đun hoặc plugin và CMS khác sử dụng các quy ước đặt tên tương tự. Dù bằng cách nào, các plugin tham khảo các yếu tố mô-đun mà bạn có thể bắt vít vào CMS cốt lõi của mình để thêm các tính năng. Một tính năng hữu ích là Google Map. Nếu chủ đề trang web của bạn không bao gồm yếu tố bản đồ và bạn không muốn tự mình viết mã, thì plugin là thứ tốt nhất tiếp theo.
- Trong WordPress, điều hướng đến Plugin và Thêm mới.
- Tìm kiếm Google Maps và chọn một plugin bạn thích.
- Kích hoạt nó trong Plugin và đi đến Cài đặt của nó.
- Thêm API Google Maps mà bạn đã tạo ở trên nơi được chỉ định và Lưu.
- Thực hiện các plugin bất cứ nơi nào bạn muốn bản đồ xuất hiện.
Các CMS khác khác nhau một chút về vị trí đặt tên và menu nhưng nguyên tắc là giống nhau. Hầu hết, nếu không phải tất cả, các plugin bản đồ sẽ yêu cầu API Google Maps hoạt động.
Sử dụng mã để nhúng Google Map đáp ứng
Nếu bạn không sử dụng WordPress hoặc CMS khác, bạn vẫn có thể nhúng Bản đồ Google phản hồi. Bạn chỉ cần sử dụng mã thay vì một mô-đun. Phải mất thêm một chút công việc nhưng sẽ cung cấp các bản đồ đáp ứng tương tự.
- Truy cập Google Maps và điều hướng cho đến khi bản đồ bạn muốn hiển thị lấp đầy màn hình.
- Chọn liên kết Chia sẻ màu xanh và sao chép mã từ Bản đồ nhúng.
- Thêm mã nhúng cụ thể của bạn vào mã bên dưới giữa và.
- Thêm mã trong HTML của trang web của bạn, nơi bạn muốn xem bản đồ.
- Lưu các thay đổi của bạn.
Mật mã:
Đây không phải là mã của tôi, tôi đã tìm thấy nó trực tuyến nhưng đã thử nghiệm nó trên trang web của tôi. Nó hoạt động như một bùa mê và sẽ hoạt động cho dù bạn sử dụng CMS, HTML, Hugo hay một trong nhiều ngôn ngữ trang web hoặc công cụ trang khác.
