change content in google maps infowindow

Question

I am trying to let the user change a infowindow in google maps - I am working with the code below. The document.getElementById("myInput").value keeps returing null. Any ideas or other direction would be appreciate.

var domElement = document.createElement('div');
                var input = document.createElement('input');
                input.id="myInput";
                input.type = "text";
                input.value ="post";
                
                document.body.appendChild(input);   
            
                postInfoWindow(marker, map, domElement);    
                post++;

                
    });
            function postInfoWindow(marker, map, description) {
                    marker.addListener('click', function() {
                    infowindow.setContent(description);
                    infowindow.open(map, this);
                });
            }
                
            google.maps.event.addListener(infowindow, 'closeclick', function() {  
            
            var txt=document.getElementById("myInput").value; // RETURNS NULL
            
            });  

}

Can you provide an [sscce](http://sscce.org/) of your sample code? You can use [jsfiddle](http://sscce.org/) or [jsbin](https://jsbin.com/). — Pagemag, Jun 22 '20 at 23:18
No. The code must be in the question itself. Please read on [ask] and [mcve] before requesting others to provide off-site resources when they can be part of the question. — MrUpsidown, Aug 09 '20 at 10:33

score 0 · Answer 1 · answered Jun 25 '20 at 02:51

It seems that you would like to change the value of your infowindow. Since the provided code is not complete, it is possible that the 'document.getElementById("myInput").value' returns null because it is not defined yet in the dom. To help you achieve your use case, I created a sample code that shows your use case. Please see the JavaScript below with inline comments for explanation:


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);
}

Hope this helps!

change content in google maps infowindow

1 Answers1