Google Map API : Event


Event trong bản V3 tương tự như bản V2.
1 ) Chúng ta thử với bản code sau :

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(moveToDarwin, 3000);
  });
  
  var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map,
      title:"Hello World!"
  });
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
  });
}
  
function moveToDarwin() {
  var darwin = new google.maps.LatLng(-12.461334, 130.841904);
  map.setCenter(darwin);
}

Code trên chỉ đơn giản là : khi click vào điểm marker trên bản đồ , thì sẽ zoom=8 , và sau đó 3 giây thì chuyển tới điểm darwin .

a) Add marker :

var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map,
      title:"Hello World!"
  });

b) Bật sự kiện click thì zoom:

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

c) Bật sự kiện zoom_change :

google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(moveToDarwin, 3000);
  });

d) Hàm moveToDarwin :

function moveToDarwin() {
  var darwin = new google.maps.LatLng(-12.461334, 130.841904);
  map.setCenter(darwin);
}

2 ) Thử sự kiện click :

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}
  
function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  map.setCenter(location);
}

Biến : event.latLng để ghi nhận giá trị click .

3 ) Code Info Window :

function attachSecretMessage(marker, number) {
  var message = ["This","is","the","secret","message"];
  var infowindow = new google.maps.InfoWindow(
      { content: message[number],
        size: new google.maps.Size(50,50)
      });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

4 ) Lấy properties từ map :
a ) map.getBounds()
b ) map.getCenter()
c ) map.getZoom()
d ) map.setCenter()
… và còn nhiều nữa ở đây :

http://code.google.com/apis/maps/documentation/v3/reference.html
Advertisements
%d bloggers like this: