jQuery flow of events

In pseudocode, here's what I want to do:

1. Add a bunch of markers to a Google Map
2. Add a click listener to each marker - the listener opens a jQuery Mobile dialog page
3. Once the dialog page is live (important for layout purposes), make an Ajax call and set the src attribute of an img tag, using an ID attached to the marker.

I'm finding managing the flow of events a bit difficult, though.

// S开发者_JS百科et 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 where I'm having the issue is at http://cyclestreets.darkgreener.com/location/ (scroll to a London, UK location to see some markers)

Thanks for your help.

Figured it out: set a global variables to set v.id on marker click, and then have a global handler for $('#photo').live which references the global variable.