Question

I have the following modified code from google that displays a map with polygons from one of my fusion tables. The fusion table has two fields – id & geometry. The polygons display fine with a hover that works well.

My question is how do get the content-window div to display the id number of the clicked polygon. The test listener currently displays the ‘test’ text in the content-window div when clicked but i can’t get it to show the id of the clicked polygon that is in the fusion tables query (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>

Thanks:)

EDIT:

I thought i could then take the id that @geocodezip helped me with and using the listener:

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

          getAreas(id);

        });

…pass it to the functions below to get it to pull multiple ‘name’ fields from a seperate Fusion Table that have that id.

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;
    }
}

This doesn’t work though. Anybody got any idea what i’m doing wrong?

Thanks

Answer 1

If you started from this example the id is:

 var id = rows[i][0];

To get that to be associated with the “country” polygon, I would use a function closure:

  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