Я пытаюсь добавить немного div в labelContent моих Markers, когда срабатывает событие mouseover.

Но проблема в том, что каждый раз, когда мышь перемещается (внутри этого div), вызывается событие mouseout. Без DOM Elements это работает нормально, но если я добавлю некоторые div, img и т. Д., Проблема начнет возникать.

Я использую basic.html со страницы markerWithLabel, с некоторыми изменениями

function initMap() {
     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
     var markers = [];
     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });
    
     var text = 'AAAAAAAAAAAAAAAAAAAAAAAAA<img src="http://cdn-careers.sstatic.net/careers/Img/logos/careers-logo.png?v=4daa70d5b71e">AAAAAAAAAA<br><br>AAAAAAAAAAAAAAABBBBBBBBBBBBBB<p> ALFA </p> BBBBBBBBBBBBBBBB<br><br>BBBBB';  
     var html = '<div id="" style="margin-top:2px">'+
                          '<div>'+
                              '<div width="285">'+              
                                    
                                      '<div width="90" height="80" align="center" style="vertical-align: top">'+
                                          '<div style="display:inline-block;margin-top: 12px;">'+
                                            '<img src="http://cdn-careers.sstatic.net/careers/Img/logos/careers-logo.png?v=4daa70d5b71e" width="80" height="52">'+
                                          '</div>'+
                                      '</div>'+
                                      '<div width="185" align="left" style="color:#FFF; font: 12px Arial, Helvetica, sans-serif">'+
                                        '<div style="display:inline-block;height:80px;margin-top: 2px;overflow:hidden" title="TITULO DO MARCADOR" alt="ALT DO MARCADOR">'+
                                            '<div style="font-family: arial,tahoma;line-height: 14px;color:white"><strong>TITULO DO MARCADOR</strong><br> 6 quartos<br>Valor: 15000000 <br>Area: 120 m2</p>'+
                                        '</div>'+
                                      '</div>'+                                                                   
                              '</div>'+
                          '</div>'+
                      '</div>';


     var marker1 = new MarkerWithLabel({
       position: homeLatLng,
       draggable: true,
       raiseOnDrag: true,
       pane: "overlayMouseTarget" ,
       map: map,
       labelContent: "$AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA425K",
       labelNovo: text,
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });
    
     markers.push(marker1);

     var marker2 = new MarkerWithLabel({
       position: new google.maps.LatLng(49.475, -123.84),
       draggable: true,
       raiseOnDrag: true,
       map: map,
       pane: "overlayMouseTarget",
       labelContent: "$395K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 1.0}
     });
     markers.push(marker2);


     var markerCluster = new MarkerClusterer(map, markers /*, mcOptions fix javascript error */);
    
     google.maps.event.addListener(marker1, "mouseover", function (e) {  console.log('mouseover'); this.set('labelContent',this.labelNovo); });
     
     google.maps.event.addListener(marker1, "mouseout", function (e) { console.log('mouseout'); this.set('labelContent','abcdefghijklmnopqrstuvxyz') });
     google.maps.event.addListener(marker2, "mouseover", function (e) { this.set("labelContent",html) });
     
     google.maps.event.addListener(marker2, "mouseout", function (e) { this.set("labelContent",'OUTOUTOUTOTU') });
     
     
     window.map = map;
    
   }

.labels {
     color: black;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     max-height: 500px !important;
     width: 100px;
     white-space: nowrap;
   }

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>MarkerWithLabel Example</title>

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
 <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
 <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>

</head>
<body onload="initMap()">
<p>A basic example of markers with labels. Note that an information window appears whether you
click the marker portion or the label portion of the MarkerWithLabel. The two markers shown here
are both draggable so you can easily verify that markers and labels overlap as expected.</p>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
 <div id="log"></div>
</body>
</html>

Я установил 2 маркера, чтобы показать разницу.