Google Maps API JavaScript Services (Places, Directions, Geocoder)

Mình có cơ hội được tìm hiểu về Google Maps API JavaScript V3 từ năm 2011. Nhưng mình không sử dụng nhiều. Do gần đây, dự án mình đang làm có sử dụng đến nó nên mình sẽ viết bài chia sẻ về 3 service mà mình đã tìm hiểu được là Places, Directions và Geocoding.

Về Google Maps API JavaScript thì trên Viblo cũng có khá nhiều bài giới thiệu về nó, ví dụ như Tìm hiểu về Google Map API của @hoang.thi.tuan.dung, bài TÌM HIỂU VỀ GOOGLE MAP API của @nguyen.hoa hay bài Google Maps API của @TuyenNguyen

Các bài viết trên đã giới thiệu khá đầy đủ về Google Maps API, các service và cách tạo một demo đơn giản. Thế nên để tránh mất thời gian, mình sẽ đi thẳng vào demo cho từng thư viện của Google Maps API mà mình đã tìm hiểu được nhé.

Places Library

Autocomplete

Đầu tiên, bạn cần require places library bằng lệnh:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>

Sau đó bạn khởi tạo một div chứa map kèm với một thẻ input để nhận dữ liệu từ người dùng:

<input type="text" id="address" />
<div class="map-canvas"></div>

Style tí cho nó đẹp cái nhỉ