Thêm điểm đánh dấu vào Google Map khi nhấp chuột

Đáng ngạc nhiên, tôi đang đấu tranh để tìm một ví dụ rất đơn giản về cách thêm (các) điểm đánh dấu vào Bản đồ Google khi người dùng nhấp chuột trái vào bản đồ.

Tôi đã xem xét xung quanh trong vài giờ qua và tham khảo tài liệu API của Google Maps và sẽ đánh giá cao một số trợ giúp!

Sau nhiều nghiên cứu sâu hơn, tôi đã tìm ra giải pháp.

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location, 
        map: map
    });
}

Trong năm 2017, giải pháp là:

map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
});

function placeMarker(position, map) {
    var marker = new google.maps.Marker({
        position: position,
        map: map
    });
    map.panTo(position);
}

Đây thực sự là một tính năng được lập thành văn bản và có thể tìm thấy ở đây

// This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });

  function placeMarker(position, map) {
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });  
    map.panTo(position);
  }

@Chaibi Alaa, Để người dùng chỉ có thể thêm một lần và di chuyển điểm đánh dấu; Bạn có thể đặt điểm đánh dấu vào lần nhấp đầu tiên và sau đó chỉ cần thay đổi vị trí trong các lần nhấp tiếp theo.

var marker;

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});


function placeMarker(location) {

    if (marker == null)
    {
          marker = new google.maps.Marker({
             position: location,
             map: map
          }); 
    } 
    else 
    {
        marker.setPosition(location); 
    } 
}

Hiện tại, phương pháp để thêm trình nghe vào bản đồ sẽ là

map.addListener('click', function(e) {
    placeMarker(e.latLng, map);
});

Và không

google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
});

Tài liệu tham khảo

1. Đầu tiên khai báo điểm đánh dấu:

this.marker = new google.maps.Marker({
   position: new google.maps.LatLng(12.924640523603115,77.61965398949724),
   map: map
});

2. Gọi phương thức để vẽ điểm đánh dấu khi nhấp chuột:

this.placeMarker(coordinates, this.map);

3. Xác định chức năng:

placeMarker(location, map) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    this.markersArray.push(marker);
}