Google Map update form text value

1

In the following code everything is working as expected except I am trying to update the value of the latitude and longitude textboxes in the form when clicking on the map. The marker is locating correctly but the value in the text never gets updated. As you can see I’ve tried a few different approaches and none of them are working. Thanks for any feedback.

<div>
    <div class="sForm">
        <form action="" method="POST">
            <input type="text" placeholder="Project Name" name="projName">
            <input type="text" placeholder="Address Line 1" name="add1">
            <input type="text" placeholder="Address Line 2" name="add2">
            <input type="text" placeholder="City" name="city">
            <input type="text" placeholder="State" name="state">
            <input type="text" placeholder="Zip Code" name="zip">
            <input type="text" placeholder="Project Number" name="projNumber">
            <input type="text" placeholder="Project Engineer" name="projEng">
            <input type="submit" value="Update">
        </form>
        <form action="" method="POST">
            <input type="text" placeholder="Latitude Value" name="lat">
            <input type="text" placeholder="Longitude Value" name="lng">
            <input type="submit" value="Get Seismic Values">
        </form>
    </div>
    <div class="map" id="map">

    </div>
</div>

<script>
    function initMap() {
        var myLatlng = {lat: 33.43007, lng: -111.956};

        var map = new google.maps.Map(document.getElementById("map"), {
            center: myLatlng,
            zoom:16
        });
    
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Click to Locate'
        });

        map.addListener('click', function(e) {
            map.setZoom(16);
            marker.setPosition(e.latLng);
            document.getElementById("lat").setAttribute("value", e.latLng('lat'));
            document.getElementById("lat").value = 18.0005;
            document.getElementById("lat").innerHTML = 33.0006;
         });
    }

</script>
2

solved it myself. I needed to add an id to the form input and use that for reference. The line now reads as follows:

            document.getElementById("latitude").value = e.latLng.lat();
            document.getElementById("longitude").value = e.latLng.lng();