Google map javascript API and Polygon

Chắc hẳn có rất nhiều bạn biết về google api, google cung cấp cho chúng ta rất nhiều các api hỗ trợ, đặc biệt là các vấn đề liên quan tới bản đồ như định vị, tìm đường đi ... một trong số đó là một api cung cấp để chúng ta sử dụng javascript để nhúng 1 bản đồ vào trong view của chúng ta.

Hôm nay mình xin giới thiệu với các bạn về Google map javascript API và sử dụng polygon.

I. Google map javascript API

1. Khởi tạo bản đồ

Đầu tiên là tạo một view và nhúng bản đồ vào đó để ta sử dụng. Sử dụng Google map javascript API rất đơn giản như sau:

<div id="map"></div>
<script>
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: {lat: 21.017494396243393, lng: 105.78447818756104}  // Center the map on Kengnam
    });
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

Ở đây YOUR_API_KEY chình là api key của google mà chúng ta dễ dàng tạo ra tại google console. Hãy nhớ là enable Google map javascript API ở Library lên nhé.

Như thế chỉ cần chúng ta chỉnh css của div#map là có thể có một bản đồ view như ý của mình.

Tiếp theo chúng ta sẽ tiếp cận với 2 khái niệm thường được sử dụng trong google map đó chính là marker và path.

2. Marker

Đây chính là một điểm được đánh dấu trên google hiển thị như hình 1 giọt nước màu đỏ rất quen thuộc với chúng ta.

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: {lat: 21.017494396243393, lng: 105.78447818756104}  // Center the map on Kengnam
    });
   map.addListener('click', addLatLng);
}
function addLatLng(event) {
  var marker = new google.maps.Marker({
      position: event.latLng,
      title: '#' + path.getLength(),
      map: map
    });
)};

Đây chính là code để tạo ra một điểm được đánh dấu trên bản đồ khi ta click chuột vào 1 điểm nào đó.

Đọc code ở đây rất ngắn gọn và dễ hiểu phải không nào.