JQuery event stream

Question

In pseudo code, here is what I want to do:

• Add a bunch of markers to your Google map.
• Add clicker for each marker - listener opens jQuery Mobile dialog
• When the dialog page is live (important for layout purposes), make an Ajax call and set the srctag attribute imgusing the identifier attached to the marker.

I find that managing the flow of events is a bit complicated.

// Set up value of HTML elements inside dialog
// Should call after the dialog is live,
// otherwise layout breaks horribly. 
function setUpPhoto(id) {
    // Cut for brevity: Ajax call to get URL.
    $('#photo-image').attr({ src: image_url  });
}
// Add a map marker and listeners
function addNewMarker(v) { 
    var map_marker = new google.maps.Marker({
       position: v.latlng,
       title: v.caption
    });
    map_marker.setMap(map); 
    // Add a click listener for each marker
    // This should show the dialog, and then set it up, using the appropriate ID.                           
    google.maps.event.addListener(map_marker, 'click', function() {
        // Show the dialog
        $.mobile.changePage($("#photo"), 'pop', false, true);
        // ISSUE - how to call this only after the dialog is live?
        setUpPhoto(v.id);
        // ... could attach it like this, but how to do for each marker?
        $('#photo').live('pageshow', function (event, ui) { 
            getIndividualPhoto(v.id, '');
    });
    });
 }
 $.each(data.marker, function(i,v) {
     addNewMarker(v);
 });           

This is simplified code - the actual page I am having the problem on is located at http://cyclestreets.darkgreener.com/location/ (scroll to the location in London and the UK to see some markers)

Thank you for your help.

Answer 1

: , v.id , $('# photo'). live, .