jQuery gmap problem

how to update the marker from input field on load and fix drag event

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<p><b>Click on the map to add the location</b></p><br/> 
<div id="map" style="height:400px;width:400px;"></div>
<p>
<!-- 
The Original code had PHP variables like so :
    
<label>Latitude<input name="LatTxt" id="LatTxt" type="text" value="' .$lattxt . '" /></label>
<label>Longitute<input name="LonTxt" id="LonTxt" type="text" value="' .$lontxt . '" /></label> 
    
Obviously, here I can not simulate it - so I just put a static variable into the value of the input box 
    -->
<label>Latitude<input name="LatTxt" id="LatTxt" type="text" value="-42.972501365178665" /></label>
<label>Longitute<input name="LonTxt" id="LonTxt" type="text" value="172.44140637500004" /></label>
    <br/>
  
</p>
<input id="address" class="text" type="text" name="address" value="Rome, Italy">
<input onclick="codeAddress();" class="button-primary" id="geocode" value="DRAW" />

CSS

.button-primary {
 -moz-box-sizing: content-box;
    border-radius: 11px 11px 11px 11px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    font-size: 12px !important;
    line-height: 13px;
    padding: 3px 8px;
    text-decoration: none;}

JavaScript

var map;
var markersArray = []; // to be used later to clear overlay array


 
jQuery(document).ready(function() {
var marker;
var lat = parseFloat(jQuery('#LatTxt').val());
var lon = parseFloat(jQuery('#LonTxt').val());
var myLatlng = new google.maps.LatLng(lat, lon);
var myOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(jQuery('[id^=map]')[0], myOptions);
    placeMarker(myLatlng);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });
    
    // Get by address
     function codeAddress() {
        geocoder = new google.maps.Geocoder();
        var address = document.getElementById("address").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                 map.setCenter(results[0].geometry.location);
                 if (marker) {
                    marker.setPosition(results[0].geometry.location);
                }
              } else {
                alert("Geocode was not successful for the following reason: " + status);
              }
           }
   );
}
    //Function to extract longitude

    function placeMarker(location) {
        if (marker) {
            marker.setPosition(location);
        } else {
            marker = new google.maps.Marker({
                position: location,
                draggable: true,
                title: 'Drag me',
                map: map
            });
            markersArray.push(marker); // to be used later to clear overlay array
        }
    }
// adding drag event
google.maps.event.addListener(marker, 'dragend', function(event) { updatelonlat(); });

    // Removes the overlays from the map, but keeps them in the array

    function clearOverlays() {
        if (markersArray) {
            for (var i = 0, length = markersArray.length; i < length; i++) {
            ...