Location Search sử dụng geocoder & gmaps4rails gem

Bài đăng này đã không được cập nhật trong 7 năm

1. Tổng quan về gem gmaps4rails

Gmaps4rails là gem được phát triển chỉ đơn giản là tạo ra một bản đồ của Google với lớp phủ (bao gồm: đánh dấu, infowindows ...). Tuy nhiên, nó được áp dụng trên một codebase rất linh hoạt và có thể dễ dàng tích hợp với những gem khác mang lại hiệu quả cao cho các dự án liên quan đến map.
Đương nhiên, nhắc đến google map, chúng ta sẽ sử dụng google map API rồi, để hiểu rõ hơn về google map API các bạn có thể tham khảo trên mạng hoặc có một bài viết mà mình cho khá hay ở link dưới đây

https://viblo.asia/nguyenhoa/posts/ZWApGxJ3R06y
Với việc gem gmaps4rails dễ dàng tích hợp với các gem khác, dễ dàng thấy việc sử dụng gem này có thể đem lại nhiều lợi ích
- Đầu tiên, chưa kể đến việc kết hợp với gem khác, bản thân gmaps4rails cũng đã cung cấp đến việc hiển thị khoảng cách, cũng như custom lại bản đồ để hiển thị 1 cách đẹp đẽ hơn, làm cho app của chúng ta trở nên độc đáo hơn
- Tiếp đó, việc tích hợp với gem khác ví dụ như gem geocoder có thể dễ dàng giúp chúng ta search location 1 cách nhanh hơn. (Mình xin phép nói ngắn gọn và có 1 bài viết sau về cách kết hợp các gem này)

Xong rồi, trên đây là phần giới thiệu qua về gem gmaps4rails mà mình muôn nói tới trong bài.

2. Cách sử dụng gem gmaps4rail để xây dựng map cơ bản

Sau đây, mình sẽ giới thiệu qua về cách sử dụng và 1 số custom cho map cơ bản

Đầu tiên, đương nhiên là thêm vào gem file rồi bundle rồi ^-^

gem 'gmaps4rails'

Sau đó, chúng ta cần tạo 1 div để hiển thị cho map

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

Tiếp đến là chèn google script vào app của bạn, ở đây mình chèn vào web html

<script src="//maps.google.com/maps/api/js?v=3.23&key=[your API key]"></script> <!-- cần chèn key API của bạn nhé -->
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script> <!-- cái này dùng để custom lại map -->

ở bước này có thể bạn cần cả underscore.js, xem ở đây

Giờ cần chèn vào mã nguồn javascript, trong rails bạn chỉ cần thêm vào file application.js

//= require underscore
//= require gmaps/google

Rồi, giờ đến lúc khởi tạo map, chúng ta cần thêm đoạn script này vào để khởi tạo

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers([
    {
      "lat": 0,
      "lng": 0,
      "picture": {
        "url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
        "width":  32,
        "height": 32
      },
      "infowindow": "hello!"
    }
  ]);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

Bạn có thể custom lại map của mình bằng cách pass qua 1 số đối tương tùy chọn hoặc vô hiệu hóa 1 số trình điều khiển của bản đồ?

handler = Gmaps.build('Google');
handler.buildMap({
    provider: {
      disableDefaultUI: true
      // vượt qua 1 số tùy chọn của Google Maps API tại đây
    },
    internal: {
      id: 'map'
    }
  },
  function(){
    markers = handler.addMarkers([
      {
        "lat": 0,
        "lng": 0,
        "picture": {
          "url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
          "width":  32,
          "height": 32
        },
        "infowindow": "hello!"
      }
    ]);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  }
);

Mốt số tùy chọn có thể pass qua bạn xem ở đây nhé

Xong việc tạo map, giờ đến lúc xử lý trong controller (lưu ý: chúng ta cần có các trường trong bảng cơ sở dữ liệu để lưu lại tọa độ để hiển thị trong ví dụ này là bảng User)

@users = User.all
@_hash = Gmaps4rails.build_markers(@users) do |user, marker|
  marker.lat user.latitude
  marker.lng user.longitude
end

Cuối cùng sau khi đã xử lý trong controller, giờ đến view, chúng ta cần truyền biến để bắt đầu hiển thị thông tin vị trí ra map

<script>
    markers = handler.addMarkers(<%=raw @_hash.to_json %>);
</script>

Ok, vậy là mình đã trình bày xong các bước đơn giản để tạo 1 map google bằng cách sử dụng gem gmaps4rails.

Bài viết có phần sơ sài, mong mọi người góp ý thêm cho bài viết thêm hữu ích hơn, xin cảm ơn.

Mục lục