You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
3 years ago
|
/**
|
||
|
|
* @class Ext.ux.GMapPanel
|
||
|
|
* @extends Ext.Panel
|
||
|
|
* @author Shea Frederick
|
||
|
|
*/
|
||
|
|
Ext.define('Ext.ux.GMapPanel', {
|
||
|
|
extend: 'Ext.panel.Panel',
|
||
|
|
|
||
|
|
alias: 'widget.gmappanel',
|
||
|
|
|
||
|
|
requires: ['Ext.window.MessageBox'],
|
||
|
|
|
||
|
|
initComponent : function(){
|
||
|
|
Ext.applyIf(this,{
|
||
|
|
plain: true,
|
||
|
|
gmapType: 'map',
|
||
|
|
border: false
|
||
|
|
});
|
||
|
|
|
||
|
|
this.callParent();
|
||
|
|
},
|
||
|
|
|
||
|
|
afterFirstLayout : function(){
|
||
|
|
var center = this.center;
|
||
|
|
this.callParent();
|
||
|
|
|
||
|
|
if (center) {
|
||
|
|
if (center.geoCodeAddr) {
|
||
|
|
this.lookupCode(center.geoCodeAddr, center.marker);
|
||
|
|
} else {
|
||
|
|
this.createMap(center);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
Ext.Error.raise('center is required');
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
createMap: function(center, marker) {
|
||
|
|
options = Ext.apply({}, this.mapOptions);
|
||
|
|
options = Ext.applyIf(options, {
|
||
|
|
zoom: 14,
|
||
|
|
center: center,
|
||
|
|
mapTypeId: google.maps.MapTypeId.HYBRID
|
||
|
|
});
|
||
|
|
this.gmap = new google.maps.Map(this.body.dom, options);
|
||
|
|
if (marker) {
|
||
|
|
this.addMarker(Ext.applyIf(marker, {
|
||
|
|
position: center
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
Ext.each(this.markers, this.addMarker, this);
|
||
|
|
},
|
||
|
|
|
||
|
|
addMarker: function(marker) {
|
||
|
|
marker = Ext.apply({
|
||
|
|
map: this.gmap
|
||
|
|
}, marker);
|
||
|
|
|
||
|
|
if (!marker.position) {
|
||
|
|
marker.position = new google.maps.LatLng(marker.lat, marker.lng);
|
||
|
|
}
|
||
|
|
var o = new google.maps.Marker(marker);
|
||
|
|
Ext.Object.each(marker.listeners, function(name, fn){
|
||
|
|
google.maps.event.addListener(o, name, fn);
|
||
|
|
});
|
||
|
|
return o;
|
||
|
|
},
|
||
|
|
|
||
|
|
lookupCode : function(addr, marker) {
|
||
|
|
this.geocoder = new google.maps.Geocoder();
|
||
|
|
this.geocoder.geocode({
|
||
|
|
address: addr
|
||
|
|
}, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
|
||
|
|
},
|
||
|
|
|
||
|
|
onLookupComplete: function(data, response, marker){
|
||
|
|
if (response != 'OK') {
|
||
|
|
Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.createMap(data[0].geometry.location, marker);
|
||
|
|
},
|
||
|
|
|
||
|
|
afterComponentLayout : function(w, h){
|
||
|
|
this.callParent(arguments);
|
||
|
|
this.redraw();
|
||
|
|
},
|
||
|
|
|
||
|
|
redraw: function(){
|
||
|
|
var map = this.gmap;
|
||
|
|
if (map) {
|
||
|
|
google.maps.event.trigger(map, 'resize');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|