谷歌地圖 - 顯示特定的標記彈出使用標記

的名單我有以下代碼：谷歌地圖 - 顯示特定的標記彈出使用標記

<?php //include_once("connectionmarker.php");?> 
<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Cherrybird</title> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
     <script src="jquery.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    (function() { 

    window.onload = function() { 

     // Creating a new map 
     var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(50.8967,-1.40225), 
      zoom: 18, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

    var customIcons = { 
     Now: { 
     icon: 'img/fourmarker.png', 

     }, 
     Soon: { 
     icon: 'img/marker.png', 

     } 
    }; 




     // Creating a global infoWindow object that will be reused by all markers 
     var infoWindow = new google.maps.InfoWindow(); 

     var list = document.getElementById('list'); 

     $.getJSON("connectionmarker.php", function(data) { 

     for (var i = 0; i < data.length; i++){ 

      // Looping through the JSON data 

       var datanew = data[i] 
       //alert (data[i].Availibility); 
       latLng = new google.maps.LatLng(datanew.Lat, datanew.Lon); 

        var iconimage = datanew.Availibility; 
        var icon = customIcons[iconimage] || {}; 

       // Creating a marker and putting it on the map 
       var marker = new google.maps.Marker({ 
        position: latLng, 
        map: map, 
        icon: icon.icon, 
        title: datanew.Propertynanu 
       }); 
       // add items 
       var listItem= document.createElement('li') 
       listItem.className = "content"; 
       listItem.innerHTML = "House:" + datanew.Propertynanu + "<br />" + datanew.Postcode + "<br />" + datanew.Availibility + "<br />" ; 
       list.appendChild(listItem); 


       // Creating a closure to retain the correct data 
       (function(marker, datanew) { 

        // Attaching a click event to the current marker 
        google.maps.event.addListener(marker, "click", function(e) { 

        //"Id:" + data[i].Id + "<br /> Property Name/Number:" + data[i].Propertynanu + "<br /> Rooms:" + data[i].Rooms 
         infoWindow.setContent("House:" + datanew.Propertynanu + "<br />" + datanew.Postcode + "<br />" + datanew.Availibility + "<br />"); 
         infoWindow.open(map, marker); 
        }); 


       })(marker, datanew); 




      } 
     }); 
    } 

})(); 


    </script> 

    </head> 

    <body> 
    <div id="map" style="width: 1000px; height: 500px"></div> 
    <ul id="list"></ul> 
    </body> 

</html>

我想要做的動態是添加列表項中的div頁上，然後讓用戶點擊相關infoWindow的每個div將顯示在地圖上。我已經使用openlayers完成了這一工作，但現在需要使用Google地圖完成。

我已經得到儘可能用下面添加列表頁：

// add items 
       var listItem= document.createElement('div') 
       listItem.className = "content"; 
       listItem.innerHTML = "House:" + datanew.Propertynanu + "<br />" + datanew.Postcode + "<br />" + datanew.Availibility + "<br />" ; 
       list.appendChild(listItem);

下一步是讓它被點擊列表中時，它爲培訓相關標記上顯示信息窗口。有人能幫忙嗎。

來源

2012-10-09 zara