Sử dụng google map api cơ bản trong rails

Hôm nay mình xin được hướng dẫn cơ bản cách sử dụng gg map API.

Bước 1: Vào link sau, đăng kí project và chọn getKey. https://developers.google.com/maps/documentation/javascript/get-api-key#key

Sau bước này ta đã có key để sử dụng cho ứng dụng của ta.

Bước 2: Nhúng đoạn mã dưới đây vào file application.html.erb.

<script src="https://maps.googleapis.com/maps/api/js?key=[KEY MA TA VUA NHAN DUOC]&sensor=false&libraries=places"></script>

Bước 3: Tạo thẻ html với mã id tùy ý vào vị trí mà ta muốn hiển thị

<div id="map"></div>

Nhớ thêm css nhé . Không là mặc định nó sẽ có height = 0px

Bước 4: Tạo file.js để khởi tạo map.

document.addEventListener("turbolinks:load", function() {
  var center_default = {lat: 21.0119842, lng: 105.8471442};
  map = new google.maps.Map(document.getElementById('map'), {
    center: center_default,
    zoom: 13
  });
});

Đoạn mã trên khởi tạo map ở vị trí mặc định có tọa độ (center_default) và độ thu phóng (zoom).

Như vậy là ta đã có 1 map để hiển thị rồi.

Ngoài ra nếu muốn sử dụng marker cho map thì ta có thể làm như sau

marker = new google.maps.Marker({
  map: map,
  draggable: true,
  animation: google.maps.Animation.DROP,
  position: {lat: 21.0119842, lng: 105.8471442}
});

Ngoài ra còn rất nhiều thuộc tính, tính năng của google map api. Các bạn có thể lên trang chủ tìm kiếm. Cảm ơn