PDA

View Full Version : Google Maps



thomashoffmann
9 May 2011, 12:23 AM
A Google Map implementation:

It fires an event "maploaded" if all nessessary files are loaded.



/**
* @class Ext.tualo.map.GoogleMap
* @extends Ext.panel.Panel
*/

Ext.define('Ext.tualo.map.GoogleMap', {
extend: 'Ext.panel.Panel',
layout: 'anchor',
protocol: 'http',
constructor: function(config) {
config = config || {};
Ext.apply(this,config);
this.identifier = Ext.id();
this.items = [new Ext.panel.Panel({
border: false,
anchor: '100% 100%',
layout: 'anchor',
html: '<div id="map-'+this.identifier+'">Placeholder for Googlemap</div>'
})];
this.layout = 'anchor';
this.callParent([config]);
this.initMap(this.initMapComplete);
this.on('resize', this.mapResize,this)
},

/**
* Getting the Google Map Object.
*/
getMap: function(){
return this.map;
},
/**
* Setting a marker on the map.
* @param {google.maps.LatLng} location The GeoLocation Object.
* @param {Object} options additional Markeroptions.
*/
setMarker: function(location,options){
var p={
map: this.map,
position: location
};
Ext.applyIf(p,options)
var marker = new google.maps.Marker(p);
},
/**
* Move the MapView to the location.
* @param {google.maps.LatLng} location The GeoLocation Object.
*/
moveToLocation: function(location){
this.map.panTo(location);
},
/**
* Find a Location by address.
* @param {String} address Address.
* @param {function} callback
*/
findAddress: function(address,callback,scope){
this.geocoder.geocode( { 'address': address}, this.markAddressCallback(callback,scope));
},
markAddressCallback: function(me,scope){
return function(result,status){

if (status == google.maps.GeocoderStatus.ERROR){
// alert("ERROR "+result);
}
if (status == google.maps.GeocoderStatus.INVALID_REQUEST){
// alert("INVALID_REQUEST "+result);
}
if (status == google.maps.GeocoderStatus.OK){

if (typeof me=='function'){
Ext.callback(me,scope,[result[0].geometry.location,result],1);
}else{
//alert("OK "+result);
}
}
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT){
// alert("OVER_QUERY_LIMIT "+result);
}
if (status == google.maps.GeocoderStatus.REQUEST_DENIED){
// alert("REQUEST_DENIED "+result);
}
if (status == google.maps.GeocoderStatus.UNKNOWN_ERROR){
// alert("UNKNOWN_ERROR "+result);
}
if (status == google.maps.GeocoderStatus.ZERO_RESULTS){
// alert("ZERO_RESULTS "+result);

}
}},
mapResize: function(p,width,height){
if (typeof this.map!='undefined'){
this.map.getDiv().style.height = height+'px';
this.map.getDiv().style.width = width+'px';
}
},
initMapComplete: function(){
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById('map-'+this.identifier+''), myOptions);
this.geocoder = new google.maps.Geocoder();
document.getElementById('map-'+this.identifier+'').style.height=this.getHeight()+'px';
document.getElementById('map-'+this.identifier+'').style.width=this.getWidth()+'px';
this.fireEvent('maploaded',this);
}
,
initMap: function(cb){
this._cb_xid = "gcallback_"+(++Ext.idSeed);
this.cb = cb;
window[this._cb_xid]=function(scope){
return function(){
delete window[scope._cb_xid];
scope.cb.call(scope);
}
}(this);
this.injectScriptElement(this.protocol+"://maps.google.com/maps/api/js?sensor=false&region=DE&callback="+this._cb_xid,function(){ // Callback modification
},function(){
alert('Can not load Google Maps');
},this);
},
injectScriptElement: function(url, onLoad, onError, scope) {
this.documentHead = (document.head || document.getElementsByTagName('head')[0]);
var script = document.createElement('script'),
me = this,
onLoadFn = function() {
me.cleanupScriptElement(script);
onLoad.call(scope);
},
onErrorFn = function() {
me.cleanupScriptElement(script);
onError.call(scope);
};

script.type = 'text/javascript';
script.src = url;
script.onload = onLoadFn;
script.onerror = onErrorFn;
script.onreadystatechange = function() {
if (this.readyState === 'loaded' || this.readyState === 'complete') {
onLoadFn();
}
};

this.documentHead.appendChild(script);

return script;
},
cleanupScriptElement: function(script) {
script.onload = null;
script.onreadystatechange = null;
script.onerror = null;

return this;
}
})