Google map api v3 show infowindows当点击一个外部元素时

Question

我有一个功能gmap，当我点击标记时显示标记并显示infowindows。 现在，我想在悬停与该标记相关的列表项目时显示一个infowindow。我测试了很多东西，但infowindow从不显示。

我的项目都是这样的<li class="shop" data-shop="markerId">

而我的JS：

function initShopsMap(shops, myLatlng) { 
    createMap('map-canvas', myLatlng); 

    var infoWindow = new google.maps.InfoWindow(); 

    for (var i = 0, length = shops.length; i < length; i++) { 
     var data = shops[i], 
      latLng = new google.maps.LatLng(data.latitude, data.longitude); 

     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      id: data.id, 
      name: data.name, 
      slug: data.slug, 
      infoWindow: infoWindow 
     }); 

     (function(marker) { 
      // Attaching a click event to the current marker 
      google.maps.event.addListener(marker, 'click', function(e) { 
       infoWindow.setContent(marker.name + ' ' + marker.slug); 
       infoWindow.open(map, marker); 
      }); 
        //hover list item when hover a marker 
      google.maps.event.addListener(marker, 'mouseover', function(e) { 
       //todo scroll to 
       $('.shop[data-shop="'+marker.id+'"]').addClass('active'); 
      }); 
      google.maps.event.addListener(marker, 'mouseout', function(e) { 
       $('.shop[data-shop="'+marker.id+'"]').removeClass('active'); 
      }); 
     })(marker, data); 
    } 
} 

如何将事件添加到$('.shop[data-shop="'+marker.id+'"]')，显示相关信息窗口？

编辑：用google.maps.event.trigger(markers[myPoint-1], "click");解决的问题与IIFE

Answer 1

我觉得this answer效果很好，可能是你在找什么。

而不是使用href属性，使用mouseover事件来调用show函数。

Answer 2

使用的setter属性以获得正确的参考，我觉得标记ID将不会为它

add_markers: function(_locations,no_click){ 

     var handler = this; 
     var map_options = handler.options; 

     var infowindow = new google.maps.InfoWindow({ 
      content: '' 
     }); 

     //add markers 
     for (var i = 0; i < _locations.length; i++) { 

      var marker = new google.maps.Marker({ 
      /////////////////////////////change tootip info here/////////////////////////////////////// 
       setter: i, 
       title: _locations[i].address, 
       position: new google.maps.LatLng(_locations[i].lat, _locations[i].lon), 
       map: map 
      }); 
      var marker_icon = new google.maps.MarkerImage(map_options.offc_icon.image); 
      marker_icon.size = new google.maps.Size(map_options.offc_icon.width, map_options.offc_icon.height); 
      marker_icon.anchor = new google.maps.Point(map_options.offc_icon.iconanchor[0],map_options.offc_icon.iconanchor[1]); 
      marker.setIcon(marker_icon); 

      handler.marker_initializer(marker, map, infowindow, "<p>"+ _locations[i].address + "</p>",no_click); 
     } 
    }, 
    ////Set Marker 
    marker_initializer: function(marker, map, infowindow, html,no_click) { 

     var handler = this; 


     if(!no_click) 
     google.maps.event.addListener(marker, 'click', function() { 
      lender_model.show_lenders(marker.setter); 
     }); 
     google.maps.event.addListener(marker, 'mouseout', function() { 
      infowindow.close(); 
     }); 
    },