Question

I have a page that searches a database for stores in an input zipcode, maps them as POIs on a google map, and displays the map upon a “show map” click. My problem is that the map seems to be generated only for every other click. I am providing the code that generates botht he table and the map (inside the same ajax call).

To be more specific, the click I am referring to is the trigger for the search function that calls the ajax code – not the “show map” click. In other words, when I search for a zip code the first time, I am able to view a map. The second search yields no map, the third yields a map…and so on…

Any help would be most appreciated

Code is as follows:

function retrieve_stores_in_prox(){
    $('.trigger2').click(function() {   
        $("#map_store").each(function(){
            if ($(this).css("display") == "none")
            {
                $(this).css("display", "block");
            }
            else
            {
                $(this).css("display", "none");
             }
        })
    });
$(document).ready(function() {
    $('#storeList').empty().trigger("update");
    //initialize the store map

    var redicon = new GIcon();
    redicon.image = "images/redCircle.png";
    redicon.iconSize = new GSize(11, 11);
    redicon.iconAnchor = new GPoint(6, 6);
    redicon.infoWindowAnchor = new GPoint(6,6);

    $.ajax({
    type: 'post',
    url: 'trip_planner_store.php',
    dataType: "xml",
    cache: false,
    data: {zip:$("#zip").val()},
    success: function(data) {
        var storemap = new GMap2(document.getElementById("map_store"), { size: new GSize(500,320) });
        storemap.addControl(new GLargeMapControl());
        storemap.addControl(new GMapTypeControl());

        var lat1 = $(data).find('LAT1').text();
        var lon1 = $(data).find('LON1').text();
        storemap.setCenter(new GLatLng(lat1,lon1),8);
        google.maps.event.trigger(storemap, 'resize');

        $(data).find('STORE').each(function(index){
        var lat = parseFloat($(this).find('LATITUDE').text());
        var long = parseFloat($(this).find('LONGITUDE').text());

        var marker = new GMarker(new GLatLng(lat,long), { 
            draggable: false, 
            title: ($(this).find('COMPANY_NAME').text()), 
            icon: redicon,
            disableAutoPan: true,
            supressMapPan: true
        });

        var html = {some stuff for the info window}
                    GEvent.addListener(marker, 'mouseover', function() {
            // When clicked, open an Info Window
                        marker.openInfoWindowHtml(html);

                    });
        storemap.addOverlay(marker);
        //update the store table with the information


           var storeList = {html markup for table};


           //append the current row to the installer table
        $('#storeList').append(storeList);

    });
    $('#storeList').trigger("update");

    }
});
});

}

Answer 1

I have solved the conundrum. The error was actually in my click trigger event being located within the function call. I moved this to the top of my script tag and it now functions as expected. I do not know why having the click event trigger inside the called function only works for every other call. Any guesses would be appreciated.