多個Google地圖多段線和infowindows

Question

嘗試將多個infowindows添加到多段線時，infowindow不顯示。

已經嘗試過這個帖子同樣的問題： Multiple polylines and infowindows with Google Maps V3

正如你可以看到我嘗試使用建議的函數在給定的答案，但它仍然是行不通的。

這裏是我的代碼：

var center = new google.maps.LatLng(51.97559, 4.12565); 

    var map = new google.maps.Map(document.getElementById('map'), { 
     center: center, 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 


var bounds = new google.maps.LatLngBounds(); 

// start coordinates 
var start = ['51.97559, 4.12565', 
      '55.46242, 8.43872', 
      '49.49259, 0.1065', 
      '50.36862, -4.13412'] 

// end coordinates 
var end = ['51.94784, 1.2539', 
      '51.94784, 1.2539', 
      '50.79726, -1.11048', 
      '43.45846, -3.80685'] 

function initialize() { 


    // Make clickable tooltip 
    /* 

    */ 

    for (var i=0; i < end.length; i++){ 
     calcRoute(start[i], end [i]); 
    } 


} 

function calcRoute(source,destination){ 

     var poly = new google.maps.Polyline({ 
     path: [], 
     strokeColor: '#FF0000', 
     strokeWeight: 5, 
     strokeOpacity: 0.5 
    }); 


    var directionsService = new google.maps.DirectionsService(); 
    var request = { 
     origin:source, 
     destination: destination, 
     travelMode: google.maps.DirectionsTravelMode.WALKING 
    }; 

    directionsService.route(request, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      path = result.routes[0].overview_path; 

      $(path).each(function(index, item) { 
       poly.getPath().push(item); 
       bounds.extend(item); 
      }) 

       // Custom infoWindow 
    var toolTip = '<div id="map-box">'+ 
     '<div id="siteNotice">'+ 
     '</div>'+ 
     '<h1 id="firstHeading" class="firstHeading">Route</h1>'+ 
     '<div id="bodyContent">'+ 
     '<p>Lorem ipsum dolor sit amet</p>'+ 
     '</div>'+ 
     '</div>'; 


     poly.setMap(map); 
     createInfoWindow(poly,toolTip); 


      map.fitBounds(bounds); 
     } 
    }); 


} 


function createInfoWindow(poly,content) { 

    google.maps.event.addListener(poly, 'click', function(event) { 
     infowindow.content = content; 
     //infowindow.position = event.latLng; 
     infowindow.setPosition(event.latLng); 
     infowindow.open(map); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

這裏是的jsfiddle鏈接： http://jsfiddle.net/cnwMG/7/

任何幫助，以顯示在折線的信息窗口會真正理解。

Answer 1

你缺乏最基本的：實例化信息窗口:)

然後，設置信息窗口的屬性以正確的方式是這樣的

infowindow.setContent(toolTip); 
infowindow.setPosition(event.latLng); 

不

infowindow.content = toolTip; 

也有一些與調用infowindow的邏輯有關的問題。
這裏是一個清理叉小提琴http://jsfiddle.net/b7FHV/