Having trouble integrating a map into my WordPress site using the Google Maps API v3. The issue I am facing is that the listener assigned to the mouseout event is not functioning properly. I have copied and pasted the code from another website where it was working fine. The intended functionality is that when you hover over a marker, the info window should appear, and it should disappear when you move the mouse away. However, after hovering over a marker, I am unable to drag the map.
Refer to:
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!
}