Google api là gì? 8 bước tạo Google Map API đơn giản » vietnamtravel24h

Google API là ứng dụng được sáng tạo bởi Google dùng để sử dụng Maps trên app điện thoại và website. Trong bài viết hôm nay, hãy cùng compamarketing tìm hiểu về Google api là gì? 8 bước tạo Google Map API đơn giản. Cùng theo dõi để tham khảo nhé!

1. API là gì?

API (Application Programming Interface) là một giao diện lập trình sử dụng các kết nối phương pháp với phần mềm và thư viện khác. API nằm trong hệ điều hành Windows và thậm chí Twitter cũng có web này. Tuy nhiên, trong mỗi nền tảng, API được sử dụng với nhiều ứng dụng khác nhau. API có thể hiểu giống như bàn phím, là bản đồ để kết nối người dùng với máy tính. Đây là giao diện phần mềm giữa hệ điều hành và chương trình.

Mỗi API cho Linux và Windows hoạt động khác nhau. API đang tìm kiếm mức độ truy cập bị cắt xén đối với các tệp đã sử dụng. Nói một cách đơn giản, API giống như công cụ để tạo phần mềm. API là nghệ thuật mới của Microsoft để xây dựng đến quá trình phân tích. API bao gồm: controller, routing, action response, loc container, filter, unit test, model binder, injection,… Ngoài ra, nó còn hỗ trợ các phương thức như: Post / Get / Delete / Put data.

2. Ứng dụng của API

2.1. Web API

Còn được gọi là hệ thống API được sử dụng trong trang web. Các trang web sử dụng các API cho phép bạn cập nhật, kết nối hoặc lấy dữ liệu dễ dàng hơn. Ví dụ, khi bạn tạo một chức năng đăng nhập thông qua Google, Twitter, Facebook, bạn đang gọi API Google. Bên cạnh đó, các ứng dụng trên điện thoại đều lấy dữ liệu thông qua API.

2.2. API trên hệ điều hành

Windows và Linux sử dụng các API để cung cấp dữ liệu, chỉ định các chức năng và sử dụng chúng như các phương pháp để kết nối. API giúp tạo phần mềm liên kết trực tiếp với hệ điều hành.

2.3. API của thư viện phần mềm hay framework

API sẽ quy định, mô tả các hành động mà thư viện dữ liệu cung cấp. Mỗi API có các điều khiển khác nhau và chúng giúp cho một chương trình ngôn ngữ có thể sử dụng các thư viện được xây dựng trong một chương trình ngôn ngữ khác. Ví dụ: bạn có thể yêu cầu thư viện tạo tệp PDF nhưng viết chúng bằng C ++.

3. Tính năng nổi bật của API

API sẽ hỗ trợ bạn xây dựng các HTTP đơn giản hơn và nhanh hơn. Nhờ mã nguồn mở, bạn có thể sử dụng bất kỳ ứng dụng khách nào có thể hỗ trợ JSON, XML. Đặc biệt, API hỗ trợ đầy đủ các thành phần HTTP như: URI, bộ nhớ đệm, forma nội dung, lập phiên bản, forma nội dung tiêu đề yêu cầu / phản hồi.

4. Ưu điểm của API

API có cấu hình đơn giản và hỗ trợ cao, có thể hỗ trợ đầy đủ RESTful và MVC như: định tuyến, kết quả hành động, chất kết dính mô hình, bộ lọc, bộ điều khiển, vùng chứa IoC, kiểm tra đơn vị, tiêm phụ thuộc với mã nguồn mở.

5. Tương tác giữa Server App và Google Servers

Bạn cần tạo một tài khoản tại https://console.developers.google.com để sử dụng API. Tất cả các đối tượng truy cập API phải thông qua Oauth để xác thực. Để thực hiện yêu cầu và truy cập API, người dùng cần có mã thông báo truy cập. Có thể nhận được mã thông báo tại Tài khoản dịch vụ được chứng nhận. Yêu cầu POST bao gồm các Tham số: loại cấp và Mã thông báo web JSON (JWT).

Đầu tiên là Jet-bearer và thứ hai là JWT bao gồm bất kỳ thông tin đăng nhập nào trong chuỗi được mã hóa trước đó. Trong đó:

Tiêu đề được sử dụng để xác định thuật toán đăng nhập, được sử dụng để đăng nhập vào JWT.
Phần Bộ xác nhận quyền sở hữu sẽ chứa email của tài khoản, thời gian hết hạn và phạm vi dịch vụ, v.v.
Chữ ký của bộ yêu cầu và tiêu đề.

