I am writing a website that is in both English and Swedish. When the flag is clicked on the navbar, the language of the site changes. I am having trouble changing the content of my info windows though. If I have one already open in English, and then click the Swedish flag, the info window content changes to Swedish. However, if I click the Swedish flag and then open the info window, the content is in English. I think I understand why - in that the language change happens because of the click event, and because the info window doesn't 'exist' prior to it being opened, it can't be changed by the click event. However, I don't really know how to solve it. I have only added Swedish content to one of the locations for the markers as I wanted to get it to work first before I tried it with any more. I am very new to coding, and particularly Javascript, so any help would be really gratefully received!
.english-content {
display: block;
}
.swedish-content{
display: none;
}
var locations = [
//Lakes and Forests coordinates
{
lat: 56.2679,
lng: 14.3251,
info:
"<a id='info-header' class='info-header' href='https://visitskane.com/outdoors-adventure/lake-immeln' target='_blank'>Lake Immeln</a><p class='english-content'>Lake Immeln with its clean water, good fishing and cheap fishing permits is about 23 kilometres north of Kristianstad. It is one of Sweden’s best lakes for canoeing with its many islands and inlets that offer lots of opportunities for overnight camping on your own piece of shoreline. You can always find a quiet bay no matter which direction the wind blows.</p><p>Attribution: <a href='https://visitskane.com/outdoors-adventure/lake-immeln' target='_blank'>Visit Skåne</a></p><p class='swedish-content'>Immeln, cirka 23 kilometer norr om Kristianstad, erbjuder rent vatten, bra fiske och tystnad. Detta är en av Sveriges bästa sjöar för paddling med mångaöar och vikar där du kan hitta en egen rofylld plats att övernatta på. Även när det blåser är det inte långt till lä i nästa vik.</p>",
type: lakesIcon,
}]
var markers = locations.map(function (location, i) {
var marker = new google.maps.Marker({
position: location,
icon: locations[i % locations.length].type,
});
google.maps.event.addListener(marker, "click", function () {
infoWin.setContent(location.info);
infoWin.open(map, marker);
});
return marker;
});
//Toggle between Swedish and English language when the relevant flag is clicked.
$("#flag").click(function () {
$(".swedish-content").toggle();
$(".swedish-heading").toggle();
$(".english-content").toggle();
$(".english-heading").toggle();
});