Question

The code is :

 function bindInfoWindow(marker, map, infoWindow, html) {                           
        google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent("<div id='window'>" + html + "</div>");
    } 

and

 var html = "<b>" + title + "</b> <br/><b>" + country;

and i want when country is UK or US to change the opacity of the #window div or the infoWindow

Is there a way i can do it with jQuery ?

thnx

Answer 1

You don’t really need jQuery to do this. In your css define an class with your desired opacity settings

.opacity {
 filter:alpha(opacity=50); //IE

        opacity: 0.5;

}

Modify your function to pass a country as a parameter and add the class to the div depending on the desired value

 function bindInfoWindow(marker, map, infoWindow, html, country) {                           
            google.maps.event.addListener(marker, 'click', function() {
    opacityClass =  (country=="UK" || country == "US") ? "opacity" : "";

infoWindow.setContent("<div id='window' class="+opacityClass+">" + html + "</div>");
        }

or if you want to use jquery

     function bindInfoWindow(marker, map, infoWindow, html, country) {                           
                google.maps.event.addListener(marker, 'click', function() {
       if (country=="UK" || country == "US") {
$("#window").addClass("opacity")
}

    infoWindow.setContent("<div id='window'>" + html + "</div>");
            }