入力フィールドに地図座標を表示

Question

私は2つの入力フィールドとその下にマップを持っていますが、私はどこでも地図をクリックすると経度と緯度を表示したいのですが、どうすればいいですか？ここに私のコードは次のとおりです。

#map { 
 
    width: 100%; 
 
    height: 250px; 
 
}

<div class="form-group"> 
 
    <label for="exampleInputEmail1">Latitude</label> 
 
    <input placeholder="Latitude"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="exampleInputEmail1">Longitude</label> 
 
    <input placeholder="Longitude"> 
 
    </div> 
 

 
<div id="map"></div> 
 
<script> 
 
    function myMap() { 
 
    var mapOptions = { 
 
     center: new google.maps.LatLng(51.5, -0.12), 
 
     zoom: 10, 
 
     mapTypeId: google.maps.MapTypeId.HYBRID 
 
    } 
 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    } 
 
</script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Answer 1

あなたは地図上のイベントリスナーをクリックすることができます。

は以下

なお

google.maps.event.addListener(map, 'click', function(event) { 

    alert(event.latLng); 

}); 

#map { 
 
    width: 100%; 
 
    height: 250px; 
 
}

<div class="form-group"> 
 
    <label for="exampleInputEmail1">Latitude</label> 
 
    <input placeholder="Latitude" id="lat"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="exampleInputEmail1">Longitude</label> 
 
    <input placeholder="Longitude" id="lang"> 
 
    </div> 
 

 
<div id="map"></div> 
 
<script> 
 
    function myMap() { 
 
    var mapOptions = { 
 
     center: new google.maps.LatLng(51.5, -0.12), 
 
     zoom: 10, 
 
     mapTypeId: google.maps.MapTypeId.HYBRID 
 
    } 
 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    
 
    google.maps.event.addListener(map, 'click', function(event) { 
 

 
    
 
    var myLatLng = event.latLng; 
 
    var lat = myLatLng.lat(); 
 
    var lng = myLatLng.lng(); 
 
     
 
     document.getElementById("lat").value = lat; 
 
     document.getElementById("lang").value = lng; 
 
    
 
}); 
 
    
 
    
 
    } 
 
    
 
    
 
</script> 
 
<script> 
 

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

 
<script> 
 
    
 
</script>

ためのコードです：あなたは、APIキーなしでGoogleマップを使用することはできません。アプリケーションは、90日間連続して1日あたり25,000コールに達するまで無料です。