Sencha Touch - Google Map and centering a Marker

Question

Is it just me or does the google maps api seem to be on the quirky side? Trying to simply show a marker for some coordinates, and then center the screen on the marker.

In my controller fired from a view:

onGoogleMapRender: function (googleMap) {

        var long = record.get("Longitude");
        var lat = record.get("Latitude");

        var pos = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            position: pos
        });

        marker.setMap(googleMap);
        googleMap.setCenter(marker.getPosition());
        googleMap.setZoom(14);

    }

It seems to place the marker in the center of the screen but when I return and show the same screen the 2nd, or 3rd time, the marker is added but this time the marker doesn't get centered.

Has anyone got this working correctly? I don't suppose it is any ST2 related but more a quirk of the google api.

Answer 1

You have to center it with a small timeout, than it will work fine.

setTimeout(function() {
    googleMap.panTo(marker.getPosition());
}, 100);

I don't know if it's a bug, but this way is shown in the showcase.