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...
An InfoWindow can be placed on a map at a particular position or above a marker, depending on what is specified in the options. Unless auto-pan is disabled, an InfoWindow will pan the map to make itself visible when it is opened. After constructing an InfoWindow, you must call open to display it on the map.
Open an info window To make the info window visible, you must call the open() method on the InfoWindow , passing an InfoWindowOpenOptions object literal specifying the following options: map specifies the map or Street View panorama on which to open.
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");
}
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");
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With