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);
});
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);
});
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);
}
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>
Không có nhận xét nào:
Đăng nhận xét