text box value change update marker on Google map

[shahzad429]

I have Google map using Google map API v3. what i have is a Google map in accordion which user can click and place a marker and value of lat & lon fill two text boxes on top.

 

this part is working fine with below script. but what i want now as text boxes is filled with lat & lon if user change value of lat or lon in text box marker need to change accordingly.

 

var map = null;
function initialize() {
var myLatlng = new google.maps.LatLng(25.263327,55.329895);
    var myOptions = {
        zoom: 10,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker;

function placeMarker(location) {
    if ( marker ) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
        position: location,
        map: map
        });
        }
    }

google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
    document.getElementById("latFld").value = event.latLng.lat();
    document.getElementById("lngFld").value = event.latLng.lng();
});


  }

$(document).ready(function() {

$("#accordion").bind('accordionchange', function(event, ui) {
    if (ui.newContent.attr('id') == 'tabThree' && !map)
    {
        map = initialize();
    }
    });
    });

[haku]

You'll need to add an 'onblur' listener to the textboxes, and re-calculate when the values are changed. However, as onblur doesn't kick in until the textfield has been left, you may want to instead add a button that the user can click to trigger the recalculation.