vinylfox / extjs.ux.gmappanel Goto Github PK
View Code? Open in Web Editor NEWAn ExtJS Panel that displays a Google Map using the Google Maps API
Home Page: http://www.vinylfox.com
An ExtJS Panel that displays a Google Map using the Google Maps API
Home Page: http://www.vinylfox.com
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)
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 !
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
Under what license is ExtJS.ux.GMapPanel available?
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);
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.
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.
Not all examples are linked to the same extjs folder. It would be great if every example links to an extjs-folder.
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!
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.
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
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
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.
:)
I was using Ext.data.Store to load markers, however, I found out that 'apiready' was never fired.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.