Google maps fusion tables hover и нажмите

Question

У меня есть следующий модифицированный код из google, который отображает карту с полигонами из одной из моих таблиц слияния. Таблица слияния имеет два поля - id & геометрия. Многоугольники отображаются хорошо с зависанием, который хорошо работает.

Мой вопрос заключается в том, как получить div-окно содержимого для отображения идентификационного номера щелкнутого многоугольника. Тестовый прослушиватель в настоящее время отображает текст «test» в div окна содержимого при нажатии, но я не могу заставить его отображать идентификатор щелкнутого многоугольника, который находится в запросе таблиц слияния (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> 

Спасибо :)

EDIT:

Я думал, что я мог бы взять на себя идентификатор, который @geocodezip помог мне и с помощью слушателя :

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

      getAreas(id); 

     }); 

... передайте его нижеуказанным функциям, чтобы заставить его потянуть несколько полей «имя» из отдельной таблицы Fusion, которые имеют этот идентификатор.

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 Идентификатор:

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