vinylfox / extjs.ux.gmappanel

An ExtJS Panel that displays a Google Map using the Google Maps API

Google Maps Panel¶ ↑

This is a panel that displays a Google Map.

Compatibility¶ ↑

There are versions of this extension that work with Google Maps V2 or V3, along with versions that are compatible with ExtJS 3 or 4

• Ext.ux.GMapPanel.js - Google Maps V2 & ExtJS 3

• Ext.ux.GMapPanel3.js - Google Maps V3 & ExtJS 3

• Ext.ux.GMapPanelStatic.js - Google Static Maps & ExtJS 3/Sencha Touch (experimental)

• GMapPanel3.js - Google Maps V3 & ExtJS 4

• GMapPanelStatic.js - Google Static Maps & ExtJS 4 (experimental)

Examples for ExtJS 3.x¶ ↑

• Tabs - ExtJS.ux.GMapPanel/tree/master/examples/tabs - Google Maps V3

• Advanced Re-center Map - ExtJS.ux.GMapPanel/tree/master/examples/advanced - Google Maps V3

• Charts - ExtJS.ux.GMapPanel/tree/master/examples/charts - Google Maps V3

• Full Screen - ExtJS.ux.GMapPanel/tree/master/examples/fullscreen - Google Maps V3

• Window Basic - ExtJS.ux.GMapPanel/tree/master/examples/window - Google Maps V2

• Sky Map - ExtJS.ux.GMapPanel/tree/master/examples/advanced - Google Maps V2

Examples for ExtJS 4.x¶ ↑

• Window Basic Ext4 - ExtJS.ux.GMapPanel/tree/master/examples/window - Google Maps V3

• Window Static - ExtJS.ux.GMapPanel/tree/master/examples/window - Google Static Maps

Examples for Sencha Touch¶ ↑

• None yet - coming soon

extjs.ux.gmappanel's Issues

License missing

Under what license is ExtJS.ux.GMapPanel available?

getMap() is undefined

I have migrated from Google Map api v2 to v3. When I try to call getMap() on gmaappanel to pass to markercluster, I am not getting Map object. I have updated GMapPanel3.js and v3 url. If I don't do clustering of marker than it works fine as I am n't extracting Map object from GmapPanel. Code is as below.

Ext.create('Ext.Viewport', {
id:'viewport',
title: 'Site Register',
layout: 'border',
items: [
{
region: 'west',
title: '',
id:'searchPanel',
split:true,
width:600,
autoScroll:true,
items:[
{
xtype :'panel',
id :'inboxListPanel',
emptyText: 'No records',
title : 'Inbox',
collapsible: true,
draggable: true,
style :'text-align:center',
items : [grid]
}
]
},{
region: 'center',
id: 'mainPanel',
deferredRender: false,
items: [
Ext.create("Ext.tab.Panel", {
region: 'center',
id:'mapPanel',
width:'100%',
activeTab: 0,
items: [{
xtype: 'gmappanel',
title: 'Map',
id : 'gSiteMap',
width:900,
height:850,
zoomLevel: 5,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
geoCodeAddr: '1600 Penn St, Washington DC, DC',
marker:{ title: 'HQ, Washington DC DC'}
}
}]
}]
});

var gmp = Ext.getCmp('gSiteMap');
var gm = gmp.getMap(); <----------------- gm is undefined !

Same ExtJS-Folder/Settings for all examples

Not all examples are linked to the same extjs folder. It would be great if every example links to an extjs-folder.

Google returns 400 Bad Request for StaticMapService.GetMapImage since today

Since today, Google returns 400 Bad Request for StaticMapService.GetMapImage.

As the regular google examples work perfectly on my box, I assume that Google has changed something within their API, causing incompatibilities with ExtJS.ux.GMapPanel3 (haven't tested with v2 so far). I am using the recenter-map example to test, with the stock GMapPanel3 from your repository (without my changes).

I noticed that on the StaticMapService.GetMapImage, there are parameters sent as such:

1iNaN:
2iNaN:

If using the google examples, there's no single call to StaticMapService. Not sure where this comes from.

SetCenter with lat, long does not bind listeners

If you use setCenter with geoCodeAddr, the call to addMarker is

this.geoCodeLookup(this.setCenter.geoCodeAddr, this.setCenter.marker, false, true, this.setCenter.listeners);

but if you use lat and long

this.addMarker(point, this.setCenter.marker, this.setCenter.marker.clear); not passing the listeners...

that call should be:

this.addMarker(point, this.setCenter.marker, this.setCenter.marker.clear, true, this.setCenter.listeners);

Improve createInfoWindow anchor

if you pass the marker as a parameter when opening an infowindow, it position is calculated automatically AND if you later setposition() to the marker moving it, the infowindow moves with the marker.

infoWindow.open(me.getMap(),marker);

thanks

addOptions not working

Hi,

I'm using Ext.ux.GMapPanel3.js + ExtJS 4.0.2a.

Function "addOptions" (line 571) in Ext.ux.GMapPanel3.js is doing nothing. I had to change it to:

addOptions : function(){        
    this.getMap().setOptions(this.mapConfOpts);
}

and then I can set the MapOptions like this:

mapConfOpts:  { scrollwheel: false, disableDoubleClickZoom: true, draggable: false, streetViewControl: false, disableDefaultUI: true } 

Thanks in advance.

'apiready' is never fired.

I was using Ext.data.Store to load markers, however, I found out that 'apiready' was never fired.

Add show / hide polylines

hi, VinylFox

I needed to be able to hide and show polylines besides markers...
so I added two methods to the class.

I have code ready if you want.
(for ext3 with map v3)

.setCenter cannot set the zoom level.

I see that most of the code of ext.ux.gmaps3.js uses:

<google.maps.Map>.setCenter() method.

Most of the times such method is called with 2 parameters:

1 the point where to center
2 and zoom level.

yet as you can see on docs
(http://code.google.com/intl/it-IT/apis/maps/documentation/javascript/reference.html#Map)

.setCenter uses just the first one.

to set the zoom .setZoom() should be used instead.

This is bug in inifluential... since everything works all right the same...
but it'd be really nice to being able to set the zoom...
now it's working just on map creation.

thank you!

"String.format not a function" - in Firefox 3.6.10

I didn't try with other "old" browsers but I wanted to report that (at line 692) String.format can't be recognized because of the lack of the ExtJS namespace.

Resolved by replacing String.format with Ext.String.format.

Set marker.title after geocodeLookup (GMapPanel3.js)

In line 701, when marker.title is not set.

marker.title = response.formatted_address;

You should replace with the following:

marker.title = response[0].formatted_address;

because Google's geocode returns an array.

:)

Activating the panel using "Tab" messes up the map

Hi,

I've got the GMapPanel within a form. If the user hits "tab" (e.g. from a textfield), the Map has an odd behaviour. It is hard to explain, the map stays the same, but the map's controls and the Google Logo shift up by about half the size of the map.

Or this is probably caused by the address change itself; I'm not sure, as it doesn't happen all the time.

Here's a small video to illustrate that behavior: http://www.youtube.com/watch?v=ZNFkvA6sEeA

Refactoring the API

Hi,

I'm working with GMapPanel3 for a few days now, and there are a few issues that came into my attention. The API seems to be tied to a specific behavior, e.g. if you call geoCodeLookup(), it always centers the map to the found address, with no or limited possibilities to do custom stuff. IMHO geoCodeLookup should simply lookup the given address, and calling a callback afterwards, instead of trying to center the map all the time, which is probably not what the developer needs.

I might refactor the API on my fork, but if you have suggestions or things that you want to have changed, we could work together on that.

cheers,
Timo