Đưa Google Map Vào Website

      43

Trước lúc bắt đầu, họ cần bao gồm key của Google Maps APIs dành cho developer. Cùng với một tài khoản Google bất kỳ, bạn cũng có thể dễ dàng đăng ký cho mình một key bằng liên kết sau.

Bạn đang xem: đưa google map vào website

Tất nhiên, với mỗi tài khoản miễn tổn phí thì các bạn sẽ bị số lượng giới hạn 25000 lần load bạn dạng đồ trong một ngày - rứa chắc là cũng quá đủ để bạn nghịch rồi nhỉ

*

*

Mình xin bắt đầu với một ví dụ dễ dàng và đơn giản nhất khi tích thích hợp Google maps vào web.

div id="map">div>script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer>script>Bạn có thể thêm một số trong những params như languages, region... Vào mang đến src ở chỗ này để xác minh ngôn ngữ, vùng địa lý,.. Mà chúng ta cần.

#map height: 100%;html, body height: 100%; margin: 0; padding: 0;Khởi tạo một google.maps.Map mới đơn giản dễ dàng nhất bởi như sau :

Xem test ở đây

Với ví dụ như trên đây thì bạn đã sở hữu thể tích hòa hợp Google bản đồ vào web của mình, chúng ta cũng có thể kéo tốt là zoom trên đó. Tuy nhiên, Google cung cấp cho các lập trình viên (ngay cả ở bạn dạng miễn phí) nhiều nhân kiệt rất tuyệt vời và hoàn hảo nhất mà chúng ta cần đọc thêm để hoàn toàn có thể sử dụng. Bạn gần như chỉ câu hỏi tùy chỉnh, biến đổi trong javascript nhưng thôi.

Bài viết này mình xin trình bày những phần theo mình là cơ bạn dạng và cũng hay chạm chán nhất chúng ta mà nên biết khi tích đúng theo Google map.

Marker

Marker dùng để xác định, khắc ghi một vị trí trên phiên bản đồ, bạn có thể đánh vệt một hoặc những điểm.

Sau khi khởi tạo nên một map, sống đây chúng ta sẽ khởi sản xuất một marker mới bởi google.maps.Marker ngay trong hàm initMap() :

*

Geolocation (geographic locaion)

Cho ta biết thông tin chi tiết của từng vị trí trên bạn dạng đồ.

Chỉ bắt buộc truyền tọa độ vào đối tượng người tiêu dùng google.maps.Geocoder, chúng ta sẽ tất cả có danh sách những điểm rất có thể thỏa mãn với tọa độ đó, thường xuyên thì vẫn là điểm trước tiên trong danh sách đó sẽ đúng đắn nhất.

Với mỗi điểm trên bạn dạng đồ, ta có các phương thức như formatted_address, geometry... để xem tin tức về tên, tọa độ, id ... Của điểm đó. Ở ví dụ tiếp sau đây mình đã kết phù hợp với google.maps.InfoWindow để in một vài thông tin của điểm đó trong một khung nhỏ dại trên phiên bản đồ :

" + "Address : " + results<0>.formatted_address + "" + "Latitude : " + results<0>.geometry.location.lat() + "" + "Longitude : " + results<0>.geometry.location.lng() + "
" ); // print infowindow in maps infowindow.open(map, marker); } else console.log("No results found"); } else console.log("Geocoder failed due to: " + status); } );}
*

Xem những ví dụ không giống ở đây

Sự khiếu nại click

Đây là phần rất thú vị mà Google đã hỗ trợ cho thiết kế viên khi thao tác với map. Ta bắt sự kiện click cho bản đồ bằng addListener. Với ví dụ bên dưới, khi bạn click vào một điểm bất kỳ trên bản đồ, thì khối hệ thống sẽ triển khai :

Xóa điểm lưu lại trước đó (nếu có).

Xem thêm: Thông Báo Hủy Hóa Đơn Điện Tử Mẫu 04 Theo Nđ 119, Hồ Sơ, Thủ Tục Hủy Hóa Đơn Điện Tử Chưa Sử Dụng

Đánh vết một điểm new với cửa sổ mô tả thông tin.

Bản đồ chuyển trung trọng điểm về địa điểm điểm bắt đầu được đánh dấu đó.

" + "Address : " + results<0>.formatted_address + "" + "Latitude : " + results<0>.geometry.location.lat() + "" + "Longitude : " + results<0>.geometry.location.lng() + "
" ); infowindow.open(map, marker); } else console.log("No results found"); } else console.log("Geocoder failed due to: " + status); } ); map.panTo(marker.position); // mix new point to center of bản đồ markers.push(marker); // showroom new marker khổng lồ markers array });}Trên đây bọn họ có khởi tạo ra một mảng markers nhằm lưu các marker được tạo nên sau từng lần bấm vào trên phiên bản đồ.

Bạn rất có thể xem một demo đơn giản dễ dàng ở đây

Place autocomplete

Chúng ta hoàn toàn có thể tiến hành kiếm tìm kiếm địa điểm ngẫu nhiên bằng tên. Các bạn gõ tên vị trí vào tìm kiếm box, sẽ sở hữu được danh sách các gợi ý, bạn chỉ việc chọn địa điểm nào đó, bản đồ sẽ di chuyển đến điểm bạn phải tìm. Mình vẫn trình bày sang 1 chút cách làm ở bên dưới.

Vì đấy là tính năng mang đến Place, nên để thực hiện nó chúng ta phải thêm param libraries=places vào src của script mặt view. Trong khi phải thêm một ô search kiếm cho bản đồ (ngay trên khu vực hiển thị map). View của mình hiện thời sẽ cầm cố này :

input id="pac-input" class="controls" type="text" placeholder="Enter a location">div id="map">div>script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places" async defer>script>Trong hàm javascript, ta sẽ tạo nên mới một đối tượng người tiêu dùng google.maps.places.Autocomplete với từ khóa kiếm tìm kiếm, tiếp đến sẽ bắt sự khiếu nại places_changed cho đối tượng người dùng đó và xử lý ví dụ :

var đầu vào = (document.getElementById("pac-input"));map.controls.push(input);var autocomplete = new google.maps.places.Autocomplete(input);autocomplete.bindTo("bounds", map);autocomplete.addListener("place_changed", function() // code for);Bạn có thể xem demo dễ dàng và đơn giản ở đây.

Place tìm kiếm box

Tính năng này cũng giúp ta tìm kiếm địa chỉ như autocomplete, tuy nhiên ngoài việc có thể tìm kiếm đúng chuẩn theo tên thì chúng ta cũng có thể tìm tìm một tập vừa lòng các địa chỉ thoả mã trường đoản cú khóa kiếm tìm kiếm. Bạn cũng có thể xem cụ thể ở đây

Ở đây bọn họ sẽ thao tác làm việc với google.maps.places.SearchBox.

allows users lớn perform a text-based geographic search, such as "pizza in New York" or "shoe stores near robson street"

Sau đây bạn có thể xem thử nghiệm của mình. Test này là tổng hợp tất cả những bản lĩnh mà mình đã đề cập làm việc trên.

Tham khảo

Hi vọng nội dung bài viết này đã giúp chúng ta có thể tự bản thân tích hòa hợp Google map cho trang web.

hotlive