change content infowindow maps v3

Question

I am trying to make it possible to change the content that shows up inside a DIV that is the content of an infowindow. I have been able to change the content from Hello to YO in

Answer 1

you have to set the content through setContentHTML method

var infowindow ;
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    if (event.type == google.maps.drawing.OverlayType.MARKER) {
        //event.overlay.setTitle("Hello");
        infowindow = new google.maps.InfoWindow({
            content: '<div id="content" onmouseover="updateContent()">Hello</div>',
            maxWidth: 10
        });
        google.maps.event.addListener(event.overlay,'click',function()
        infowindow.open(map,event.overlay);
     });
}});

function updateContent(){
    infowindow.setContent("YO");
} 

Answer 2

Best is to create the content of the InfoWindow not by using a HTML string, but with a DOM Element. So replace:

new google.maps.InfoWindow({
        content: '<div id="content" onmouseover="updateContent()">Hello</div>'
    });

with:

var domElement = document.createElement('div');
domElement.innerHTML = '<div id="content" onmouseover="updateContent()">Hello</div>';
new google.maps.InfoWindow({
        content: domElement
    });

Now you can easily access the div with document.getElementById("content"); and do all the DOM manipulation you want.

Answer 3

I found the above accepted answer didn't work as I had to use setContent() as follows:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
    if (event.type == google.maps.drawing.OverlayType.MARKER) {
        //event.overlay.setTitle("Hello");
        var infowindow = new google.maps.InfoWindow({
            content: '<div id="content" onmouseover="updateContent()">Hello</div>',
            maxWidth: 10
        });
        google.maps.event.addListener(event.overlay, 'click', function () {
            infowindow.open(map, event.overlay);
        });
    }
});
function updateContent() {
    infowindow.setContent("Yo");
}