Google Maps Country Mouse Over And Click (FusionTables)

Question

This code draw polygon over countries and when my cursor point a country color of the polygon is changing but i have a problem with eventlistener for click when i click a country always alert last country name what is my mistake thaks for help...

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

<script type="text/javascript">
    var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
    var map;

    function initialize() {
        var myOptions = {
            zoom: 2,
            center: new google.maps.LatLng(10, 0),
            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 name, kml_4326 FROM ' +
            '1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
        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'];
        var country= new Array();
        for (var i in rows) {
            if (rows[i][0] != 'Antarctica') {
                var newCoordinates = [];
                var geometries = rows[i][1]['geometries'];
                if (geometries) {
                    for (var j in geometries) {
                        newCoordinates.push(constructNewCoordinates(geometries[j]));
                    }
                } else {
                    newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
                }
                var randomnumber = Math.floor(Math.random() * 4);
                 country[i] = new google.maps.Polygon({
                    paths: newCoordinates,
                    strokeColor: colors[0],
                    strokeOpacity: 0,
                    strokeWeight: 1,
                    fillColor: colors[0],
                    fillOpacity: 0
                });
                google.maps.event.addListener(country[i], 'mouseover', function () {
                    this.setOptions({ fillOpacity: 0.2 });
                });
                google.maps.event.addListener(country[i], 'mouseout', function () {
                    this.setOptions({ fillOpacity: 0 });
                });
                google.maps.event.addListener(country[i], "click", function (event) {
                    alert(rows[i][0]);
                });
                country[i].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>

possible duplicate of [Adding multiple markers with infowindows (Google Maps API)](http://stackoverflow.com/questions/7044587/adding-multiple-markers-with-infowindows-google-maps-api). Your click listener is always alerting the same value. You should do the same thing you do with the mouseover or use function closure. — geocodezip, Nov 14 '13 at 07:59
Possible duplicate of [Google maps fusion tables hover and click](http://stackoverflow.com/questions/11338776/google-maps-fusion-tables-hover-and-click/11339242#11339242) — geocodezip, Nov 15 '13 at 03:36

geocodezip · Answer 1 · 2013-11-14T13:27:10.337

Your click listener is always alerting the same data:

            google.maps.event.addListener(country[i], "click", function (event) {
                alert(rows[i][0]);
            });

rows[i][0] will always be the same value, because when you loop exits, i will always reference the last value.

One way to fix it would be to use function closure, create a function:

createPolygonClidkHandler(polygon, text) {
   google.maps.event.addListener(polygon, "click", function (event) {
     alert(text);
   });

Then use it the function to keep "closure" on the polygon and its associated text, like this:

function drawMap(data) {
    var rows = data['rows'];
    var country= new Array();
    for (var i in rows) {
        if (rows[i][0] != 'Antarctica') {
            var newCoordinates = [];
            var geometries = rows[i][1]['geometries'];
            if (geometries) {
                for (var j in geometries) {
                    newCoordinates.push(constructNewCoordinates(geometries[j]));
                }
            } else {
                newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
            }
            var randomnumber = Math.floor(Math.random() * 4);
             country[i] = new google.maps.Polygon({
                paths: newCoordinates,
                strokeColor: colors[0],
                strokeOpacity: 0,
                strokeWeight: 1,
                fillColor: colors[0],
                fillOpacity: 0
            });
            google.maps.event.addListener(country[i], 'mouseover', function () {
                this.setOptions({ fillOpacity: 0.2 });
            });
            google.maps.event.addListener(country[i], 'mouseout', function () {
                this.setOptions({ fillOpacity: 0 });
            });
            createPolygonClidkHandler(country[i], rows[i][0]);
            country[i].setMap(map);
        }

    }
}

sorry i paste the wrong code normally it is alert(rows[i][0]); i update the question — Gürkan, Nov 14 '13 at 08:05
Doesn't change the answer. "i" will be left pointing to the last entry in your array. — geocodezip, Nov 14 '13 at 08:07
That is what happening :) but i couldn't understand why how can i fix it i need to alert every country name when i click — Gürkan, Nov 14 '13 at 08:29

Google Maps Country Mouse Over And Click (FusionTables)

1 Answers1