Question

I have a select box that when I select a country the map gets updated.

Everything works fine, but I want to eliminate the first event (clicking on the select box before the actual select).

var geocoder;
var mapOptions;
var map;

function new_initialize() {
    geocoder = new google.maps.Geocoder();
    mapOptions = { center: new google.maps.LatLng(0, 0), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var myCountry = document.getElementById('country');
    google.maps.event.addDomListener(myCountry, 'click', function() {
        // get the value of the select box #country and set the map center to this
        codeAddress(this.value);
    });         

}
google.maps.event.addDomListener(window, 'load', new_initialize);

function codeAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

Answer 1

I’d say in your event handler, just do a check on the value, and only call codeAddress() if there is a value (assuming your first has an empty value attribute)

var myCountry = document.getElementById('country');
google.maps.event.addDomListener(myCountry, 'click', function() {
    if (this.value != "") {
            // get the value of the select box #country and set the map center to this
            codeAddress(this.value);
    }
});