Closing all opened "infowindows" on mouseover.

[MadRhino]

I'm using a basic script borrowed from another developer... the map supports multiple markers, which I like.
The issue I am having is that I need any existing "infowindow(s)" that are opened to be closed on "mouseover" of any marker.

I have tried different approaches, but all has failed. Any help would be great!

Thanks!

Here is the code

var map ;
  function initialize() {     
    var latlng = new google.maps.LatLng(-34.397, 145.644);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP // can be SATELLITE  , HYBRID, ROADMAP or TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
   
    var marker = add_marker(-34.397, 150.644,"Some title!","html for info box"); // pass in as Latitude, then Longitude
    marker.setMap(map);
   
    var html_box = "<a href=\"foo bar\">tesT</a>";
    var marker = add_marker(-33.397, 140.644,"Some title!",html_box); // pass in as Latitude, then Longitude
    marker.setMap(map);
  }
 
 
  function add_marker(lat,lng,title,box_html) {
    var infowindow = new google.maps.InfoWindow({
        content: box_html
    });

    var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,lng),
          map: map,
          title: title
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
      infowindow.open(map,marker);
    });
    return marker;
  }

[Alan Pearce]

Looking at your code it appears you will have multiple info windows
open if you mouse over multiple markers. I see nothing that closes
one.

Since you are creating an info window in the add_marker function each
time you create a marker, each marker has it's own info window.
You need to move the creation of the info window out of the add_marker
function so each time a marker is moused over it will essentially move
the info window to the current marker.

Hope this helps.

Alan

[meoghe]

Each marker you must push into custom marker
var eachcustom = {
                MARKER: googlemarker, // marker of google map
                CONTENT: data  // string
               };

Each custom marker, you push into array. Declare that array and infowindow on global

var info = new google.maps.InfoWindow({
                content: ""
            });
var markerlist = new Array();
markerlist.push(eachcustom );

Now, you have a datasource(markerlist) to access when requested. Next step, you must add listener for each custom marker in markerlist.

google.maps.event.addListener(markerlist[i].MARKER , 'mouseover', function (event) { _overMarker((markerlist[i]); });
google.maps.event.addListener(markerlist[i].MARKER , 'mouseout', function (event) { _outMarker((markerlist[i]); });

or you can add listener for each custom marker when them created

google.maps.event.addListener(eachcustom.MARKER , 'mouseover', function (event) { _overMarker(eachcustom); });
google.maps.event.addListener(eachcustom.MARKER , 'mouseout', function (event) { _outMarker(eachcustom); });

function _overMarker(mak)
{

this.info.close();
this.info.setContent(mak.CONTENT);
this.info.open(googlemap, mak.MARKER);

}

function _outMarker(mak)
{

this.info.close();

}