Sau khi yêu cầu được gửi và nhận bởi máy chủ, bạn sẽ có một mã thông báo truy cập để sử dụng trong 1 giờ. Sử dụng mã thông báo này để sử dụng các dịch vụ API của Google.

6. Tổng quan về Google Map API

6.1. Google Map API là gì?

Google Map là một bản đồ trực tuyến được áp dụng trên một trang web và ứng dụng di động miễn phí, do Google xuất bản và quản lý. Ứng dụng này cho phép người dùng sử dụng các tính năng như: tìm vị trí, tìm đường, hiển thị lộ trình tối ưu, hướng dẫn bắt xe buýt, các địa điểm chỉ định như bệnh viện, cây xăng, cây ATM, v.v.

Google Map API là phương pháp dùng để cho phép web B sử dụng dịch vụ hiển thị nội dung trong web A – Google Map thông qua Google Map API. Bản đồ tại web A sẽ được nhúng vào web B (cá nhân). Khi đó, web B có thể sử dụng tất cả các dịch vụ và tính năng mà Google Map đã cung cấp.

6.2. Một số ứng dụng của Google Map API

Khi sử dụng Google Map API, bạn có thể đánh dấu trên bản đồ với tất cả thông tin về địa điểm đó như trường học, bệnh viện, máy ATM, v.v.
Tính năng chỉ đường tối ưu, tìm địa điểm hoặc cung cấp cách tìm thông qua các dịch vụ có sẵn tại Google Map.
Phân vùng rõ ràng các đặc khu như khu sản xuất, khu đô thị, khu ô nhiễm, v.v.
Giám sát lưu lượng giao thông trong các khu vực được chỉ định.

6.3. Google Maps API thay đổi cách tính phí

API Google Map đã thay đổi cách tính phí cho các dịch vụ mà nó cung cấp. Khi tạo tài khoản mới, người dùng sẽ được sử dụng dịch vụ miễn phí trong giới hạn 200 USD / tháng. Điều này có nghĩa là bạn có thể phát triển các ứng dụng nhỏ (yêu cầu thấp) trong tháng đó miễn phí.

Ngoài ra, một số dịch vụ như Bản đồ động hay Bản đồ tĩnh cho di động đang được Google miễn phí để kích thích sự phát triển ứng dụng trên nền tảng có sẵn này.

6.4. Google Map API bị chặn ở Việt Nam

Việt Nam nằm trong danh sách cấm sử dụng Google Map API. Do đó, để có thể sử dụng MAP APO, bạn cần có Tài khoản thanh toán mới và phải nằm ngoài danh sách bị chặn mới có thể sử dụng được.

7. Hướng dẫn tạo Google Map API nhanh

Nếu bạn đã nắm vững khái niệm API Google là gì và cách thức hoạt động của nó. Bạn cũng có thể dễ dàng tạo Google Map Api bằng một số bước cơ bản:

Có thể bạn chưa biết: MS17 | Làm giàu không khó | Đất 2 mặt tiền lên được THỔ CƯ và phân lô

Bước 1: Truy cập vào Google API Console -> chọn Select a project (mỗi project sẽ có nhiều thư viện API)

Bước 2: Thêm project mới bằng cách nhấn vào New project.

Bước 3: Điền đầy đủ thông tin vào các mục project name và location -> chọn Create.

Bước 4: Đến project vừa tạo, chọn APIs & Service -> sau đó chọn Credentials.

Bước 5: Chọn Create Credentials -> sao chép Your API Key -> chọn Restrict Key.

Chọn Create Credentials -> sao chép Your API Key -> chọn Restrict Key.

Bước 6: Điền mọi thông tin cần thiết -> chọn Save.

Điền thông tin theo hướng dẫn sau:

