綁定jQuery元素點擊Google地圖標記

Question

我使用jQuery綁定我的地圖邊欄作爲我的地圖腳本的一部分。當我這樣做時，我只有一個小問題。當你點擊側邊欄鏈接時，它總是回覆打開最後一個標記的信息窗口。

這意味着我不正確地綁定我的鏈接，或者我錯誤地觸發了標記事件。如果有人能幫助我指出正確的方向......非常感謝。

我正在使用的腳本。

var listings=[new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79)]; 
var names=['name 1','name 2','name 3']; 
var descriptions=['description 1','description 2','description 3']; 
var image = new google.maps.MarkerImage('/flag.png',new google.maps.Size(24,24),new google.maps.Point(0,0),new google.maps.Point(0,0)); 
var map; 
var box; 
function initialize() { 
    var moptions = { 
     zoom: 6, 
     center: new google.maps.LatLng(43,-79), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     visible: true 
    } 
    var div = document.createElement('div'); 
    var boptions = { 
     content: div, 
     disableAutoPan: false, 
     maxWidth: 0, 
     pixelOffset: new google.maps.Size(-140, 0), 
     zIndex: null, 
     boxStyle: { 
      background: "url('tipbox.gif') no-repeat", 
      opacity: 0.75, 
      width: "280px" 
     }, 
     closeBoxMargin: "10px 2px 2px 2px", 
     closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
     infoBoxClearance: new google.maps.Size(1, 1), 
     isHidden: false, 
     pane: "floatPane", 
     enableEventPropagation: false 
    }; 
    box = new InfoBox(boptions); 
    for (var i = 0; i < listings.length; i++) { 
     var marker = new google.maps.Marker({ 
      position: listings[i], 
      map: map, 
      draggable: false, 
      icon: image, 
      title: names[i] 
     }); 
     AttachMessage(marker, i); 
    } 
} 
function AttachMessage(marker, number) { 
    google.maps.event.addListener(marker, 'click', function() { 
     box.close(); 
     box.setContent(descriptions[number]); 
     box.open(map, marker); 
    }); 

    //this is where I am having the issue ... 

    $('#sidebar').find('#marker').unbind('click').bind('click', function (e) { 
     google.maps.event.trigger(marker, 'click'); 
    }); 
} 

邊欄標記鏈接

<div id="sidebar"> 
    <ul> 
     <li><a id="marker" href="#">Marker One</a></li> 
     <li><a id="marker" href="#">Marker Two</a></li> 
     <li><a id="marker" href="#">Marker Three</a></li> 
    </ul> 
</div> 

Answer 1

通過創建一個製造商陣列並將其添加到我的腳本

var listings=[new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79)]; 
var names=['name 1','name 2','name 3']; 
var descriptions=['description 1','description 2','description 3']; 
var image = new google.maps.MarkerImage('/flag.png',new google.maps.Size(24,24),new google.maps.Point(0,0),new google.maps.Point(0,0)); 
var markers = []; 
var map; 
var box; 
function initialize() { 
    var moptions = { 
     zoom: 6, 
     center: new google.maps.LatLng(43,-79), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     visible: true 
    } 
    var div = document.createElement('div'); 
    var boptions = { 
     content: div, 
     disableAutoPan: false, 
     maxWidth: 0, 
     pixelOffset: new google.maps.Size(-140, 0), 
     zIndex: null, 
     boxStyle: { 
      background: "url('tipbox.gif') no-repeat", 
      opacity: 0.75, 
      width: "280px" 
     }, 
     closeBoxMargin: "10px 2px 2px 2px", 
     closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
     infoBoxClearance: new google.maps.Size(1, 1), 
     isHidden: false, 
     pane: "floatPane", 
     enableEventPropagation: false 
    }; 
    box = new InfoBox(boptions); 
    for (var i = 0; i < listings.length; i++) {    
     var marker = new google.maps.Marker({ 
      position: listings[i], 
      map: map, 
      draggable: false, 
      icon: image, 
      title: names[i] 
     }); 
     markers.push(marker); 
     AttachMessage(marker, i); 
    } 
} 
function AttachMessage(marker, number) { 
    google.maps.event.addListener(marker, 'click', function() { 
     box.close(); 
     box.setContent(descriptions[number]); 
     box.open(map, marker); 
    }); 
} 
function OpenMessage(i) { 
    google.maps.event.trigger(markers[i],'click'); 
};