Question

I am attempting to display a google maps layer only when the user chooses to do so like this:

$("#add_layer").click(function() {
    var firstLayer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: '1mzDdm3G8By9pbjBG3XvSUw6fppNVkYPYo0k'
          },
          map: map,
          suppressInfoWindows: true
        });
        google.maps.event.addListener(firstLayer, 'click', function(e) {
          windowControl(e, infoWindow, map);
        });
});

This code works perfectly when not contained within the $(“#add_layer”).click(function(), but not within the click function. Is there some reason you can’t use a click function to do this?

Answer 1

I suspect the problem is with the map variable. To use it in a click handler it needs to be in the global scope.

Assuming you initialize it in a “initialize function” that is called onload, change:

 function initialize() {
  var map = new google.maps.Map(...);

To:

var map;
function initialize() {
  map = new google.maps.Map(...);