Name: Đặt tên cho API để dễ dàng quản lý về sau
Application restrictions: Http referrers (web sites)
Website restrictions Nhập 2 giá trị sau
- *.your-domain.com/*
- https://your-domain.com/*
API restrictions: Don’t restrict key
Save: Lưu cài đặt API

Lưu ý: your-domain.com là tên miền của bạn muốn sử dụng Google Maps API.

Truy cập Project bạn vừa tạo → APIs & Servives → Library

Nhập các Thư viện sau → Enable:

Maps JavaScript API
Directions API
Maps Embed API
Geocoding API
Places API

Bước 8: Chọn Dashboard để kiểm tra thư viện xem đã cài đặt thành công hay chưa.

Qua 8 bước cơ bản, chúng ta đã hoàn thành quy trình tạo Google Map Api.

8. Tạo 1 Google Map đơn giản

8.1. Tạo 1 API Key

Truy cập vào https://code.google.com/apis/console và đăng nhập bằng tài khoản gmail của mình.
Click the APIs & auth -> APIs.
Kéo xuống dưới tìm Google Maps JavaScript API v3 và kích hoạt dịch vụ bằng việc click vào button chuyển trạng thái từ OFF sang ON.
Click API Access -> Create new Browser key..., một API key sẽ hiện lên và bạn sẽ coppy lại để sử dụng.

8.2. Lấy kinh độ, vĩ độ để hiển thị bản đồ

Truy cập vào http://www.latlong.net/ và nhập địa điểm cần tìm.

8.3. Hiển thị bản đồ

<!DOCTYPE html>
<html>
<head>
<!– Add Google API Key –>
<script src=”http://maps.googleapis.com/maps/api/js?key=#{your_app_key}&sensor=false”>
</script>
<script>
//Khoi tao Map
function initialize() {
//Khai bao cac thuoc tinh
var mapProp = {
//Tam ban do, quy dinh boi kinh do va vi do
center:new google.maps.LatLng(51.508742, -0.120850),
//set default zoom cua ban do khi duoc load
zoom:5,
//Dinh nghia type
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//Truyen tham so cho cac thuoc tinh Map cho the div chua Map
var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>

<body>
<!– Khai bao the div chua Map –>
<div id=”googleMap” style=”width:500px;height:380px;”></div>
</body>
</html>

9. Google Maps Overlays (Lớp phủ)

Lớp phủ(overlays) là các đối tượng trên bản đồ, được xác định bởi tọa độ vĩ độ/ kinh độ.
Các loại lớp phủ :Marker : xác định một điểm trên bản đồ hoặc đánh dấu địa điểm dựa trên vĩ độ và kinh độ, có thể được hiển thị bằng icon (hình ảnh) tùy chỉnh của người dùng ví dụ như icon dưới đây:

9.1. Add 1 marker

add marker vào map bằng cách sử dụng method setMap() :

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);

position : bắt buộc, quy định tọa độ LatLng của điểm được đánh dấu. (ở đây là tọa độ của biến myCenter)

9.2. Hiệu ứng cho Marker

var marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });

marker.setMap(map);

animation: cách thức chuyển động của icon của điểm đánh dấu. CÓ 2 cách : DRAG (đứng yên), Bounce (dao động theo quỹ đạo lên – xuống).

9.3. Icon thay thế cho Marker

var marker=new google.maps.Marker({
  position:myCenter,
  icon:"pinkball.png'
  });

marker.setMap(map);

icon(tùy chọn): hình ảnh tùy chọn mà bạn muốn hiển thị thay thế hình ảnh mặc định. Dùng tùy chọn này thay thế cho marker.setIcon(link đến hình ảnh trong thư mục), ví dụ cho icon:'pinkball.png' -> kết quả :

9.4. Polyline

Một Polyline là 1 đường được vẽ để nối 1 loạt các tọa độ(các điểm chỉ định trước (ví dụ : lộ trình của 1 chuyến đi, 1 khu vực địa lý… )

Các thuộc tính của 1 Polyline :

path : quy định cụ thể 1 số điểm (kinh độ – vĩ độ) cho dòng
strokeColor : màu cho dòng (màu định dạng format: “#FFFFFF”)
strokeOpacity : độ mờ đục của dòng (là giá trị trong khoảng 0.0 và 1.0)
strokeWeight : xác định độ rộng của dòng (tính theo pixel)
editable : xác định quyền chỉnh sửa của người dùng đối với dòng (true / false)

// định nghĩa 1 trip: stavanger-amsterdam-london
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  //xác định các điểm cần nối trên bản đồ
  path:myTrip,
  // màu cho dòng : màu xanh lục
  strokeColor:"#0000FF",
  // độ đậm : 0.8
  strokeOpacity:0.8,
  // độ rộng line : 2px
  strokeWeight:2
});

-> kết quả :

9.5. Polygon

Polygon tương tự như polyline nhưng có thêm tính năng khoanh vùng (xác định 1 tập hợp các điểm tạo thành 1 khối kín)

Thuộc tính tương tự như polyline nhưng có thêm 2 thuộc tính sau:

fillColor : chỉ định màu của khu vực được xác định (màu định dạng : “#FFFFFF”)
fillOpacity : độ mờ đục của vùng xác định (giá trị trong khoảng 0.0 -> 1.0)

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

-> kết quả :

9.6. Circle

Các thuộc tính :

center : xác định trung tâm của vòng tròn
radius : bán kính của đường tròn (mét)
strokeColor : màu cho đường viền (định dạng : “#FFFFFF”)
strokeOpacity : độ mờ đục của đường viền (giá trị trong khoảng 0.0 -> 1.0)
strokeWeight : độ rộng của đường viền (px)
fillColor : chỉ định màu của khu vựcbên trong đường tròn (màu định dạng : “#FFFFFF”)
fillOpacity : độ mờ đục của vùng xác định (giá trị trong khoảng 0.0 -> 1.0)
editable : xác định quyền chỉnh sửa của người dùng đối với dòng (true / false)

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:40000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

-> kết quả :

9.7. InfoWindow

show 1 InfoWindow là 1 đoạn text cho 1 marker:

var infowindow = new google.maps.InfoWindow({
  // nội dung của InfoWindow
  content:"Hello World!"
  });

infowindow.open(map,marker);

-> kết quả :

9.8. Tổng hợp các nội dung trên

Ví dụ về đánh dấu địa điểm cho tòa nhà Landmark72 : Vào trang http://www.latlong.net/ để lấy tọa độ của địa điểm bạn muốn (ví dụ ở đây là (21.017324, 105.784054)) để điền vào đoạn code sau :

<!DOCTYPE html>
<html>
<head>
<script
src=”http://maps.googleapis.com/maps/api/js”>
</script>

<script>
// khai báo tọa độ của place
var myCenter=new google.maps.LatLng(21.017324, 105.784054);

function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById(“googleMap”),mapProp);

var marker=new google.maps.Marker({
position: myCenter,
//icon: “pinkball.png”,
//title: “Landmark 72 ^_^”,
//draggable: true,
//animation:google.maps.Animation.BOUNCE,
});

marker.setMap(map);
}

google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>

<body>
<div id=”googleMap” style=”width:500px;height:380px;”></div>
</body>
</html>

Link demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_overlays_marker

Trong đó :

map(tùy chọn): quy định đối tượng bản đồ được đánh dấu. nếu thuộc tính này được khai báo trong đây nó sẽ thay thế cho marker.setMap(map).
title(tùy chọn): tiêu đề của địa điểm (khi trỏ chuột vào vị trí điểm đó).
draggable(tùy chọn): thể hiện sự chuyển động của điểm được đánh dấu. Nếu set giá trị TRUE thì tính động được khởi động (có thể di chuyển icon đánh dấu điểm hiện tại sang 1 địa điểm khác), hình minh họa :

10. Google Map Event

Sự kiện gồm 2 loại:

UI Event: Lắng nghe sự kiện từ người dùng.
MVC State change: Lắng nghe sự kiện từ sự thay đổi giá trị của các thuộc tính trên Map. Để lắng nghe sự kiện, ta sử dụng phương thức addListener(). Phương thức này nhận vào 1 đối tượng, 1 kiểu sự kiện để lắng nghe và 1 phương thức xử lý khi sự kiện xảy ra.

Có thể bạn chưa biết: CuteFTP Pro là gì? Hướng dẫn cài đặt và sử dụng phần mềm CuteFTP Pro - vietnamtravel24h

10.1. UI Event

Một số đối tượng trong Maps API được thiết kế để đáp ứng với sự kiện người sử dụng chẳng hạn như các sự kiện từ chuột hoặc bàn phím . Một đối tượng google.maps.Marker có thể lắng nghe người sử dụng các sự kiện sau đây : click, dblclick, mouseup, mousedown, mouseover, mouseout.

Ví dụ:

Click vào 1 marker để zoom bản đồ:

// Phóng to 9 lần khi click marker
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });

Demo: http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_click

Mở 1 InfoWindow khi click vào Marker:

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });
//bắt sự kiện click marker
google.maps.event.addListener(marker, 'click', function() {
  //mở infowindow
  infowindow.open(map,marker);
  });

Demo: http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_infowindow

10.2. MVC State Change

Các sự kiện:

zoom_changed: sự kiện sẽ thực thi khi ta zoom size trên map
center_changed: sự kiện sẽ thực thi khi thuộc tính center của map thay đổi
title_changed: sự kiện sẽ thực thi khi thuộc tính title của map thay đổi
heading_changed: sự kiện sẽ thực thi khi thuộc tính heading của map thay đổi
dragstart: sự kiện sẽ thực thi khi người dùng bắt đầu drag bản đồ
drag: sự kiện sẽ thực thi khi người dùng drag bản đồ
dragend: sự kiện sẽ thực thi khi người dùng kết thúc drag bản đồ
maptypeid_changed: sự kiện sẽ thực thi khi thuộc tính maptypeid của map thay đổi b. Event Listeners (lắng nghe sự kiện)

Ví dụ:

Pan Back to Marker – Quay lại điểm đánh dấu (quay lại vị trí cũ sau n giây sau khi kéo marker)Khi di chuyển chuột làm thay đổi bản đồ, sự kiện này giúp điểm đánh dấu (marker) luôn hiển thị ở vị trí trung tâm của bản đồ

google.maps.event.addListener(map,'center_changed',function() {
  // set thời gian quay lại là 3s
  window.setTimeout(function() {
    map.panTo(marker.getPosition());
  },3000);
});

Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_pan

Truyền tham số cho UI Events Các sự kiện người dùng trong Google Map API thường được thêm vào một tham số sự kiện và tham số có thể được truy cập bằng sự kiện listener khi sự kiện xảy ra. Ví dụ:

Set Markers and Open InfoWindow for Each Marker (tạo marker và infowindow tương ứng khi click vào 1 poin nào đó trong bản đồ)

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
  });
//hàm placeMarker() sẽ thay thế 1 điểm được click bằng 1 marker và infowindow có chứa thông tin về tọa độ của điểm
function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() +
    '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}

-> kết quả :

Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_infowindow

Sử dụng Closeres trong sự kiện Listerner Các event Listerner thường sử dụng Closures để truy cập đến các biến thường không nằm trong đối tượng của các sự kiện đó. Ví dụ: đoạn code dưới đây dùng Clousures để gán một thông điệp bí mật đến tập các marker, khi click vào mỗi marker sẽ hiện lên một phần của thông điệp ấy :

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Thêm ngẫu nhiên 5 marker
  var southWest = new google.maps.LatLng(-31.203405, 125.244141);
  var northEast = new google.maps.LatLng(-25.363882, 131.044922);

  var bounds = new google.maps.LatLngBounds(southWest, northEast);
  map.fitBounds(bounds);

  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();

  for (var i = 0; i < 5; i++) {
    var position = new google.maps.LatLng(
        southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });

    marker.setTitle((i + 1).toString());
    attachSecretMessage(marker, i);
  }
}
// 5 markers chỉ ra 1 secret message khi được click nhưng thông điệp không phải là trong dữ liệu mẫu của marker
function attachSecretMessage(marker, num) {
  var message = ['This', 'is', 'the', 'secret', 'message'];
  var infowindow = new google.maps.InfoWindow({
    content: message[num]
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(marker.get('map'), marker);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

Demo: https://google-developers.appspot.com/maps/documentation/javascript/examples/event-closure

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: 'Click to zoom'
  });

  google.maps.event.addListener(map, 'center_changed', function() {
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
  });

  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

Listening to DOM Events (lắng nghe sự kiện từ DOM)Google Map Api hỗ trợ hai cách lắng nghe sự kiện từ DOM:

** a. Sử dụng phương thức**

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: 'Click to zoom'
  });

  google.maps.event.addListener(map, 'center_changed', function() {
    // quay trở lại marker sau 3 giây kể từ  khi vị trí trung tâm bị thay đổi
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
  });

  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });
}
// sử dụng phương thức addDomListener để nghe ngóng sự kiện
google.maps.event.addDomListener(window, 'load', initialize);

Giải thích :

addDomListener(instance:Object, eventName:string, handler:Function)

b. Sử dụng sự kiện onload() của tài liệu HTML trong thẻ

11. Map Controls

11.1. The Default Controls (Control mặc định)

Control mặc định thiết lập cho Google Map gồm:

Zoom – hiển thị 1 slider hoặc button “+/-” để điều khiển độ zoom (zoom level) của bản đồ
Pan – công cụ để dịch chuyển bản đồ sang trái, phải, trên, dưới.
MapType – cho phép người dùng chuyển đổi giữa các loại bản đồ (roadmap và satellite)
Street View – hiển thị 1 icon Pegman (hình người) để có thể kéo bản đồ để enable Street View (xem chi tiết về đường phố).

Một số control khác

Scale – hiển thị 1 thành phần chia tỷ lệ bản đồ
Rotate – hiển thị một biểu tượng nhỏ hình tròn để xoay bản đồ
Overview Map – hiển thị một thumbnail overview map cho phép xem bản đồ hiện tại trong một khu vực rộng hơn.

Bạn có thể chỉ định control nào được hiển thị khi tạo bản đồ (bên trong MapOptions) hoặc gọi bởi setOptions() để thay đổi các tùy chọn.

Vô hiệu hóa các control mặc định

Thiết lập thuộc tính disableDefaultUI (trong Map options object) thành true:

disableDefaultUI:true

Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_disable

11.2. Bật tất cả các control

Một số control xuất hiện trên bản đồ theo mặc định, trong khi những control khác sẽ không xuất hiện trừ khi ta thiết lập chúng.
Thêm hoặc xóa các control từ bản đồ được quy định trong Map options object.
Thiết lập control thành true để làm nó hiển thị (visible). Thiết lập control thành false để ẩn nó đi. Ví dụ, bật tất cả các control:

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_add

Kết quả :

Kết quả

Chỉnh sửa controls

Một số map control có thể cấu hình được.
Các control có thể được sửa đổi bằng cách xác định các trường control options.

Ví dụ, các tùy chỉnh để thay đổi một Zoom control được quy định bởi trường zoomControlOptions. Trường zoomControlOptions có thể chứa:

`google.maps.ZoomControlStyle.SMALL` – hiển thị 1 `mini-zoom` control (chỉ có 2 button + và -)

`google.maps.ZoomControlStyle.LARGE` – hiển thị `zoom control` trượt tiêu chuẩn

`google.maps.ZoomControlStyle.DEFAULT` – chọn zoom control tốt nhất dựa trên kích thước `device` và `map`

zoomControl:true,
zoomControlOptions: {
    style:google.maps.ZoomControlStyle.SMALL
}

Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_modify1

Chú ý : Khi modify 1 control, phải luôn enable control đầu tiên (set là true)
Các control có thể cấu hình khác là MapType control
Có thể thiết lập type control bởi trường mapTypeControlOptions. Trường mapTypeControlOptions có thể chứa:google.maps.MapTypeControlStyle.HORIZONTAL_BAR – hiển thị 1 button cho mỗi map type
google.maps.MapTypeControlStyle.DROPDOWN_MENU – chọn map type thông qua 1 dropdown menu

google.maps.MapTypeControlStyle.DEFAULT – hiển thị hành vi mặc định (phụ thuộc kíchcỡ màn hình – screen size)

mapTypeControl:true,
mapTypeControlOptions: {
    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_modify2

Bạn cũng có thể xác định vị trí control, với thuộc tính ControlPosition:

mapTypeControl:true,
mapTypeControlOptions: {
    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    // vị trí top center
    position:google.maps.ControlPosition.TOP_CENTER
}

Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_modify3

Có thể bạn chưa biết: Những mẫu kệ tivi đẹp nhất 2022 - vietnamtravel24h

Control tùy chỉnh-Custom Controls

Dưới đây là ví dụ tạo một control tùy chỉnh mà luôn luôn đưa bạn trở lại London, khi click vào bản đồ(nếu bản đồ được kéo):

controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor="yellow";
controlUI.style.border="1px solid";
controlUI.style.cursor="pointer";
controlUI.style.textAlign = 'center';
controlUI.title="Set map to London";
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize="12px";
controlText.style.paddingLeft="4px";
controlText.style.paddingRight="4px";
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);

Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_controls_custom

Google Maps Types

Google Maps – Basic Map Types

ROADMAP (bản đồ truyền thống, default 2D map)
SATELLITE (photographic map)
HYBRID (photographic map + tên đường và tên thành phố)
TERRAIN (bản đồ với hệ thống sông ngòi, núi….) Kiểu của map được xác định bởi thuộc tính mapTypeId :

var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:7,
  // định kiểu cho bản đồ là HYBRID
  mapTypeId: google.maps.MapTypeId.HYBRID
};

Hoặc có thể gọi method setMapTypeId() :

map.setMapTypeId(google.maps.MapTypeId.HYBRID);

Google Maps – 45° Perspective View (view phối cảnh 45°)

Bản đồ loại SATELLITE và HYBRID hỗ trợ xem phối cảnh hình ảnh 45° cho 1 số vùng xác định (chỉ các vùng ở zoom level cao)

Nếu zoom vào 1 vùng với view phối cảnh 45°, bản đồ sẽ tự động thay đổi phối cảnh, thêm nữa thêm vào 1 số thứ sau :

Một la bàn hình bánh xe cho Pan control, cho phép bạn xoay hình ảnh.
1 Rotate control nằm giữa Pan control và Zoom control, cho phép bạn xoay ảnh 90°
1 toggle control (công tắc bật – tắt) để điều chỉnh chế độ view phối cảnh 45°
Ví dụ:

var mapProp = {
center:myCenter,
zoom:18,
mapTypeId:google.maps.MapTypeId.HYBRID
};

Kết quả :

![Selection_025.png](https://images.viblo.asia/064d7a90-f681-428c-9bb0-a80f33d6ad3b.png)

![Selection_024.png](https://images.viblo.asia/6e21e88b-3c13-4568-8dfb-d30597f0a621.png)

Demo : http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_types_45

Google Maps – Disable 45° Perspective View – setTilt(0) (tắt chức năng view phối cảnh 45°)

Tắt chức năng này bằng cách gọi setTilt(0) trong Map object :

map.setTilt(0);

Tip : để enable 45° perspective view ở đằng sau, gọi setTilt(4

Google Maps API Reference

Maps API Map() Constructor

Tạo 1 Google Map :

var map = new google.maps.Map(document.getElementById(“googleMap”),mapOpt);

Định nghĩa và sử dụng

Map() constructor tạo 1 bản đồ mới bên trong 1 thành phần HTML xác định (thường là

)

Cú pháp

new google.maps.Map(HTMLElement,MapOptions)

Giá trị tham số

Tham số	Mô tả
HTMLElement	Xác định những thành phần HTML trong map
MapOptions	1 đối tượng `MapOptions` chứa khởi tạo các biến/option

Các method của Map()

Phương thức	Giá trị trả về	Mô tả
fitBounds (LatLngBounds)	None (không có)	Tập hợp các khung nhìn với các giới hạn xác định
getBounds()	LatLng, LatLng	Trả về kinh độ/vĩ độ của phía Tây Nam và phía Đông Bắc của khung nhìn hiện tại
getCenter()	LatLng	Trả về kinh độ/vĩ độ (lat/lng) của trung tâm bản đồ
getDiv()	Node	Trả về 1 đối tượng DOM chứa bản đồ
getHeading()	number (số)	Trả về số nhóm `compass heading` các hình ảnh trên không (cho loại SATELLITE (vệ tinh) và HYBRID)
getMapTypeId()	HYBRID ROADMAP SATELLITE TERRAIN	Trả về kiểu của map
getProjection()	Projection	Trả về Projection hiện tại
getStreetView()	StreetViewPanorama	Trả về StreetViewPanorama mặc định gắn với map
getTilt()	number	Trả về góc tới cho hình ảnh trên không (tính bằng độ) – dùng cho SATELLITE và HYBRID
getZoom()	number	Trả về zoom level hiện tại của map
panBy(xnumber,ynumber)	none	thay đổi trung tâm của map bằng khoảng cách nhất định (pixel)
panTo(LatLng)	none	thay đổi trung tâm của map bằng LatLng
panToBounds(LatLngBounds)	none	pan bản đồ bằng giá trị tối thiểu cần thiết để chứaLatLngBounds
setCenter(LatLng)	none
setHeading(number)	none	thiết lập các nhóm `compass heading` các hình ảnh trên không(đo bằng độ) từ hướng Bắc
setMapTypeId(MapTypeId)	none	thay đổi loại bản đồ
setOptions(MapOptions)	none
setStreetView(StreetViewPanorama)	none	kết nối `StreetViewPanorama` vào bản đồ
setTilt(number)	none	thiết lập góc tới cho hình ảnh trên không (đo bằng độ) – dùng cho SATELLITE và HYBRID
setZoom(number)	none

Properties of Map() – Thuộc tính

Thuộc tính	Type	Mô tả
controls	Array.<MVCArray.<Node>>	Điều khiển thêm để đính kèm vào bản đồ
mapTypes	MapTypeRegistry	Một số đăng ký của trường MapType bởi chuỗi ID
overlayMapTypes	MVCArray.<MapType>	Loại bản đồ thêm cho overlay

Events of Map() – Sự kiện của Map

Event	Đối số	Mô tả
bounds_changed	None (không có)	Kích hoạt khi giới hạn khung nhìn thay đổi
center_changed	none	Kích hoạt khi thuộc tính trung tâm thay đổi
click	MouseEvent	Kích hoạt khi người dùng click vào bản đồ
dblclick	MouseEvent	Kích hoạt khi người dùng click đúp vào bản đồ
drag	none	Kích hoạt liên tục trong khi người dùng kéo bản đồ
dragend	none	kích hoạt khi người dùng ngừng kéo bản đồ
dragstart	none	kích hoạt khi người dùng bắt đầu kéo bản đồ
heading_changed	none	kích hoạt khi bản đồ thay đổi `heading property`
idle	none	kích hoạt sau khi pan hoặc zoom bản đồ
maptypeid_changed	none	kích hoạt khi `mapTypeId` thay đổi
mousemove	MouseEvent	kích hoạt khi chuột đi qua vùng bản đồ
mouseout	MouseEvent	kích hoạt khi chuột ra khỏi vùng bản đồ
mouseover	MouseEvent	kích hoạt khi chuột vào vùng bản đồ
projection_changed	none	kích hoạt khi projection thay đổi
resize	none	kích hoạt khi bản đồ (map) thay đổi kích cỡ
rightclick	MouseEvent	kích hoạt khi click chuột phải vào bản đồ
tilesloaded	none	kích hoạt khi tile hoàn thành việc load
tilt_changed	none	kích hoạt khi `tilt` thay đổi
zoom_changed	none	kích hoạt khi zoom thay đổi

6.8.Controls

Constructor/Object	Mô tả
MapTypeControlOptions	Tùy chọn cho việc sửa đổi 1 control (vị trí và style)
MapTypeControlStyle	Xác định loại bản đồ hiển thị (menu Drop-down hay các button)
OverviewMapControlOptions	Các tùy chọn cho việc render của `overview map control`
PanControlOptions	Các tùy chọn cho việc render của `pan control` (vị trí)
RotateControlOptions	Các tùy chọn cho việc render của `rotate control` (vị trí)
ScaleControlOptions	Các tùy chọn cho việc render của `scale control` (vị trí và style)
ScaleControlStyle	Xác định loại `scale control` để hiển thị
StreetViewControlOptions	Các tùy chọn cho việc render của `street view pegman control` (vị trí)
ZoomControlOptions	Các tùy chọn cho việc render của `zoom control` (vị trí và style)
ZoomControlStyle	Xác định loại `zoom control` để hiển thị (rộng hay hẹp)
ControlPosition	Xác định vị trí các control trên map

Trên đây là Google api là gì? 8 bước tạo Google Map API đơn giản. Hy vọng compamarketing đã mang đến bạn những thông tin hữu ích. Nếu có bất kì thắc mắc gì, hãy để lại comment bên dưới cho compamarketing nhé! Chúc các bạn thành công và đừng quên theo dõi các bài viết chia sẻ về thủ thuật của compamarketing.

Xem thêm bài viết thuộc chuyên mục: Blog

Nguồn: https://vietnamtravel24h.net/

Xem thêm: https://vietnamtravel24h.net/category/cong-nghe

vietnamtravel24h.net

Google api là gì? 8 bước tạo Google Map API đơn giản » vietnamtravel24h

1. API là gì?

2. Ứng dụng của API

2.1. Web API

2.2. API trên hệ điều hành

2.3. API của thư viện phần mềm hay framework

3. Tính năng nổi bật của API

4. Ưu điểm của API

5. Tương tác giữa Server App và Google Servers

6. Tổng quan về Google Map API

6.1. Google Map API là gì?

6.2. Một số ứng dụng của Google Map API

6.3. Google Maps API thay đổi cách tính phí

6.4. Google Map API bị chặn ở Việt Nam

7. Hướng dẫn tạo Google Map API nhanh

8. Tạo 1 Google Map đơn giản

8.1. Tạo 1 API Key

8.2. Lấy kinh độ, vĩ độ để hiển thị bản đồ

8.3. Hiển thị bản đồ

9. Google Maps Overlays (Lớp phủ)

9.1. Add 1 marker

9.2. Hiệu ứng cho Marker

9.3. Icon thay thế cho Marker

9.4. Polyline

9.5. Polygon

9.6. Circle

9.7. InfoWindow

9.8. Tổng hợp các nội dung trên

10. Google Map Event

10.1. UI Event

10.2. MVC State Change

11. Map Controls

11.1. The Default Controls (Control mặc định)

11.2. Bật tất cả các control

admin

Leave a Reply Cancel reply

1. API là gì?

2. Ứng dụng của API

2.1. Web API

2.2. API trên hệ điều hành

2.3. API của thư viện phần mềm hay framework

3. Tính năng nổi bật của API

4. Ưu điểm của API

5. Tương tác giữa Server App và Google Servers

6. Tổng quan về Google Map API

6.1. Google Map API là gì?

6.2. Một số ứng dụng của Google Map API

6.3. Google Maps API thay đổi cách tính phí

6.4. Google Map API bị chặn ở Việt Nam

7. Hướng dẫn tạo Google Map API nhanh

8. Tạo 1 Google Map đơn giản

8.1. Tạo 1 API Key

8.2. Lấy kinh độ, vĩ độ để hiển thị bản đồ

8.3. Hiển thị bản đồ

9. Google Maps Overlays (Lớp phủ)

9.1. Add 1 marker

9.2. Hiệu ứng cho Marker

9.3. Icon thay thế cho Marker

9.4. Polyline

9.5. Polygon

9.6. Circle

9.7. InfoWindow

9.8. Tổng hợp các nội dung trên

10. Google Map Event

10.1. UI Event

10.2. MVC State Change

11. Map Controls

11.1. The Default Controls (Control mặc định)

11.2. Bật tất cả các control

Related Posts

Leave a Reply Cancel reply