Google Maps: setZoom() malfunction when triggered by geocoder

Question

I've been using the site for a long long time and it's been very helpful to me. Today for the first time I've come across a problem I couldn't find a solution for using the search-function.

Here it is: I have a big application around google maps and it is integral for it that I can zoom in the map to the absolute maximum. For most urban locations this maximum zoom level is 21, but when I execute setZoom(21) or setOptions({zoom: 21}) on the google maps object, it only goes to zoom level 19. Only when I execute setZoom(21) again for the same location and after a short wait does google maps actually go to the desired zoom level of 21. This issue only occurs when the zooming is executed from a function triggered by a geocoding event. If for example I do setZoom

Below you can see a stripped down version of the code and a JSFiddle plus a couple of reproduction steps to see the problem.

Please take a look at this JSFiddle: http://jsfiddle.net/mYUuR/4/ Steps to reproduce the strange behaviour:

1. Run the fiddle and wait for the map to load.
2. Open your console
3. Press Search at the top left. (You will see the map zooming in and "Current Zoom Level: 19" logged in your console.
4. Press Search a second time. (The map zooms in further and "Current Zoom Level: 21" will be logged to your console.

Here is my javascript:

var mapObj = initializeMap()
var geocoder;

function initializeMap() 
{

    geocoder = new google.maps.Geocoder();
    searchInput = document.getElementById("searchField");
    searchInput.focus();
    var searchButton = document.getElementById("searchButton");
    searchButton.addEventListener("click", codeAddress);


    var mapOptions = 
    {
        center: new google.maps.LatLng(53.70854553884514, 10.105501748621464),
        zoom: 3,            
        panControl: true,
        zoomControl: true,
        mapTypeControl: true,
        scaleControl: true,
        streetViewControl: true,
        overviewMapControl: true,
        draggable: true,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    gMapObj = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    return gMapObj;
}
function codeAddress(e) {
    e.preventDefault();
    var address = searchInput.value;
    geocoder.geocode({
        "address": address
    },

    function (results, status) 
    {
        if (status == google.maps.GeocoderStatus.OK) 
        {
            google.maps.event.addListenerOnce(mapObj, "center_changed", function (e) 
            {
                mapObj.setZoom(21);                
                console.log("Current Zoom Level: " + mapObj.getZoom());
            });
            mapObj.setCenter(results[0].geometry.location);
        } else {
            alert("Search was not successful for the following reason: " + status);
        }
    })

}

Here is my HTML:

<div id="NavigationBar">
    <form>
        <input id="searchField" type="textbox" value="Hamburg" placeholder="Enter your address."></input>
        <input id="searchButton" type="submit" value="Search">
    </form>
</div>
<div id="PageContents">
    <div id="map-canvas"></div>
</div>

And here is my CSS:

#searchButton
{
    background-color: #FFF;
}

html { height: 100% }
body 
{ 
    height: 100%; margin: 0; padding: 0;
    position: relative;
}
#NavigationBar
{
    height: 5%;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #AAA;
}

#map-canvas
{
    height: 100%;
    width: 100%;
}

#PageContents
{
    position: relative;
    height: 95%;
    width: 100%;
}

Things I've already tried:

• Executing a second zoom directly after the first.
• Executing a second zoom once the first zoom is done using an eventListener listening for "zoom_changed".

Code Example for that:

google.maps.event.addListenerOnce(mapObj, "zoom_changed", function(e){mapObj.setZoom(21)});

I would very much appreciate any suggestions or thoughts.