Sở hữu một công cụ tìm kiếm địa điểm, bản đồ trực tuyến như Google Map trên website cá nhân là một điều rất thú vị, mang lại nhiều thuận tiện cho khách truy cập. Để đưa Google Map lên website cá nhân, bạn không cần phải có khả năng lập trình "siêu hạng", chỉ cần vài bước đơn giản và một ít kiến thức về HTML là có thể thực hiện điều này.

Yếu tố cần thiết để đưa Google Map lên website hay blog cá nhân là khai thác giao diện lập trình ứng dụng API (Application Programming Interface) của Google Map được Google cung cấp miễn phí cho người dùng nhưng với những giới hạn nhất định.

Đưa bản đồ Google Map lên website cá nhân

Nếu bạn muốn sử dụng một bản đồ thương mại hoặc chỉ khai thác trên một website cá nhân thì có thể đăng ký sử dụng thử 30 ngày dịch vụ Google Map Enterprise. Bản đồ sẽ có thể xem được nhưng nó nằm ở phía sau một tường lửa (firewall) hay với việc đăng ký tài khoản đăng nhập có phí. Dịch vụ Enterprise cũng cung cấp thêm những tính năng mở rộng như quan hệ khách hàng và hỗ trợ về marketing.

Trong phần bài viết này chỉ hướng dẫn bạn sử dụng phiên bản miễn phí với hai chức năng chính là phóng to thu nhỏ bản đồ (zoom) hoặc tìm địa điểm. Cửa sổ thông tin của bản đồ có các thành phần như những cập nhật, điểm đánh dấu, đường kẻ định tuyến để chỉ dẫn...

Bước 1: đăng ký sử dụng khóa API (API key) tại đây. Tuy nhiên, trước khi bạn đăng ký và nhận khóa API, bạn cần đăng nhập vào tài khoản Google của mình. Sau khi đăng nhập, nhấn vào "Sign up for a Google Maps API key", điền tên miền website cá nhân của bạn vào và nhấn "Generate API key". Hệ thống sẽ tạo một khóa với đoạn mã khá dài để bạn có thể copy và dán vào trong mã HTML trên trang web của mình.

Lưu ý là khóa API này có hiệu lực với một thư mục đơn trên máy chủ của bạn. Bạn có thể sử dụng nó để nhúng một bản đồ Google Map vào bất kỳ trang nào thuộc tên miền đã đăng ký mà không có giới hạn về số lượng xem trang mỗi ngày.

Hệ thống cung cấp khóa API là một đoạn mã,
bạn cần sao lưu lại để dùng về sau.

Bước 2: Copy đoạn mã ví dụ vào trong một file văn bản, tốt nhất bạn nên dùng notepad để lưu. Khi tham khảo, bạn sẽ thấy hầu hết những thông tin quan trọng nằm trong thẻ HEAD-/HEAD và một đoạn mã chứa bản đồ trong phần thẻ BODY của trang. Toàn bộ đoạn mã HTML là một trang bản đồ có thể click và kéo trên giao diện. Nếu bạn không rành về mã HTML thì có thể tham khảo phần hướng dẫn cơ bản của Google tại đây với nhiều cách thức đưa bản đồ vào web cá nhân sau khi có khóa API.

Trang bản đồ cơ bản đã hình thành sau khi tạo khóa API

Bước 3: Ở bước này ta sẽ bắt đầu tiến hành hiệu chỉnh một chút cho bản đồ có dấu ấn riêng của mình. Đầu tiên bạn định vị lại vị trí khởi đầu cho bản đồ ở phần map.setCenter trong đoạn mã ví dụ được cung cấp ở bước trên. Chỉ cần thay đổi tọa độ sau GLatLng để phù hợp với kinh độ, vĩ độ của điểm khởi đầu mà bạn muốn thiết lập lại.

Bản đồ Google Map đã được tích hợp vào trang web cá nhân

Cuối cùng, cho đoạn mã trên vào một chương trình thiết kế website như Dreamweaver, lưu ý bổ sung script vào thẻ HEAD và làm theo các chỉ dẫn để tải bản đồ trong phần thẻ BODY.

Theo hướng dẫn trên cùng với một chút nghiên cứu thêm, bạn có thể bổ sung công cụ tìm kiếm Google Local, tích hợp các điều khiển tùy chọn hay những chỉ dẫn lái xe vào website cá nhân của mình. Phần thủ thuật hiệu chỉnh thêm "hoa lá" cho bản đồ sẽ được hướng dẫn ở bài sau.