Attempting to implement a roadmap in Wordpress using Google Maps API v3 and have trouble with the listener designated to mouseout event no longer working. The code used is really a copy &lifier paste from another site working fine. The funcionality is: mouseover shows the data window and mouseout hides it. The issue is once you rollover any marker, you cannot even drag the map

Fine: http://www.fashiontraveler.com/shanghai-shopping-guide-map.htm

header.php

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/common.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
    locations = [<?php echo $locations; ?>];
    iwData = [<?php echo $iwData; ?>];
</script>

Page

<div id="city_canvas" style="margin-top:40px; width:500px; height:300px; border:solid 1px #000;"><script>window.onload = function() {sdgCityMap(<?php echo $cityCoord; ?>);}</script></div>

common.js

var map;  
var myIcon;  
var image;  
var infoWin;  
var markers = new Array();

function sdgCityMap(lat,lng) {
...
    map = new google.maps.Map(document.getElementById("city_canvas"), myOptions);

    function buildOverHandler(i) {
        return function() {showIW(i);};
    }

    function buildClickHandler(i) {
        return function() {lnkToStore(i);};
    }

    for (i in locations) {
        myIcon = (locations[i][0] == 1) ? "http://www.fashiontraveler.com/newsite/media/imgs/maps/mono_store.png" : "http://www.fashiontraveler.com/newsite/media/imgs/maps/multi_store.png";
        image = new google.maps.MarkerImage(myIcon, new google.maps.Size(45,22));
        coords[i] = new google.maps.LatLng(locations[i][2],locations[i][3]);
        markers[i] = new google.maps.Marker({position:coords[i], map:map, icon:image});
        google.maps.event.addListener(markers[i], 'mouseover', buildOverHandler(i));
        google.maps.event.addListener(markers[i], 'mouseout', function(event) {infoWin.close();});
        google.maps.event.addListener(markers[i], 'click', buildClickHandler(i));
    }
    centerZoomMap();
}

function showIW(i) {
    var contentString = '<div id="shopDataMap"><p><span class="VB11435E89">'+locations[i][1]+'</span></p>'+iwData[i]+'</div>';
    infoWin = new google.maps.InfoWindow({content:contentString});
    infoWin.open(map, markers[i]);
}
...
//var infoWin; var redefinition caused the problem!
}

The issue was triggered through the var infoWin being defined two times, at the start and also at the finish from the file I suppose inside a copy/paste operation

var map;  
var myIcon;  
var image;  
var infoWin;  
var markers = new Array();

function sdgCityMap(lat,lng) {
...
}

function showIW(i) {
    var contentString = '<div id="shopDataMap"><p><span class="VB11435E89">'+locations[i][1]+'</span></p>'+iwData[i]+'</div>';
    infoWin = new google.maps.InfoWindow({content:contentString});
    infoWin.open(map, markers[i]);
}
...
//var infoWin; var redefinition caused the problem!
}