Wie man den Marker auf MarkerWithLabel bewegt Google Map

Question

Ich benutze MarkerWithLabel auf Google map, wenn ich mit der Maus über dem Marker bin, zeigt es keine Dialog Informationen an. Es wird nur angezeigt, wenn Sie auf den Marker klicken. Ich habe einige CSS folgenden als:

<style>  
.labels { 
margin-top:-3px; 
padding: 5px; 
position: absolute; 
visibility: visible; 
z-index: 1030; 
} 
.labels.active .inner { 
    background: cyan; 
} 
.labels.hover .inner { 
    background-color: yellow; 
} 
.labels .arrow{ 
    border-top-color: #ff5a5f; 
    border-right-color: rgba(0,0,0,0); 
    border-bottom-color: rgba(0,0,0,0); 
    border-left-color: rgba(0,0,0,0); 
    border-width: 5px 5px 0; 
    bottom: 0; 
    left: 50%; 
    margin-left: -5px; 
    border-style: solid; 
    height: 0; 
    position: absolute; 
    width: 0; 
} 
.labels .inner{ 
    background-color: #ff5a5f; 
    border-radius: 4px; 
    color: #FFFFFF; 
    max-width: 200px; 
    padding: 3px 8px; 
    text-align: center; 
    text-decoration: none; 
} 
.labels.active .arrow {  
    border-top-color: #00ffff; 
    border-right-color: rgba(0,255,255,0); 
    border-bottom-color: rgba(0,255,255,0); 
    border-left-color: rgba(0,255,255,0); 
} 
.labels.hover .arrow { 
    border-top-color: #ffff00; 
    border-right-color: rgba(255,255,0,0); 
    border-bottom-color: rgba(255,255,0,0); 
    border-left-color: rgba(255,255,0,0); 
} 

und Javascript:

function initMap() { 
    var latlng = new google.maps.LatLng(21.0241852,105.8292388); 
    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 16, /*16*/ 
     center: latLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

    var cityHightlight; 
     //DRAW THE POLYGON OR POLYLINE 
     cityHightlight = new google.maps.Polygon({ 
     paths: hanois, 
     strokeColor: "#F85555", 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: "#FFFFFF", 
     fillOpacity: 0.35 
     }); 
     cityHightlight.setMap(map); 

     // create a bounds object 
     var bounds = new google.maps.LatLngBounds();       
     var latLng = new google.maps.LatLng(23.23333, 105.2325512);     

     bounds.extend(latLng);       
      var markerMap = new MarkerWithLabel({ 
       position: latLng, 
       draggable: true, 
       raiseOnDrag: true, 
       map: map, 
       labelContent: "<div class='arrow'></div><div class='inner'>998888</div>", 
       labelAnchor: new google.maps.Point(30, 30), 
       labelClass: "labels", // the CSS class for the label 
       isClicked: false 
       }); 

       var windowDialog = new google.maps.InfoWindow({ 
        content: "<img height='180px' width='300px' src='images.car.jpg' />" 
          +"<h5>855555</h5>" 
          +"Infor of dialog marker" 
          + "<br>"                       
         }); 
        google.maps.event.addListener(markerMap, "click", function (e) { windowDialog.open(map, this); });                     
        map.fitBounds(bounds); 
       }  
      initMap(); 

Wie dieses Problem zu beheben, wenn schwebt auf Marker und zeigt Dialog Highlight, so vielen Dank !!

Answer 1

Sie haben einen Klick Zuhörer in Ihrem Code

google.maps.event.addListener(markerMap, "click", function (e) { 
       windowDialog.open(map, this); 
}); 

aber schweben sollten Sie Mouseover verwenden und mouseout zB mit Infofenster

markerMap.addListener('mouseover', function() { 
    infowindow.open(map, this); 
}); 

// assuming you also want to hide the infowindow when user mouses-out 
markerMap.addListener('mouseout', function() { 
    infowindow.close(); 
});