<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-ux-GMapPanel'>/**
|
</span> * @author Shea Frederick
|
*/
|
Ext.define('Ext.ux.GMapPanel', {
|
extend: 'Ext.panel.Panel',
|
|
alias: 'widget.gmappanel',
|
|
requires: ['Ext.window.MessageBox'],
|
|
<span id='Ext-ux-GMapPanel-method-initComponent'> initComponent : function(){
|
</span> Ext.applyIf(this,{
|
plain: true,
|
gmapType: 'map',
|
border: false
|
});
|
|
this.callParent();
|
},
|
|
<span id='Ext-ux-GMapPanel-method-afterFirstLayout'> afterFirstLayout : function(){
|
</span> 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');
|
}
|
|
},
|
|
<span id='Ext-ux-GMapPanel-method-createMap'> createMap: function(center, marker) {
|
</span> var 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);
|
this.fireEvent('mapready', this, this.gmap);
|
},
|
|
<span id='Ext-ux-GMapPanel-method-addMarker'> addMarker: function(marker) {
|
</span> 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;
|
},
|
|
<span id='Ext-ux-GMapPanel-method-lookupCode'> lookupCode : function(addr, marker) {
|
</span> this.geocoder = new google.maps.Geocoder();
|
this.geocoder.geocode({
|
address: addr
|
}, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
|
},
|
|
<span id='Ext-ux-GMapPanel-method-onLookupComplete'> onLookupComplete: function(data, response, marker){
|
</span> if (response != 'OK') {
|
Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
|
return;
|
}
|
this.createMap(data[0].geometry.location, marker);
|
},
|
|
<span id='Ext-ux-GMapPanel-method-afterComponentLayout'> afterComponentLayout : function(w, h){
|
</span> this.callParent(arguments);
|
this.redraw();
|
},
|
|
<span id='Ext-ux-GMapPanel-method-redraw'> redraw: function(){
|
</span> var map = this.gmap;
|
if (map) {
|
google.maps.event.trigger(map, 'resize');
|
}
|
}
|
|
});
|
</pre>
|
</body>
|
</html>
|