Google地圖API V3：信息框插件和邊欄鏈接

Question

我有一個工作地圖，其中包含一個谷歌地圖畫布和2個鏈接，在地圖側面，單擊時，它將用戶帶到存儲的經緯度位置和一個信息窗口。我的下一步是設計標記（已成功）和infoWindows。

風格的信息窗口我使用的信息框插件已風格但我不確定如何使用此插件的兩個不同的信息窗口。風格會保持不變，但內容會發生變化。此時infoBox正在工作，但當用戶點擊第二個鏈接時，infoBox中的內容保持不變。

工作鏈接：http://jsfiddle.net/charliebee/363ea/3/

CODE

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 

var side_bar_html = ""; 
var gmarkers = []; 
var map = null; 
var infobox; 


function initialize() { 
    var myOptions = { 
    zoom: 12, 
    styles: styles, 
    center: new google.maps.LatLng(54.97962549875775,-1.5975022315979004), 
    mapTypeControl: true, 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 

    } 
    map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
    google.maps.event.addListener(map, 'click', function() { 
}); 

    var point = new google.maps.LatLng(lat,long); 
    var marker = createMarker(point,"City 1") 

    var point = new google.maps.LatLng(lat,long); 
    var marker = createMarker(point,"City 2") 

    document.getElementById("marker_list").innerHTML = side_bar_html; 
} 

function myclick(i) { 
    map.setCenter(gmarkers[i].getPosition()); 
    google.maps.event.trigger(gmarkers[i], "click"); 
} 

function createMarker(latlng, name, html) { 

    var contentString = html; 
    var image = 'images/mapIcon.png'; 

    var marker = new google.maps.Marker({ 
     position:latlng, 
     map: map, 
     icon: image 
     }); 

    infobox = new InfoBox({ 
     content: document.getElementById("infobox","infobox2"), 
     disableAutoPan: true, 
     maxWidth: 280, 
     pixelOffset: new google.maps.Size(0, 0), 
     zIndex: null, 
     boxStyle: { 
     backgroundURL:"images/bg.png", 
     opacity: 0.89, 
     width: "280px" 
     }, 
     closeBoxMargin: "20px 20px 20px 20px", 
     closeBoxURL: "images/close.png", 
     infoBoxClearance: new google.maps.Size(1, 1), 
    enableEventPropagation: false 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infobox.open(map, this); 
     map.panTo(loc); 
     infobox.setContent(contentString); 
     infobox.open(map,marker); 
     }); 

     gmarkers.push(marker); 

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; 
} 

<div class="infobox-wrapper"> 
    <div id="infobox"> 
    Content 1 
    </div> 
    <div id="infobox2"> 
    Content 2 
    </div> 
</div 

有沒有人能夠給我意見，以實現這一目標？我試過使用兩個infoBox選項或標記名稱修改內容，但未成功。這是除了樣式表之外的所有代碼。

Answer 1

問題是與該圖標：

http://jsfiddle.net/z9Apy/1/

如果我改變了：

var marker = new google.maps.Marker({ 
    position:latlng, 
    map: map, 
    icon: image 
    }); 

要：

var marker = new google.maps.Marker({ 
    position:latlng, 
    map: map 
    }); 

它顯示標記。

UPDATE：

與內容的問題是這一行：

content: document.getElementById("infobox","infobox2") 

那隻能一次返回一個元素。一種選擇是更改您的createMarker函數以獲取要使用的id元素的id。

function createMarker(latlng, name, elId) { 
    var image = 'images/mapIcon.png'; 

    var marker = new google.maps.Marker({ 
     position:latlng, 
     map: map /*, 
     icon: image */ 
     }); 

     infobox = new InfoBox({ 
     content: document.getElementById(elId), 
     disableAutoPan: true, 
     maxWidth: 280, 
     pixelOffset: new google.maps.Size(60, -150), 
     zIndex: null, 
     boxStyle: { 
     opacity: 0.89, 
     width: "280px" 
     }, 
     closeBoxMargin: "20px", 
     closeBoxURL: "images/cross.png", 
     infoBoxClearance: new google.maps.Size(1, 1), 
     enableEventPropagation: false 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infobox.open(map, this); 
     map.panTo(latlng); 
     infobox.setContent(document.getElementById(elId)); 
     }); 

    gmarkers.push(marker); 

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; 
} 

example