vue and google map infowindow - google-maps

Question

I am using vue and google map, and I want a real time experience by updating the data displayed in the info window. I have tried following:
var infoStr =
'<table class="">'+
'<tbody>' +
'<tr>' +
'<td colspan="2">{{testInfo}}</td>' +
'</tr>' +
'</tbody>'+
'</table >';
var infowindow = new google.maps.InfoWindow({
content: infoStr
});
global.infoWindow = infowindow;
infowindow.open(map, marker);
The application displays {{testInfo}} like it was a string and is not bound. Is there anyway to bind data in the InfoWindow so I can bind it to Vue data?

Answer 1

Your problem is that when you put {{testInfo}} into the variable infoStr you are making it static, therefore it will only have value of {{testinfo}} at the time the infowindow is created.
As a workaround I suggest that you add id="info-win-1" attribute to your infowindow code.
var infoStr =
'<table class="">'+
'<tbody>' +
'<tr>' +
'<td id="info-win-1" colspan="2">{{testInfo}}</td>' +
'</tr>' +
'</tbody>'+
'</table >';
var infowindow = new google.maps.InfoWindow({
content: infoStr
});
That way you can dynamically change the content using document.getElementById("info-win-1").innerHTML = testInfo from your vue app.