動態填充谷歌地圖側邊欄

Question

我一直在使用從this V3 example的代碼來設置。當選擇不同類別的過濾器動態填充一個鏈接欄，但目前所面對的兩個問題。首先，我已經把最初的makeSidebar功能在地圖上的閒置事件，但在地圖上移動，而不是在頁面加載時才創建工具條。其次，我似乎無法得到標記信息窗口點擊側邊欄的相應鏈接時打開。我的代碼如下：

var map; 
var infowindow; 
var image = []; 
var gmarkers = []; 
var place; 
var side_bar_html = ""; 

    image['attraction'] = 'http://google-maps-icons.googlecode.com/files/beach.png'; 
    image['food'] = 'http://google-maps-icons.googlecode.com/files/restaurant.png'; 
    image['hotel'] = 'http://google-maps-icons.googlecode.com/files/hotel.png'; 
    image['city'] = 'http://google-maps-icons.googlecode.com/files/smallcity.png'; 

function mapInit(){ 

    var placeLat = jQuery("#placelat").val(); 
    var placeLng = jQuery("#placelng").val(); 
    var centerCoord = new google.maps.LatLng(placeLat, placeLng); 

    var mapOptions = { 
     zoom: 15, 
     center: centerCoord, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map"), mapOptions); 

    google.maps.event.addListener(map, 'idle', function() { 
     var bounds = map.getBounds(); 
     var ne = bounds.getNorthEast(); 
     var sw = bounds.getSouthWest(); 
     var yMaxLat = ne.lat(); 
     var xMaxLng = ne.lng(); 
     var yMinLat = sw.lat(); 
     var xMinLng = sw.lng(); 
     //alert("bounds changed"); 
     updateMap(yMaxLat, xMaxLng, yMinLat, xMinLng); 
     show("attraction"); 
     show("food"); 
     show("hotel"); 
     show("city"); 
     makeSidebar(); 
    }); 

    function updateMap(yMaxLat, xMaxLng, yMinLat, xMinLng) { 
    jQuery.getJSON("/places", { "yMaxLat": yMaxLat, "xMaxLng": xMaxLng, "yMinLat": yMinLat, "xMinLng": xMinLng }, function(json) { 
     if (json.length > 0) { 
     for (i=0; i<json.length; i++) { 
      var place = json[i]; 
      var category = json[i].tag; 
      var name = json[i].name; 
      addLocation(place,category,name); 
      //makeSidebar(); 
     } 
     } 
    }); 
    } 

    function addLocation(place,category,name) { 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(place.geom.y, place.geom.x), 
     map: map, 
     title: place.name, 
     icon: image[place.tag] 
     }); 
     //var iwNode = document.getElementById("infowindow"); 

     marker.mycategory = category; 
     marker.myname = name; 
     gmarkers.push(marker); 

     google.maps.event.addListener(marker, 'click', function() { 
     if (infowindow) infowindow.close(); 
     infowindow = new google.maps.InfoWindow({ 
      content: "<div id='infowindow'><div id='infowindow_name'><p>"+ place.name +"</p></div><div id='infowindow_contents'><p>" + place.tag +"</p><a href='/places/"+place.id+"' id='place_link'>Show more!</a></div></div>" 
     }); 
     infowindow.open(map, marker); 
     google.maps.event.addListener(map, 'click', function() { 
      infowindow.close(); 
     }); 
     }); 
    } 

    function show(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
     if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(true); 
     } 
     } 
     document.getElementById(category+"box").checked = true; 
    } 

    function hide(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
     if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(false); 
     } 
     } 
     document.getElementById(category+"box").checked = false; 
     infowindow.close(); 
    } 

    function boxclick(box,category) { 
     if (box.checked) { 
     show(category); 
     } else { 
     hide(category); 
     } 
     makeSidebar(); 
    } 

    jQuery('#attractionbox').click(function() { 
     boxclick(this, 'attraction'); 
    }); 

    jQuery('#foodbox').click(function() { 
     boxclick(this, 'food'); 
    }); 

    jQuery('#hotelbox').click(function() { 
     boxclick(this, 'hotel'); 
    }); 

    jQuery('#citybox').click(function() { 
     boxclick(this, 'city'); 
    }); 

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

    function makeSidebar() { 
     //var html = ""; 
     for (var i=0; i<gmarkers.length; i++) { 
     if (gmarkers[i].getVisible()) { 
      side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>'; 
     } 
     } 
     document.getElementById("side_bar").innerHTML = side_bar_html; 
    } 
} 

jQuery(document).ready(function(){ 
    mapInit(); 
    //makeSidebar(); 
}); 

任何幫助，將不勝感激 - 我能做些什麼來讓側邊欄加載頁面加載時，並獲得鏈接點擊事件的工作？謝謝！

Answer 1

您的鏈接不工作的原因是您正在定義您的mapInit函數中的my_click和makeSidebar函數，因此它們不在mapInit範圍之外。只需將它們移動到mapInit之外，一切都應該正常工作。

至於負載事件...你在找什麼是google.maps.event的addDomListener方法。簡單使用

google.maps.event.addDomListener(window, 'load', name_of_your_inital_function); 
// e. g. google.maps.event.addDomListener(window, 'load', mapInit); 

最後; notta bene ...不要這樣做：

var image = []; 
image['attraction'] = 'data'; 
image['food'] = 'more data'; 

數組並不意味着在JavaScript中用作哈希值。使用對象的字典/哈希值，而不是 - 它是你實際上在做什麼（陣「子類」對象），它會更容易給其他人使用你的代碼（和頭痛節省您的路線）。

var image = {}; 
image['attraction'] = 'data'; 
image['food'] = 'more data';