Code tìm kiếm và đánh dấu địa điểm trên google maps

Chủ đề: Javascript - Jquery    Người đăng: Hồ Ngọc Triển   
QR-Code: Code tìm kiếm và đánh dấu địa điểm trên google maps

L
N
L
N
Z
 
Google maps đã trở nên rất quen thuộc trong các ứng dụng từ điện thoại đến web,.... mọi thứ về vị trí đều trở nên đơn giản khi có google maps hỗ trợ.

1. Tìm, đánh dấu và lưu địa điểm

Trong thiết kế web, trường hợp bạn muốn tìm kiếm đánh dấu và hiển thị một địa điểm bất kỳ trên bản đồ, đoạn mã mình gửi trên đây sẽ giúp bạn thực hiện điều đó.

Bạn có thể:
  • Nhập tên địa điểm cần tìm
  • Click chuột đẻ đánh dấu địa điểm
  • Nhấn và kéo icon để di chuyển vị trí
  • Lăn chuột để thay đổi tỉ lệ

Trong code này, bạn cần chú ý những điểm sau:

1.1. Mã Javascript, có đoạn:
ele = 'maps_mapcanvas';
addEle = 'maps_address';
mapLat = 'maps_maplat';
mapLng = 'maps_maplng';
mapZ = 'maps_mapzoom';
mapArea = 'maps_maparea';
mapCenLat = 'maps_mapcenterlat';
mapCenLng = 'maps_mapcenterlng';
Giá trị của các biến này là ID của input trên form, bạn cần khai báo chính xác giá trị này tương ứng với giá trị của thuộc tính ID của các input.

1.2. Bạn có thể sửa lại địa điểm mặc định bằng cách sửa lại các giá trị tọa độ mặc định tại hàm initializeMap

Khi vị trí trên bản đồ thay đổi, thì đồng thời các giá trị ở input cũng thay đổi (Xem demo bên trên), sau khi chọn được vị trí thích hợp, bạn cần "Submit form" để lưu lại các giá trị này, sử dụng cho việc hiển thị địa điểm trên bản đồ.

Lưu ý: Bạn cần đặt mã Javascript ở cuối trang (trên thẻ </body>). Cần thêm Jquery. HTML mình có sử dụng bootstrap, nên nếu dự án của bạn không sử dụng bootstrap cần viết lại form cho phù hợp với giao diện.

2. Hiển thị địa điểm với các thông tin đã lưu

<script>
if (!$('#googleMapAPI').length) {
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.id = 'googleMapAPI';
	script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initializeMap';
	document.body.appendChild(script);
} else {
	initializeMap();
}

function initializeMap() {
	var ele = 'company-map';
	var map, marker, ca, cf, a, f, z;
	ca = parseFloat($('#' + ele).data('clat'));
	cf = parseFloat($('#' + ele).data('clng'));
	a = parseFloat($('#' + ele).data('lat'));
	f = parseFloat($('#' + ele).data('lng'));
	z = parseInt($('#' + ele).data('zoom'));
	map = new google.maps.Map(document.getElementById(ele), {
		zoom: z,
		center: {
			lat: ca,
			lng: cf
		}
	});
	marker = new google.maps.Marker({
		map: map,
		position: new google.maps.LatLng(a, f),
		draggable: false,
		animation: google.maps.Animation.DROP
	});
}
</script>

<div id="company-map" data-clat="{company_mapcenterlat}" data-clng="{company_mapcenterlng}" data-lat="{company_maplat}" data-lng="{company_maplng}" data-zoom="{company_mapzoom}"></div>

{company_mapcenterlat}
{company_mapcenterlng}
{company_maplat}
{company_maplng}
{company_mapzoom}

Truyền vào các tham số bạn đã lưu khi thực hiện tại phần 1.

var ele = 'company-map';

Là ID của thẻ div chứa các thuộc tính data-*

 
Thảo luận