google maps javascript

I have a page with an initial google map (of a city) and a combobox. The user can pick a location by dragging a marker on the map, and then this value (lang, long) is saved to a hidden field and passed to the server. The combo however list some city areas. When a user selects an area, the google map is changed: the city map dissapears and the map of the selected area is displayed. This is done via getJSON, and it all works fine.

My problem is how to enable this second map, the area map, with the same functionality (update the position of the draggable marker). I understand that the listeners are initially bound to the initial map, I just don't know enough javascript to understand where to put these functions to enable the functionality on the new maps, maybe something with jquery live?

I found great help in this answer but it doesn't solve my problem.

The code is the following

<script type="text/javascript" src="/site_media/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

$(function() {

$("#id_area").change(function() {

    var url = '/areageo/'+this.value;

    $.getJSON(url, function(data) {

        if (data.lat){

            $('#mapCanvas').empty();
            // map options
            var options = {
                   zoom: 14,
                   center: new google.maps.LatLng(data.lat, data.lon),
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 };

                 // Creating the map
            var map = new google.maps.Map(document.getElementById('mapCanvas'), options);

                 // Adding a marker to the map
            var marker = new google.maps.Marker({
                   position: new google.maps.LatLng(data.lat, data.lon),
                   map: map,
                   title: 'Some title',
                   draggable: true,
                      });
            }

                 });  //getJSON end function

    });  //id_area change end function

});


         var geocoder = new google.maps.Geocoder();
         function geocodePosition(pos) {
           geocoder.geocode({
             latLng: pos
           }, function(responses) {
             if (responses && responses.length > 0) {
               updateMarkerAddress(responses[0].formatted_address);
             } else {
               updateMarkerAddress('Cannot determine address at this location.');
             }
           });
         }
         function updateMarkerStatus(str) {
           document.getElementById('markerStatus').innerHTML = str;
         }
         function updateMarkerPosition(latLng) {
           document.getElementById('info').innerHTML = [
             latLng.lat(),
             latLng.lng()
           ].join(', ');

           id_lat.value = [
             latLng.lat()];
           id_lon.value = [
             latLng.lng()];
         }

         function updateMarkerAddress(str) {
           document.getElementById('address').innerHTML = str;
         }

        // initial setup
         function initialize() {
           var latLng = new google.maps.LatLng(44.77184334415235, 20.55164378320319); // initial map position
           var map = new google.maps.Map(document.getElementById('mapCanvas'), {
             zoom: 12, // initial zoom
             center: latLng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
           });

           var marker = new google.maps.Marker({
             position: latLng,
             title: 'Point A',
             map: map,
             draggable: true,

           });

           // Update current position info.
           updateMarkerPosition(latLng);
           geocodePosition(latLng);

           // Add dragging event listeners.
           google.maps.event.addListener(marker, 'dragstart', function() {
             updateMarkerAddress('Dragging...');
           });

           google.maps.event.addListener(marker, 'drag', function() {
             updateMarkerStatus('Dragging...');
             updateMarkerPosition(marker.getPosition());
           });

           google.maps.event.addListener(marker, 'dragend', function() {
             updateMarkerStatus('Drag ended');
             geocodePosition(marker.getPosition());
           });
         }


         // Onload handler to fire off the app.
         google.maps.event.addDomListener(window, 'load', initialize);
         </script>