JSを聞くgoogleマップの特定のポイントをクリック

Question

私は街の向こうに1000以上の街灯があり、それらはすべてMYSQLテーブルに保存されています。特定の障害のある街灯を記録するには、それらを表示させ、障害のある街灯をクリックして街灯の座標を取得する必要があります。

Googleマップの特定の点をマウスでクリックして聴く方法を教えてもらえますか？その点から経度と緯度の両方を取得するには？

事前に感謝します。

Answer 1

マップ上に表示し、その特定の街灯のクリックに反応するために、保存された場所をループし、すべてのライトのマーカーにマーカーを追加して、それらのマーカーにクリックイベントリスナーを追加できます。

ここでは、場所をループしてすべてのマーカーにイベントハンドラをアタッチする方法を示す2つのlatlonオブジェクトの配列を持つ例を示します。 [グーグル・マップからのクリックイベントの緯度と経度を取得]の

<div id="map" style="height:200px;"></div> 
 
<script> 
 
     var map; 
 
     var lightLocations = [ 
 
      {lat: -34.397, lng: 150.644}, 
 
      {lat: -34.350, lng: 150.704} 
 
     ]; 
 

 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: -34.397, lng: 150.644}, 
 
      zoom: 10 
 
     }); 
 
     var markerClicked = function(event) { 
 
      // here's where you do what you need to do with the info 
 
      alert(this.position); 
 
     } 
 
     lightLocations.forEach(function(element) { 
 
      var marker = new google.maps.Marker({ 
 
       position: element, 
 
       map: map 
 
      }); 
 
      marker.addListener('click', markerClicked); 
 
     }); 
 

 
     } 
 
    </script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" 
 
    async defer></script>