Question

Here is the problem:

Lets say a Jquery toggle button which loads a Google Map upon request and hides its later when toggled:

 $('#showmeMap').toggle(function() 
 {
   var map = new GMap2($("#map").get(0));
   var mapCenter = new GLatLng(-2, 20);
   map.setCenter(mapCenter, 12);
   $('#map').show();
 }
 }, function() {
$('#map').hide();
 });

Then I add some random markers and later another function which removes markers from the map:

 $('#destroyMarkersButton').click(function() {
    for (var i=0; i<gmarkers.length; i++) 
    {
    map.removeOverlay(gmarkers[i]);
    }
  });   

When clicking on the button I´ve got the error Map is undefined. My thought was defining Google Map object globally:

  map = new GMap2($("#map").get(0));

Which works perfectly in Firefox, however, map fails to load on internet explorer!!

Any suggestions ?

Answer 1

Either wrap both in a function so you can get to map via the closure (they should already be anyway because you should be doing document.ready on these):

$(function()
{
    var map;
    $('#showmeMap').toggle(function() 
    {
        map = new GMap2($("#map").get(0));
        // ...
    });

    $('#destroyMarkersButton').click(function() {
        // ...
    });
});

Or, you can define a namespace of sorts (usually I have a library for this that does it recursively rather than directly like this):

if (window.myApp === undefined)
    window.myApp = {};
var appNS = window.myApp;

Then, you can use that namespace with confidence that it’ll hold through the whole page, since it’s tied directly to window:

$('#showmeMap').toggle(function() 
{
    appNS.map = new GMap2($("#map").get(0));
    // ...
});

and so on.