NTM Solutions

Thứ Tư, 24 tháng 8, 2016

LẬP TRÌNH GOOGLE MAPS API – BÀI 3 XỬ LÝ SỰ KIỆN

1 - Click vào điểm đánh dấu để ZOOM

Tôi sử dụng lại đoạn code hiển thị điểm đánh dấu (Marker) ở chương trước.
Bây giờ cái chúng ta muốn làm là khi click chuột vào điểm đánh dấu bản đồ sẽ phóng to ra.
Đây là phần code thêm vào hàm initialize()

google.maps.event.addListener(marker,'click',function() {
  map.setZoom(
9);
  map.setCenter(marker.getPosition());
 
 });

2 - Quay về điểm đánh dấu

Chúng ta sẽ lập trình sao cho sau 3 giây kể từ khi bản đồ bị thay đổi vị trí sẽ tự động quay về điểm đánh dấu (trọng tâm).
google.maps.event.addListener(map,'center_changed',function() {
  window.setTimeout(function() {
    map.panTo(marker.getPosition());
  },3000);
});


3 - Hiện cửa sổ InfoWindow khi click chuột vào điểm đánh dấu

Thêm vào bên trong hàm initialize()
var infowindow = new google.maps.InfoWindow({
  content:"lophoclaptrinh.com"
  });

google.maps.event.addListener(marker, 'click'function() {
  infowindow.open(map,marker);
  });

4 - Thiết lập điểm đánh dấu + InfoWindow khi click lên bản đồ


Cửa số InfoWindow sẽ hiển thị tọa độ điểm click (vĩ độ,kinh độ)
google.maps.event.addListener(map, 'click'function(event) {
  placeMarker(event.latLng);
  });

function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() +
    '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}



Và sau đây là code HTML của 4 ví dụ trên:

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"> </script>
<script>
var myCenter = new google.maps.LatLng(10.789145, 106.735330);

function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
position:myCenter,
});
//1 - Click vào điểm đánh dấu ZOOM ra
marker.setMap(map);
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });
//2 - 03 giây qua về điểm đánh dấu
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});
//3 - Click chuột vào hiện cửa sổ POPUP InfoWindow
var infowindow = new google.maps.InfoWindow({
content:"lophocvitinh.com!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
//4 - tạo điểm đánh dấu + InfoWindow khi click vào bản đồ
google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
  });

function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() +
    '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>


</html>