クリック時にGoogleマップにマーカーを追加

Question 1

ユーザーが地図を左クリックしたときにマーカーをGoogleマップに追加する方法の非常に簡単な例を見つけるのに、驚くほど苦労しています。

私は過去数時間見回して、Google Maps APIのドキュメントを調べました、そしていくつかの助けをいただければ幸いです！

Question 2

さらに調査した結果、解決策を見つけることができました。

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

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

Question 3

2017年の解決策は次のとおりです。

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);
}

Question 4

これは実際には文書化された機能であり、ここで見つけることができます

// 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);
  }

Question 5

@Chaibi Alaa、ユーザーが1回だけ追加し、マーカーを移動できるようにするため。最初のクリックでマーカーを設定し、その後のクリックで位置を変更することができます。

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); 
    } 
}

Question 6

現在、リスナーをマップに追加する方法は次のようになります。

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

そしてではない

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

参照

Question 7

最初にマーカーを宣言します。

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

クリック時にマーカーをプロットするメソッドを呼び出します。

this.placeMarker(coordinates, this.map);

関数を定義します。

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