定製InfoWindow內容> Google地圖

Question

我正在使用使用Google Maps API的位置地圖。期望的結果是：

1. 具有多個位置（完成，測試，按需要工作）的地圖。
2. 自定義引腳（完成，測試，按需要工作）。

---事情我想不通---信息窗口內

1. 自定義內容（點擊引腳，信息窗口的名稱，地址，諸如此類的事情打開。）
2. 定位地圖並打開信息窗口的位置列表中的鏈接。

的JavaScript至今：

function initialize() { 
    var myOptions = { 
    zoom: 11, 
    center: new google.maps.LatLng(-33.802544,151.20203), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
    setMarkers(map, lianaraine); 
} 

var lianaLocations = [ 
    ['1', -33.750829,151.24086, 1], 
    ['2', -33.846405,151.211677, 2], 
    ['3', -33.876321,151.241171, 3], 
    ['4', -33.871511,151.159599, 4], 
    ['5', -33.901535,151.161743, 5], 
    ['5', -33.676461,151.304244, 6] 
]; 

function setMarkers(map, locations) { 
    var image = new google.maps.MarkerImage('images/icon_mapPin.png', 
    new google.maps.Size(30, 40), 
    new google.maps.Point(0,0), 
    new google.maps.Point(0, 40)); 
    var shadow = new google.maps.MarkerImage('images/icon_mapPin_shadow.png', 
    new google.maps.Size(26, 20), 
    new google.maps.Point(0,0), 
    new google.maps.Point(-13,21)); 
    var shape = { 
    coord: [1, 1, 1, 40, 30, 40, 30 , 1], 
    type: 'poly' 
    }; 
    for (var i = 0; i < locations.length; i++) { 
    var liana = locations[i]; 
    var myLatLng = new google.maps.LatLng(liana[1], liana[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: liana[0], 
     zIndex: liana[3] 
    }); 
    } 
} 

我使用V3 ......如果關鍵？

我知道我是公平的。任何協助或方向，將不勝感激。

在此先感謝。

@rrfive

Answer 1

所以，你想要做的是有一個信息窗口，但它可以讓每個標記不同的內容。即內容及其位置響應於用戶點擊而改變。因此，在創建標記的循環中，您還需要創建infowindow。然而，你將需要區分這一點到另一個功能，否則你結束了，每一個信息窗口只包含最後一個標記的內容的情況。

function setMarkers(map, locations) { 
    ... 
    var infowindow = new google.maps.InfoWindow({ 
    content: '' 
    }); 

    for (var i = 0; i < locations.length; i++) { 
    var liana = locations[i]; 
    var myLatLng = new google.maps.LatLng(liana[1], liana[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: liana[0], 
     zIndex: liana[3] 
    }); 

    // add an event listener for this marker 
    bindInfoWindow(marker, map, infowindow, "<p>" + liana[0] + "</p>"); 
    } 
} 

function bindInfoWindow(marker, map, infowindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(html); 
     infowindow.open(map, marker); 
    }); 
} 

我不知道你在哪裏，從獲得的詳細地址 - 在我的例子中，我只是用你傳遞的「標題」你的陣列的相同部分的屬性，然後我顯示在infowindow中。也許你將不得不使用Geocoder service查找各的latLng，那麼這可能是陣列中的一個附加列的地址。

更新：如果你這時就需要有一個正常的鏈接觸發，如果你想點擊的標記，你需要做的是在一個陣列的標記（使之成爲全局變量，推創建它們之後將它們放入數組中）。點擊一個鏈接調用一個javascript函數，傳入一個數字來標識要使用的數組中的哪個元素。然後你「觸發」該標記點擊，例如

<a href="#" onclick="showWindow(0); return false">One</a> 
<a href="#" onclick="showWindow(1); return false">Two</a> 

function showWindow(id) { 
    google.maps.event.trigger(markersArray[id], 'click'); 
}