Question

I’m trying to figure out how well ExtJS and Google Maps play together. I’m playing with this example: http://dev.sencha.com/deploy/ext-4.0.0/examples/window/gmap.html

I get lost when I try to address the map. I want to be able to programatically make changes to the zoom level, draw polygons and put points on the map.

I’ve been playing, so my code isn’t the same as that in the example.

I’ve defined a form panel and I’ve embedded the map into it. I have a listener that waits for the map to be rendered:

listeners:{
            afterrender: {
                fn: setupWindow,
                scope: this
            }
        }

Then, inside setupWindow I have this:

gmap.setzoom(25);
mapBounds = new gmap.LatLngBounds(
                new gmap.LatLng(responseJson.minY, responseJson.minX),
                new gmap.LatLng(responseJson.maxY, responseJson.maxX)
                );

But it fails in there. What am I doing wrong?

Answer 1

Since you are calling gmap.setZoom(25) in the line before the problematic one – I assumed that gmap is an instance of GMap2 like so:

var gmap = new GMap2(...);

If that is indeed the case – then new gmap.LatLngBounds or new gmap.LatLng should fail, because neither is a function of map (unless you add it in your code).

What you perhaps should do instead is:

mapBounds = new GLatLngBounds(
                    new GLatLng(responseJson.minY, responseJson.minX),
                    new GLatLng(responseJson.maxY, responseJson.maxX)
                );

EDIT: to clarify my assumption – from the ExtJS example that you are trying to use it seems that you are trying to go with API V2.