1

Here is the code for 7 markers being displayed on a GoogleMap. To each marker, I added a mouseover and mouseout event that opens/closes an InfoBox. This code works fine in IE, Firefox and Opera, but in Chrome I am facing serious problems.

In Chrome 32: the mouseover event does not open the InfoBox anymore. The event fires, which can be seen by the marker coordinates being displayed in the console. Also, the InfoBox works fine, since clicking on the marker opens the InfoBox for a moment.

My first guess that is has to do with the mouseout listener, since all InfoBoxes are displayed correctly when I remove this listener. But then I replaced the loop to add the markers by a setInterval function, where I keep adding the same 7 markers one after another (i.e. several layers of each marker). And strangely enough, everything works fine then. Therefore I assume that it has to do with Chrome not "focusing" on the map once the markers are set. I just cannot figure out the details of it and would therefore be happy for your input!

Please find below the original code, and after that the part modified with setInterval.

Thank you so much...

<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>InfoBox Issue</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script>

<script type="text/javascript">
var markers = [];
var lats = [52.1512267, 52.0834868, 52.1950463, 52.1365344, 52.1210918, 52.3727503, 52.3794252];
var lngs = [5.3804623, 5.1503427, 5.3829468, 5.2103806, 5.2853468, 4.8999749, 9.7271];
var map;
var myOptions = {
                isHidden: false,
                enableEventPropagation: true
};

var ib = new InfoBox(myOptions);


function addMarker(coordinates) {
  var marker = new google.maps.Marker({
    position:  coordinates,
    map: map,
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FAFA0C|000000',
  });
  markers.push(marker);


  google.maps.event.addListener(marker, 'mouseover', function() {
        var boxText = document.createElement("div");
        boxText.style.cssText = "background-color: white; border: 1px solid #BAB7B6";
        boxText.innerHTML = '<div id="test">Mouseover</div>';
        ib.setContent(boxText);
        ib.open(map, this);
        console.log(marker.position);
  });
  google.maps.event.addListener(marker, 'mouseout', function() {
      ib.close(map, marker);    
  }); 


}

function initialize() {
      map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 7,
          center: new google.maps.LatLng(51.886664,7.267027),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      jQuery("#start").click(function(){
          // remove all markers on the map)
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
          }
          markers = [];
          for (var i = 0; i < lats.length; i++) {
            addMarker(new google.maps.LatLng(lats[i], lngs[i]))
          }
      });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


  </head>
  <body>
    <input type="button" id="start" value="Start"/>
    <div id="googleMap" style="position:relative;width:800px;height:500px;"></div>

  </body>
</html>

And here is the modification of the function initialize() that works - but does not make much sense for real life applications:

function initialize() {
      map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 7,
          center: new google.maps.LatLng(51.886664,7.267027),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      jQuery("#start").click(function(){
          // remove all markers on the map)
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
          }
          markers = [];
          var counter = 0;
              timer = setInterval(function(){

                    if (counter > lats.length-1) {
                     counter = 0;
                    } else {
                       addMarker(new google.maps.LatLng(lats[counter], lngs[counter]));
                       counter = counter + 1
                    }
              }, 500); 
      });
}
user1016494
  • 25
  • 6
  • I have got exactly the same problem. Have you resolved this? – clime Jan 24 '14 at 02:49
  • No, I still have not found the "real" solution. What I ended up doing is to add and remove one marker every 1000ms, then it works fine. If I extend the period to more than 1 second, the problem occurs again. – user1016494 Jan 27 '14 at 09:34
  • In my case, the problem was with `closeBoxUrl: ''` setting in infoBox conf. Quite strange but after I removed the settings, it started to work normally. I switched to setting `closeBoxMargin: -10000` to get rid of the close button. I can see that you don't use closeBoxUrl so the problem will be somewhere else for you. – clime Jan 27 '14 at 10:53
  • @clime: I am very surprised to find that my above code now miraculously works with Chrome 32.0.1700.76. I just got a new computer and gave away the old one, so I cannot try to reproduce the error there :-( But thanks for the advise on closeBoxMargin, I will keep it in mind. And hey, maybe also try to get a new computer? :-) – user1016494 Jan 29 '14 at 12:34

0 Answers0