Info Windows

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var txt = "initial value"; //initial value of infowindow
var infowindow;
var contentString;

function initMap() {
    var uluru = {
        lat: -25.363,
        lng: 131.044
    };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
    });

//Setting initial value of your content string. Notice that the value are html attributes
    contentString = '<div>' + '<input id="myInput" type="text" value="' + txt + '" />' + '<input id="myInputBtn" type="button" value="save" onclick="save()"/>' + '</div>';
    
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: uluru,
        map: map,
        title: 'Uluru (Ayers Rock)'
    });
    
    marker.addListener('click', function() {
        infowindow.open(map, marker);
    });

}


//function called everytime you click the save button which will save the new value to the variable
function save() {
    txt = document.getElementById("myInput").value;
   contentString = '<div>' + '<input id="myInput" type="text" value="' + txt + '" />' + '<input id="myInputBtn" type="button" value="save" onclick="save()"/>' + '</div>';
        infowindow.setContent(contentString);
}