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(); 
     }); 
    },