Cơ bản Google Maps

Tạo bản đồ Google Maps cơ bản

Ví dụ này tạo bản đồ Google Maps với London, Anh làm trung tâm:

Mô hình

<!DOCTYPE html>
<html>
<body>
<h1>Đồ án đầu tiên của tôi trên Google Maps</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
  center: new google.maps.LatLng(51.508742, -0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>

Tiếp theo, chúng ta sẽ nghiên cứu từng bước về ví dụ trên.

hộp chứa bản đồ và kích thước

Bản đồ cần một phần tử HTML để lưu trữ bản đồ:

<div id="googleMap" style="width:100%;height:400px"></div>

cùng với đó là thiết lập kích thước bản đồ.

tạo một hàm để thiết lập thuộc tính bản đồ

function myMap() {
var mapProp = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

mapProp Biến định nghĩa các thuộc tính của bản đồ.

center Thuộc tính quy định vị trí trung tâm của bản đồ (sử dụng tọa độ vĩ độ và kinh độ).

zoom Thuộc tính quy định mức phóng to của bản đồ (thử phóng to bản đồ).

Xin xem dòng này:

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

Nó sử dụng các tham số truyền vào (mapProp) Tạo bản đồ mới trong phần tử <div> có id="googleMap".

Nhiều bản đồ

Ví dụ sau định nghĩa bốn loại bản đồ khác nhau của loại bản đồ:

Mô hình

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

API Key miễn phí của Google

Google cho phép các trang web gọi miễn phí bất kỳ Google API nào hàng ngàn lần mỗi ngày.

Vui lòng truy cập vào liên kết sau để biết cách lấy API key:

https://developers.google.com/maps/documentation/javascript/get-api-key

Google Maps cần phải trong khi tải API ở key Tìm trong các tham số này API mật khẩu:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>