All my code is being overwritten by the last section

Question

We have a map which uses polygons to create overlays on top of countries. When a user hovers over a country the polygons change color.

When the mouse leave the country it changes back (or at least we want it to)

Us the code below what happens is that that both countries access the settings for JUST the last section of code. It seems all other code is overwritten.

I don't know which variable to make unique.

for(var i = 0; i < germany.length; i++){
    addListener( germany[ i ], germany );
    }
function addListener( germany_item, tweened )
{   
    google.maps.event.addListener(germany_item, "mouseover",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
    });
    google.maps.event.addListener(germany_item, "mouseout",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#5EA9BD", strokeColor: "#5EA9BD" });
    });
}//
for(var i = 0; i < france.length; i++){
    addListener( france[ i ], france );
    }
function addListener( france_item, tweened )
{   
    google.maps.event.addListener(france_item, "mouseover",function() {
                    for( var i in tweened ) 
        tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
        });
    google.maps.event.addListener(france_item, "mouseout",function() {    
                    for( var i in tweened ) 
            tweened[ i ].setOptions({ fillColor: "#006886", strokeColor: "#006886" });
        });

Answer 1

You cannot have two functions with the same name (you have two copies of function addListener() ). If you do that, then only the last one will be active (which is what you were experiencing). I would suggest you either change the name of both functions to addListenerGermany() and addListenerFrance() or replace them both with one function and pass in the minor difference between the two as a parameter so you can serve both need with one block of code.

For example, you could change it all to this:

for (var i = 0; i < germany.length; i++) {
    addListenerCommon( germany[ i ], germany , "#5EA9BD", "#5EA9BD");
}

for(var i = 0; i < france.length; i++) {
    addListenerCommon( france[ i ], france, "#006886", "#006886" );
}

function addListenerCommon(item, tweened, fill, stroke ) {   
    google.maps.event.addListener(item, "mouseover",function() {
        for( var i in tweened ) {
            tweened[ i ].setOptions({ fillColor: "#DD732B", strokeColor: "#DD732B" });
        }
    });
    google.maps.event.addListener(item, "mouseout",function() {
        for( var i in tweened ) {
            tweened[ i ].setOptions({ fillColor: fill, strokeColor: stroke });
        }
    });
}

If you're going to add more countries, then you can make a function for the for loop:

function initCountry(country, fill, stroke) {
    for (var i = 0; i < country.length; i++) {
        addListenerCommon(country[i], country, fill, stroke);
    }
}

initCountry(germany, "#5EA9BD", "#5EA9BD");
initCountry(france, "#006886", "#006886");
initCountry(australia, "#FF6886", "#FF6886");

and so on...

Answer 2

See this related question . Using the function myFunction() syntax defines a function at parse time, not at run time, so the last declaration will overwrite the first. You can fix this by using var myFunction = function() syntax, which is defined at runtime:

var addListener = function( germany_item, tweened ) { ... };
addListener(germany);
var addListener = function( france_item, tweened ) { ... };
addListener(france);