jQuery Combobox widget is very complex code. I don't recommend changing any of it unless you are a real pro. I use the ComboBox plug-in because it is much simpler to use with its options. You may want to look at it at:
http://jonathan.tang.name/code/jquery_comboboxIf you continue with the Combobox widget, I'd suggest you use a .change() function that triggers whenever the value of the input box changes. The trigger fires GMap and it updates. Here's code that I use, and maybe it can be a model for the things you want to do.
$("#yourInputBoxID").change(function() {
//setTimeout lets Autocomplete finish before gCity sets in IE8. W/o delay, gCity is sometimes a term fragment and Google tries to map it.
//setTimeout is needed for IE8 to get correct geocodes. FF and Chrome are faster and don't need it.
setTimeout(function() {
//if stateProvince and city are present
if ( $("#city3").val().length > 0 && $("#stateProvince").val().length > 0 ) {
var gCity = $("#city3").val() + ", " + $("#stateProvince").val() + ", " + $('input[name=country]:checked').val();
//alert("|" + gCity + "|");
//get coordinates of this city
//if no geocode object exists, create one
if (!geocoder) {
geocoder = new google.maps.Geocoder(); //create Geocoder object else use existing one from initializeMap() ?
}
//create a GeocoderRequest object
var geoCoderRequest = {'address': gCity}
//make a Geocoder request
geocoder.geocode( geoCoderRequest, function(results, status) {
//geocoder.geocode({"latLng": geoCoderRequest}, function(results, status) {
//check if status is OK
if ( status === google.maps.GeocoderStatus.OK) {
//alert("|" + results[0].geometry.location + "|"); //gets accurate latLng
//center existing map on location returned for this address
var revisedOptions = {
center: results[0].geometry.location, //map.setCenter(new google.maps.LatLng(results[0].geometry.location));
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), revisedOptions); //change to static map
//store city3 geocode
$("#city3Geocode").val( results[0].geometry.location );
//alert("|" + $("#city3Geocode").val() + "|city3Geocode");
} else {
alert( "Google Geocoder does not identify this city. Its error is " + status + ". Check your entry."); //test
}
});
} else {
return false; //no action if gCity is incomplete or undefined
}
}, 500); //anything after this point will execute before the setTimeout delay
}); // appendinging .change().trigger('blur') does not help and in jsfiddle it messes by triggering too early
