marker should point to location and if user drags the marker the location should be in textbox

Question

I am new to google maps. I have gone through many posts but didnt find what I wanted. I want to achieve this: improve-my-city

But I am only able to get user location and drag marker. I want the marker to move to the position entered on the map on button click vice versa when a user drags the marker the address should be in the textbox. Also my infowindow does not show.

As I am working with Asp.net my html page is different and my map shows in iframe on aspx page. Textbox and button is in .aspx page

<div id="map"></div>
<script>

    function initMap() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition,  showError);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "Location information is unavailable."
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "The request to get user location timed  out."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "An unknown error occurred."
                    break;
            }
        }
        updateMarkerPosition(latlon);
         geocodePosition(latlon);
    }

    function showPosition(position) {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        latlon = new google.maps.LatLng(lat, lon)
        mapholder = document.getElementById('map')

        var myOptions = {
            center: latlon,
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            navigationControlOptions:
            { style: google.maps.NavigationControlStyle.SMALL }
        }

        var contentString = 'Drag red marker <br/> to improve geo-location';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        infowindow.open(map, marker);

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker = new google.maps.Marker({
            position: latlon,
            map: map,
            title: 'Report refers to this location',
            draggable: true
        });



        // Add dragging event listeners.
        google.maps.event.addListener(marker, 'dragstart', function () {
            updateMarkerAddress('Dragging...');
        });

        google.maps.event.addListener(marker, 'drag', function () {
            updateMarkerStatus('Dragging...');
            updateMarkerPosition(marker.getPosition());
        });

        google.maps.event.addListener(marker, 'dragend', function () {
            updateMarkerStatus('Drag ended');
            geocodePosition(marker.getPosition());
        });


    }


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

Answer 1

This sample show the address of the position of the marker when drag end.

This should be enough to understand how the reverse geocoding work (get the address from the coordinates of a point)

 <script type="text/javascript">
    var geocoder;

    function initMap() {
        geocoder = new google.maps.Geocoder();
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition,  showError);
        } else {
            x=document.getElementById("msg");
            x.innerHTML = "Geolocation is not supported by this browser.";
        }

        function showError(error) {
            x=document.getElementById("msg");
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "Location information is unavailable."
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "The request to get user location timed  out."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "An unknown error occurred."
                    break;
            }
        }



        //updateMarkerPosition(latlon);
        //geocodePosition(latlon);
    }

     function geocodePosition(pos) {
        x=document.getElementById("msg");
        geocoder.geocode({'latLng': pos}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
               x.innerHTML = results[0].formatted_address;
              }
          } else {
            x.innerHTML = "Geocoder non possibile";
          }  
        });

    }

    function showPosition(position) {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        latlon = new google.maps.LatLng(lat, lon)
        mapholder = document.getElementById('map')

        var myOptions = {
            center: latlon,
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            navigationControlOptions:
            { style: google.maps.NavigationControlStyle.SMALL }
        }

        var contentString = 'Drag red marker <br/> to improve geo-location';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        infowindow.open(map, marker);

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker = new google.maps.Marker({
            position: latlon,
            map: map,
            title: 'Report refers to this location',
            draggable: true
        });


        // Add dragging event listeners.
        google.maps.event.addListener(marker, 'dragstart', function (evt) {
             x=document.getElementById("msg");
             x.innerHTML = '<p>Dragging ... Marker dropped: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
        });

        google.maps.event.addListener(marker, 'drag', function (evt) {
             x=document.getElementById("msg");
             x.innerHTML = '<p>Dragging ... again .... Marker position: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
        });

        google.maps.event.addListener(marker, 'dragend', function (evt) {
            x=document.getElementById("msg");
            x.innerHTML =  '<p>Drag .. ended ... Marker dropped: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
            geocodePosition(marker.getPosition());
        });

    }


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