Google Maps - Bắt đầu

Google Maps là gì?

Google Maps là một dịch vụ lập bản đồ web miễn phí của Google cung cấp nhiều loại thông tin địa lý khác nhau. Sử dụng Google Maps, một người có thể.

Tìm kiếm địa điểm hoặc nhận chỉ đường từ nơi này đến nơi khác.
Xem và điều hướng qua các hình ảnh cấp phố toàn cảnh ngang và dọc của các thành phố khác nhau trên thế giới.
Nhận thông tin cụ thể như lưu lượng truy cập tại một điểm cụ thể.

Google Maps cung cấp một API mà bạn có thể tùy chỉnh các bản đồ và thông tin hiển thị trên chúng. Chương này giải thích cách tải một Bản đồ Google đơn giản trên trang web của bạn bằng HTML và JavaScript.

Các bước tải bản đồ trên trang web

Làm theo các bước dưới đây để tải bản đồ trên trang web của bạn -

Bước 1: Tạo trang HTML

Tạo một trang HTML cơ bản với các thẻ head và body như hình dưới đây -

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Bước 2: Tải API

Tải hoặc bao gồm API Google Maps bằng thẻ script như được hiển thị bên dưới -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Bước 3: Tạo vùng chứa

Để giữ bản đồ, chúng ta phải tạo một phần tử vùng chứa, nói chung thẻ <div> (một vùng chứa chung) được sử dụng cho mục đích này. Tạo phần tử vùng chứa và xác định kích thước của nó như được hiển thị bên dưới:

<div id = "sample" style = "width:900px; height:580px;"></div>

Bước 4: Tùy chọn bản đồ

Trước khi khởi tạo bản đồ, chúng ta phải tạo mapOptionsđối tượng (nó được tạo giống như một chữ) và đặt giá trị cho các biến khởi tạo bản đồ. Một bản đồ có ba tùy chọn chính, đó làcentre, zoomvà maptypeid.

centre- Theo thuộc tính này, chúng ta phải xác định vị trí mà chúng ta muốn căn giữa bản đồ. Để vượt qua vị trí, chúng tôi phải tạoLatLng đối tượng bằng cách chuyển vĩ độ và kinh độ của vị trí cần thiết cho hàm tạo.
zoom - Theo thuộc tính này, chúng ta phải chỉ định mức thu phóng của bản đồ.
maptypeid- Theo thuộc tính này, chúng ta phải chỉ định loại bản đồ mà chúng ta muốn. Sau đây là các loại bản đồ do Google cung cấp -
- ROADMAP (bản đồ 2D bình thường, mặc định)
- SATELLITE (bản đồ chụp ảnh)
- HYBRID (sự kết hợp của hai hoặc nhiều loại khác)
- TERRAIN (bản đồ có núi, sông, v.v.)

Trong một chức năng, hãy nói, loadMap(), tạo đối tượng mapOptions và đặt các giá trị cần thiết cho center, zoom và mapTypeId như hình dưới đây.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Bước 5: Tạo đối tượng bản đồ

Bạn có thể tạo bản đồ bằng cách khởi tạo lớp JavaScript có tên Map. Trong khi khởi tạo lớp này, bạn phải chuyển một vùng chứa HTML để giữ bản đồ và các tùy chọn bản đồ cho bản đồ được yêu cầu. Tạo một đối tượng bản đồ như hình dưới đây.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Bước 6: Tải bản đồ

Cuối cùng tải bản đồ bằng cách gọi phương thức loadMap () hoặc bằng cách thêm trình nghe DOM.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Thí dụ

Ví dụ sau đây cho thấy cách tải lộ trình của thành phố có tên Vishakhapatnam với giá trị thu phóng là 12.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Nó tạo ra kết quả sau: