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 inside the infowindow. The problem is when I close the infowindow and reopen it the updated content reverts back to the original. Below is my code:
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() {
document.getElementById('content').innerHTML = "Yo";
}
I basically want to create a default info window and allow the user to input their own text after they place the marke on the page...
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");
}