Hướng dẫn nhúng Google Maps vào website theo vị trí đã định sẵn

Xin chào các bạn, ở bài trước Thịnh có chia sẻ với các bạn 2 bài viết về Google Maps khá quan trọng và bếu không có 2 bài đó thì sẽ không có nội dung bài viết của bài này. Nếu bạn chưa coi thì bạn truy cập 2 liên kết sau đọc trước và thực hiện để có thể thực hiện các bước tiếp theo.

• Hướng dẫn đăng ký Google để tạo key API Google Map
• Hướng dẫn xác định tọa độ một địa điểm cần thiết trên Google Maps

Sau khi bạn coi xong 2 bài ở liên kết bên trên thì ở bài này Thịnh sẽ chia sẻ với các bạn cách đưa bản đồ Google Maps vào website của bạn.

Điều đầu tiên bạn cần có là Key API Google Maps và điều thứ 2 là tọa độ gồm kinh độ và vĩ độ của công ty, trụ sở doanh nghiệp, cửa hàng của bạn. Sau khi bạn đã có được 2 thông tin cần thiết bạn tiến hành viết code hiển thị cho website như sau.

1. Đầu tiên bạn chèn thẻ <div id=”map”></div> vào website của bạn, thường thì mọi người sẽ chọn full chiều rộng ở chân trang.
2. Tiếp theo bạn viết đoạn js như sau ngay phí dưới đoạn mã ở bước 1.

   <script>
    function initMap() {
      var uluru = {lat: 21.0302432, lng: 105.8354};
      var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
    }
   </script>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSxLoeVH330_x1JYvbWXnNmGFAKFKOPeE&callback=initMap">
   </script>
   

3. Sau khi bạn đã chèn xong, bây giờ bạn cần thay đổi kinh độ và vĩ độ đẻ bản đồ trên website của bạn hiển thị đúng bằng cách thay thông số
   • lat: 21.0302432 (kinh độ)
   • lng: 105.8354 (vĩ độ)
4. Tiếp đến bạn thay key API Google Maps vào phần bôi đỏ ở đoạn code bước 2: AIzaSyBSxLoeVH330_x1JYvbWXnNmGFAKFKOPeE thành key API mà bạn đã tạo ở bài viết trước.
5. Sau khi bạn thay 2 thông số trên gồm lat và Ing trong đoạn mã ở bước 2 đã được bôi đỏ bạn sẽ có bản đồ trên web dạng như sau.
   
6. Nhưng trước khi hiển thị được như hình trên thì bạn phải sử dụng mã lệnh css như sau:

   #map {
   width: 100%;
   height: 400px;
   background-color: grey;
   }
   

Lưu ý: key API Google Maps sẽ sét theo domain chính vì thế nếu bạn muốn dùng chung key API cho nhiều web thì bạn cần set thêm domain cho nó, còn nếu ko set bạn có sử dụng key API đó đi chăng nữa nó sẽ không hiển thị bản đồ trên website mà chỉ là dạng cảnh báo đen nhám.

Chúc các bạn thành công!