谷歌地圖融合錶盤旋和點擊

Question

我有以下修改的代碼從谷歌顯示與我的融合表之一的多邊形地圖。融合表有兩個字段 - id &幾何。多邊形顯示很好，懸停效果很好。

我的問題是如何讓content-window div顯示點擊多邊形的ID號。測試監聽器當前在content-window div中顯示'test'文本，但我無法獲得它顯示融合表查詢中單擊的多邊形的ID（var query ='SELECT id，geometry FROM '+ 'MYMAPID';）

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var map; 

function initialize() { 
    var myOptions = { 
     zoom: 6, 
     center: new google.maps.LatLng(32.157435,-82.907123), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'),myOptions); 

    // Initialize JSONP request 
    var script = document.createElement('script'); 
    var url = ['https://www.googleapis.com/fusiontables/v1/query?']; 
    url.push('sql='); 
    var query = 'SELECT id,geometry FROM ' + 'MYMAPID'; 
    var encodedQuery = encodeURIComponent(query); 
    url.push(encodedQuery); 
    url.push('&callback=drawMap'); 
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ'); 
    script.src = url.join(''); 
    var body = document.getElementsByTagName('body')[0]; 
    body.appendChild(script); 
    } 

function drawMap(data) 
{ 
    var rows = data['rows']; 
    for (var i in rows) 
    { 
     newCoordinates = constructNewCoordinates(rows[i][1]['geometry']); 

     var country = new google.maps.Polygon 
     ({ 
      paths: newCoordinates, 
      strokeColor: "#ff0000", 
      strokeOpacity: 1, 
      strokeWeight: 1, 
      fillOpacity: 0.3 
     }); 

     google.maps.event.addListener(country, 'mouseover', function() { 
      this.setOptions({fillOpacity: 1}); 
     }); 

     google.maps.event.addListener(country, 'mouseout', function() { 
      this.setOptions({fillOpacity: 0.3}); 
     }); 
     //test listener 
     google.maps.event.addListener(country, 'click', function() { 
     document.getElementById('content-window').innerHTML ='test'; 
     }); 

     country.setMap(map); 
    } 
} 


function constructNewCoordinates(polygon) 
{ 
    var newCoordinates = []; 
    var coordinates = polygon['coordinates'][0]; 
    for (var i in coordinates) 
    { 
     newCoordinates.push(
     new google.maps.LatLng(coordinates[i][1], coordinates[i][0])); 
    } 
    return newCoordinates; 
} 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

謝謝:)

編輯：

我想的話，我可能會採取@geocodezip幫我的ID，並使用監聽器：

google.maps.event.addListener(country, 'click', function() { 

      getAreas(id); 

     }); 

...將它傳遞給下面的函數，讓它從具有該id的單獨的Fusion Table中拉出多個'name'字段。

function getAreas(id) 
{ 
// Initialize JSONP request 
    var script = document.createElement('script'); 
    var url = ['https://www.googleapis.com/fusiontables/v1/query?']; 
    url.push('sql='); 
    var query = 'SELECT name FROM ' + 'MY TABLE 2' + 'WHERE id=' + id; 
    var encodedQuery = encodeURIComponent(query); 
    url.push(encodedQuery); 
    url.push('&callback=showAreas'); 
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ'); 
    script.src = url.join(''); 
    var body = document.getElementsByTagName('body')[0]; 
    body.appendChild(script); 

} 

function showAreas(data) 
{ 
    var rows = data['rows']; 
    for (var i in rows) 
    {   
     var name = rows[i][0];  
     document.getElementById('content-window').innerHTML = name; 
    } 
} 

雖然這不起作用。有人知道我做錯了什麼？

感謝

Answer 1

如果從this example開始的ID爲：

var id = rows[i][0]; 

要獲得要與 「國家」 多邊形有關，我會用一個函數閉包：

function createPolygon(country,id) 
    { 
     google.maps.event.addListener(country, 'mouseover', function() { 
      this.setOptions({fillOpacity: 1}); 
     }); 
     google.maps.event.addListener(country, 'mouseout', function() { 
      this.setOptions({fillOpacity: 0.3}); 
     }); 
     google.maps.event.addListener(country, 'click', function() { 
      document.getElementById('content-window').innerHTML = id; 
     }); 
    } 

working example