Google Maps - Hướng dẫn nhanh
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:
Trong chương trước, chúng ta đã thảo luận về cách tải một bản đồ cơ bản. Ở đây, chúng ta sẽ xem cách chọn một loại bản đồ cần thiết.
Các loại bản đồ
Google Maps cung cấp bốn loại bản đồ. Họ là -
ROADMAP- Đây là kiểu mặc định. Nếu bạn chưa chọn bất kỳ loại nào, điều này sẽ được hiển thị. Nó hiển thị chế độ xem phố của khu vực đã chọn.
SATELLITE - Đây là loại bản đồ hiển thị các hình ảnh vệ tinh của khu vực đã chọn.
HYBRID - Loại bản đồ này hiển thị các đường phố chính trên ảnh vệ tinh.
TERRAIN - Đây là loại bản đồ thể hiện địa hình và thảm thực vật
Cú pháp
Để chọn một trong những loại bản đồ này, bạn phải đề cập đến id loại bản đồ tương ứng trong các tùy chọn bản đồ như hình dưới đây -
var mapOptions = {
mapTypeId:google.maps.MapTypeId.Id of the required map type
};Lộ trình
Ví dụ sau cho thấy cách chọn bản đồ loại ROADMAP -
<!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:9,
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ó sẽ tạo ra kết quả sau:
Vệ tinh
Ví dụ sau cho thấy cách chọn bản đồ loại SATELLITE -
<!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:9,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
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ó sẽ tạo ra kết quả sau:
Hỗn hợp
Ví dụ sau đây cho thấy cách chọn bản đồ kiểu HYBRID -
<!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:9,
mapTypeId:google.maps.MapTypeId.Hybrid
};
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ó sẽ tạo ra kết quả sau:
Địa hình
Ví dụ sau đây cho thấy cách chọn bản đồ loại TERRAIN -
<!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:9,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
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ó sẽ tạo ra kết quả sau:
Tăng / Giảm giá trị thu phóng
Bạn có thể tăng hoặc giảm giá trị thu phóng của bản đồ bằng cách sửa đổi giá trị của zoom trong các tùy chọn bản đồ.
Cú pháp
Chúng tôi có thể tăng hoặc giảm giá trị thu phóng của bản đồ bằng cách sử dụng tùy chọn thu phóng. Dưới đây là cú pháp để thay đổi giá trị thu phóng của bản đồ hiện tại.
var mapOptions = {
zoom:required zoom value
};Ví dụ: Zoom 6
Đoạn mã sau sẽ hiển thị lộ trình của thành phố Vishakhapatnam với giá trị thu phóng là 6.
<!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:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:587px; height:400px;"></div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Ví dụ: Thu phóng 10
Đoạn mã sau sẽ hiển thị lộ trình của thành phố Vishakhapatnam với giá trị thu phóng là 10.
<!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:10,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:587px; height:400px;"></div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Theo mặc định, tên thành phố và tên tùy chọn được cung cấp trên bản đồ sẽ bằng tiếng Anh. Nếu được yêu cầu, chúng tôi cũng có thể hiển thị thông tin đó bằng các ngôn ngữ khác. Quá trình này được gọi làlocalization. Trong chương này, chúng ta sẽ học cách khoanh vùng bản đồ.
Bản địa hóa bản đồ
Bạn có thể tùy chỉnh (bản địa hóa) ngôn ngữ của bản đồ bằng cách chỉ định tùy chọn ngôn ngữ trong URL như hình dưới đây.
<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>Thí dụ
Đây là một ví dụ cho thấy cách bản địa hóa GoogleMaps. Ở đây bạn có thể thấy một lộ trình của Trung Quốc được bản địa hóa sang ngôn ngữ Trung Quốc.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(32.870360, 101.645508),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Đầu ra
Nó sẽ tạo ra kết quả sau:
Google Maps cung cấp Giao diện người dùng với nhiều điều khiển khác nhau để cho phép người dùng tương tác với bản đồ. Chúng tôi có thể thêm, tùy chỉnh và tắt các điều khiển này.
Kiểm soát mặc định
Đây là danh sách các điều khiển mặc định do Google Maps cung cấp -
Zoom- Để tăng và giảm mức thu phóng của bản đồ, theo mặc định, chúng ta sẽ có một thanh trượt với các nút + và -. Thanh trượt này sẽ nằm ở góc bên tay trái của bản đồ.
Pan - Ngay phía trên thanh trượt thu phóng, sẽ có một điều khiển xoay để quét bản đồ.
Map Type- Bạn có thể xác định vị trí điều khiển này ở góc trên cùng bên phải của bản đồ. Nó cung cấp các tùy chọn loại bản đồ như Vệ tinh, Lộ trình và Địa hình. Người dùng có thể chọn bất kỳ bản đồ nào trong số này.
Street view- Giữa biểu tượng pan và thanh trượt thu phóng, chúng ta có biểu tượng người hình mắc áo. Người dùng có thể kéo biểu tượng này và đặt tại một vị trí cụ thể để xem đường phố.
Thí dụ
Dưới đây là một ví dụ mà bạn có thể quan sát các điều khiển giao diện người dùng mặc định do Google Maps cung cấp -
Tắt các điều khiển mặc định của giao diện người dùng
Chúng tôi có thể tắt các điều khiển giao diện người dùng mặc định do Google Maps cung cấp chỉ bằng cách disableDefaultUI giá trị true trong các tùy chọn bản đồ.
Thí dụ
Ví dụ sau đây cho thấy cách tắt các điều khiển giao diện người dùng mặc định do Google Maps cung cấp.
<!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:5,
mapTypeId:google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Bật / Tắt tất cả các điều khiển
Ngoài các điều khiển mặc định này, Google Maps cũng cung cấp thêm ba điều khiển khác như được liệt kê bên dưới.
Scale- Điều khiển tỷ lệ hiển thị một phần tử tỷ lệ bản đồ. Kiểm soát này không được bật theo mặc định.
Rotate- Điều khiển Xoay có chứa một biểu tượng hình tròn nhỏ cho phép bạn xoay bản đồ có chứa hình ảnh xiên. Điều khiển này xuất hiện theo mặc định ở góc trên cùng bên trái của bản đồ. (Xem Hình ảnh 45 ° để biết thêm thông tin.)
Overview- Để tăng và giảm mức thu phóng của bản đồ, chúng tôi có một thanh trượt với các nút + và - theo mặc định. Thanh trượt này nằm ở góc trái của bản đồ.
Trong các tùy chọn bản đồ, chúng tôi có thể bật và tắt bất kỳ điều khiển nào do Google Maps cung cấp như hình dưới đây -
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}Thí dụ
Đoạn mã sau đây cho biết cách bật tất cả các điều khiển:
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Tùy chọn điều khiển
Chúng tôi có thể thay đổi giao diện của các điều khiển Google Maps bằng các tùy chọn điều khiển của nó. Ví dụ, điều khiển thu phóng có thể được thu nhỏ hoặc phóng to kích thước. Giao diện điều khiển MapType có thể được thay đổi thành thanh ngang hoặc menu thả xuống. Dưới đây là danh sách các tùy chọn Điều khiển cho các điều khiển Thu phóng và MapType.
| Sr.No. | Tên kiểm soát | Tùy chọn điều khiển |
|---|---|---|
| 1 | Kiểm soát thu phóng |
|
| 2 | Kiểm soát MapType |
|
Thí dụ
Ví dụ sau minh họa cách sử dụng các tùy chọn điều khiển:
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau:
Kiểm soát vị trí
Bạn có thể thay đổi vị trí của các điều khiển bằng cách thêm dòng sau vào các tùy chọn điều khiển.
position:google.maps.ControlPosition.Desired_Position,Đây là danh sách các vị trí khả dụng nơi có thể đặt điều khiển trên bản đồ -
- TOP_CENTER
- TOP_LEFT
- TOP_RIGHT
- LEFT_TOP
- RIGHT_TOP
- LEFT_CENTER
- RIGHT_CENTER
- LEFT_BOTTOM
- RIGHT_BOTTOM
- BOTTOM_CENTER
- BOTTOM_LEFT
- BOTTOM_RIGHT
Thí dụ
Ví dụ sau đây cho thấy cách đặt điều khiển MapTypeid ở tâm trên cùng của bản đồ và cách đặt điều khiển thu phóng ở tâm dưới cùng của bản đồ.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position:google.maps.ControlPosition.BOTTOM_CENTER
}
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau:
Chúng ta có thể vẽ các đối tượng trên bản đồ và liên kết chúng với một vĩ độ và kinh độ mong muốn. Chúng được gọi là lớp phủ. Google Maps cung cấp các lớp phủ khác nhau như được hiển thị bên dưới.
- Markers
- Polylines
- Polygons
- Hình tròn và hình chữ nhật
- Cửa sổ thông tin
- Symbols
Để đánh dấu một vị trí trên bản đồ, Google Maps cung cấp markers. Những điểm đánh dấu này sử dụng một ký hiệu tiêu chuẩn và những ký hiệu này có thể được tùy chỉnh. Chương này giải thích cách thêm điểm đánh dấu và cách tùy chỉnh, tạo hoạt ảnh và xóa chúng.
Thêm một điểm đánh dấu đơn giản
Bạn có thể thêm một điểm đánh dấu đơn giản vào bản đồ tại một vị trí mong muốn bằng cách khởi tạo lớp điểm đánh dấu và chỉ định vị trí sẽ được đánh dấu bằng cách sử dụng latlng, như được hiển thị bên dưới.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(19.373341, 78.662109),
map: map,
});Thí dụ
Đoạn mã sau đặt điểm đánh dấu thành phố Hyderabad (Ấn Độ).
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(19.373341, 78.662109),
zoom:7
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.088291, 78.442383),
map: map,
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau:
Tạo hoạt ảnh cho Marker
Sau khi thêm một điểm đánh dấu vào bản đồ, bạn có thể đi xa hơn và thêm hình ảnh động vào nó, chẳng hạn như bounce và drop. Đoạn mã sau cho biết cách thêm hoạt ảnh trả lại và thả vào điểm đánh dấu.
//To make the marker bounce`
animation:google.maps.Animation.BOUNCE
//To make the marker drop
animation:google.maps.Animation.DropThí dụ
Đoạn mã sau đặt điểm đánh dấu trên thành phố Hyderabad với hiệu ứng hoạt ảnh được thêm vào:
<!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.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
animation:google.maps.Animation.Drop
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau:
Tùy chỉnh điểm đánh dấu
Bạn có thể sử dụng các biểu tượng của riêng mình thay vì biểu tượng mặc định do Google Maps cung cấp. Chỉ cần đặt biểu tượng làicon:'ICON PATH'. Và bạn có thể làm cho biểu tượng này có thể kéo được bằng cách cài đặtdraggable:true.
Thí dụ
Ví dụ sau đây cho thấy cách tùy chỉnh điểm đánh dấu thành một biểu tượng mong muốn -
<!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.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
marker.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau:
Xóa điểm đánh dấu
Bạn có thể xóa điểm đánh dấu hiện có bằng cách thiết lập điểm đánh dấu thành rỗng bằng cách sử dụng marker.setMap() phương pháp.
Thí dụ
Ví dụ sau đây cho thấy cách xóa điểm đánh dấu khỏi bản đồ -
<!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.377631, 78.478603),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.377631, 78.478603),
map: map,
animation:google.maps.Animation.Drop
});
marker.setMap(null);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau:
Trong chương trước, chúng ta đã học cách sử dụng các điểm đánh dấu trong Google Maps. Cùng với các điểm đánh dấu, chúng ta cũng có thể thêm các hình dạng khác nhau như hình tròn, đa giác, hình chữ nhật, đường đa giác, v.v. Chương này giải thích cách sử dụng các hình được cung cấp bởi Google Maps.
Polylines
Các đường đa giác, do Google Maps cung cấp, rất hữu ích để theo dõi các con đường khác nhau. Bạn có thể thêm polylines vào bản đồ bằng cách khởi tạo lớpgoogle.maps.Polyline. Trong khi khởi tạo lớp này, chúng ta phải xác định các giá trị cần thiết của các thuộc tính của một đường đa tuyến như StrokeColor, StokeOpacity và strokeWeight.
Chúng ta có thể thêm một polyline vào bản đồ bằng cách chuyển đối tượng của nó vào phương thức setMap(MapObject). Chúng ta có thể xóa polyline bằng cách chuyển một giá trị null vào phương thức SetMap ().
Thí dụ
Ví dụ sau đây cho thấy một đường polyline đánh dấu con đường giữa các thành phố Delhi, London, New York và Bắc Kinh.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:3,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var tourplan = new google.maps.Polyline({
path:[
new google.maps.LatLng(28.613939, 77.209021),
new google.maps.LatLng(51.507351, -0.127758),
new google.maps.LatLng(40.712784, -74.005941),
new google.maps.LatLng(28.213545, 94.868713)
],
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2
});
tourplan.setMap(map);
//to remove plylines
//tourplan.setmap(null);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Đa giác
Đa giác được sử dụng để đánh dấu một khu vực địa lý cụ thể của một tiểu bang hoặc một quốc gia. Bạn có thể tạo một đa giác mong muốn bằng cách khởi tạo lớpgoogle.maps.Polygon. Trong khi khởi tạo, chúng ta phải chỉ định các giá trị mong muốn cho các thuộc tính của Polygon như path, strokeColor, strokeOapacity, fillColor, fillOapacity, v.v.
Thí dụ
Ví dụ sau đây cho thấy cách vẽ một đa giác để làm nổi bật các thành phố Hyderabad, Nagpur và Aurangabad.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip = [
new google.maps.LatLng(17.385044, 78.486671),
new google.maps.LatLng(19.696888, 75.322451),
new google.maps.LatLng(21.056296, 79.057803),
new google.maps.LatLng(17.385044, 78.486671)
];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Hình chữ nhật
Chúng ta có thể sử dụng hình chữ nhật để làm nổi bật khu vực địa lý của một vùng cụ thể hoặc một tiểu bang bằng cách sử dụng hình hộp chữ nhật. Chúng ta có thể có một hình chữ nhật trên bản đồ bằng cách khởi tạo lớpgoogle.maps.Rectangle. Trong khi khởi tạo, chúng ta phải chỉ định các giá trị mong muốn cho các thuộc tính của hình chữ nhật như path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, v.v.
Thí dụ
Ví dụ sau đây cho thấy cách đánh dấu một khu vực cụ thể trên bản đồ bằng hình chữ nhật -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myrectangle = new google.maps.Rectangle({
strokeColor:"#0000FF",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4,
map:map,
bounds:new google.maps.LatLngBounds(
new google.maps.LatLng(17.342761, 78.552432),
new google.maps.LatLng(16.396553, 80.727725)
)
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Điều này cung cấp cho bạn kết quả sau:
Vòng kết nối
Cũng giống như hình chữ nhật, chúng ta có thể sử dụng Vòng kết nối để đánh dấu khu vực địa lý của một vùng hoặc một tiểu bang cụ thể bằng cách sử dụng hình tròn bằng cách khởi tạo lớp google.maps.Circle. Trong khi khởi tạo, chúng ta phải chỉ định các giá trị mong muốn cho các thuộc tính của vòng tròn như path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, v.v.
Thí dụ
Ví dụ sau đây cho thấy cách làm nổi bật khu vực xung quanh New Delhi bằng hình tròn:
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap(){
var mapProp = {
center:new google.maps.LatLng(28.613939,77.209021),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:new google.maps.LatLng(28.613939,77.209021),
radius:150600,
strokeColor:"#B40404",
strokeOpacity:0.6,
strokeWeight:2,
fillColor:"#B40404",
fillOpacity:0.6
});
myCity.setMap(map);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Ngoài các điểm đánh dấu, đa giác, đường đa giác và các hình dạng hình học khác, chúng tôi cũng có thể vẽ Cửa sổ thông tin trên bản đồ. Chương này giải thích cách sử dụng Cửa sổ Thông tin.
Thêm một cửa sổ
Cửa sổ Thông tin được sử dụng để thêm bất kỳ loại thông tin nào vào bản đồ. Ví dụ: nếu bạn muốn cung cấp thông tin về một vị trí trên bản đồ, bạn có thể sử dụng cửa sổ thông tin. Thông thường, cửa sổ thông tin được gắn với một điểm đánh dấu. Bạn có thể đính kèm một cửa sổ thông tin bằng cách khởi tạogoogle.maps.InfoWindowlớp học. Nó có các thuộc tính sau:
Content - Bạn có thể chuyển nội dung của mình ở định dạng Chuỗi bằng cách sử dụng tùy chọn này.
position - Bạn có thể chọn vị trí của cửa sổ thông tin bằng cách sử dụng tùy chọn này.
maxWidth- Theo mặc định, chiều rộng của cửa sổ thông tin sẽ được kéo dài cho đến khi văn bản được bao bọc. Bằng cách chỉ định maxWidth, chúng ta có thể hạn chế kích thước của cửa sổ thông tin theo chiều ngang.
Thí dụ
Ví dụ sau đây cho thấy cách đặt điểm đánh dấu và chỉ định một cửa sổ thông tin phía trên nó -
<!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.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.433053, 78.412172),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
});
infowindow.open(map,marker);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Ngoài các điểm đánh dấu, đa giác, đường đa giác và các hình dạng hình học khác, chúng tôi cũng có thể thêm hình ảnh vectơ được xác định trước (ký hiệu) trên bản đồ. Chương này giải thích cách sử dụng các ký hiệu do Google Maps cung cấp.
Thêm một biểu tượng
Google cung cấp nhiều hình ảnh dựa trên vectơ (biểu tượng) có thể được sử dụng trên một điểm đánh dấu hoặc một đường đa giác. Cũng giống như các lớp phủ khác, để vẽ các ký hiệu được xác định trước này trên bản đồ, chúng ta phải khởi tạo các lớp tương ứng của chúng. Dưới đây là danh sách các ký hiệu được xác định trước do Google cung cấp và tên lớp của chúng -
Circle - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE
Các biểu tượng này có các thuộc tính sau - path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity và strokeWeight.
Thí dụ
Ví dụ sau minh họa cách vẽ các ký hiệu được xác định trước trên Google Map.
<!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.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
draggable:true,
map: map,
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau:
Hoạt hình biểu tượng
Cũng giống như các điểm đánh dấu, bạn cũng có thể thêm các hình ảnh động như trả lại và thả vào các biểu tượng.
Thí dụ
Ví dụ sau đây cho thấy cách sử dụng một biểu tượng làm điểm đánh dấu trên bản đồ và thêm hoạt ảnh vào nó -
<!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.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
animation:google.maps.Animation.DROP,
draggable:true,
map: map
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau:
Chương trình JavaScript của Google Maps có thể phản hồi các sự kiện khác nhau do người dùng tạo. Chương này cung cấp các ví dụ minh họa cách thực hiện xử lý sự kiện khi làm việc với Google Maps.
Thêm trình xử lý sự kiện
Bạn có thể thêm người nghe sự kiện bằng phương pháp addListener(). Nó chấp nhận các tham số như tên đối tượng mà chúng ta muốn thêm trình nghe, tên của sự kiện và sự kiện xử lý.
Thí dụ
Ví dụ sau đây cho thấy cách thêm trình xử lý sự kiện vào đối tượng đánh dấu. Chương trình tăng giá trị thu phóng của bản đồ lên 5 mỗi khi chúng ta nhấp đúp vào điểm đánh dấu.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
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,
title:'Click to zoom'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau:
Mở cửa sổ thông tin khi nhấp chuột
Đoạn mã sau sẽ mở ra một cửa sổ thông tin khi nhấp vào điểm đánh dấu -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau:
Xóa trình nghe
Bạn có thể xóa một người nghe hiện có bằng phương pháp removeListener(). Phương thức này chấp nhận đối tượng nghe, do đó chúng ta phải gán trình nghe cho một biến và chuyển nó cho phương thức này.
Thí dụ
Đoạn mã sau đây cho biết cách xóa một trình nghe -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
var myListener = google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.removeListener(myListener);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Nó tạo ra kết quả sau: