/******************************************* Google Map Class ********************************************/ var googleMapHotelObj = new Class({ ///////////////////////////////////////////////// Options ///////////////////////////////////////////////// options: { //onReady: $empty, showNavigationOptions:true, showGoogleOptions:true, zoomLevel:9, lat:'32.736462', lng:'-16.97937', moduleclass_sfx:'', language:'en', view:0, type:0, path:'', name:'' }, /////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////// Constructor /////////////////////////////////////////////// initialize:function(id,options) { /*############################################# properties ##############################################*/ var that = this; //holds the instance this.id = id; //holds the module number this.setOptions(options); //sets the options //adds the instance to the cache array googleMapHotelObjCache.addInstances(this); this.mapDiv = null; //holds the map div object this.mapDivWrapper = null; //holds the map div wrapper object or the background div object this.mapInnerWrapper = null; //holds the wrapper object for the map div and header div this.headerDiv = null; //holds the header div object this.imageDiv = null; //holds the close image div object this.googleMap=null; //holds the google map object this.innerWrapperHeight = 625; /*#######################################################################################################*/ /*############################################### methods ###############################################*/ //initialize the google map this.initGoogleMap = function(obj) { //create the map div obj.mapDiv = new Element('div',{'id':'hotelmap_v'+obj.id,'class':'hotelmap'+obj.options.moduleclass_sfx}); obj.mapDivWrapper = $("hotelmapwrapper_v"+obj.id); //get the map div wrapper //loads the google map obj.start(); }; //loads the google map this.start = function() { //Detects if the google map will be embebed or a popup if(this.options.type==0) this.initPopup(); //inicializes the popup else this.mapDiv.inject(this.mapDivWrapper); //puts the map div inside the div wrapper this.googleMap = new GMap2(this.mapDiv); //loads the google map if(this.options.showNavigationOptions) this.googleMap.addControl(new GLargeMapControl()); //shows the google navigation toolbar if(this.options.showGoogleOptions) this.googleMap.addControl(new GMapTypeControl()); //shows the google option toolbar //verifies if exist the coordenates if(this.options.lat!='' && this.options.lng!='') { var marker = this.createMarker(); //creates the marker this.googleMap.addOverlay(marker); //puts the marker into the google map } else { this.options.lat = '32.736462'; //sets the default latitude this.options.lng = '-16.97937'; //sets the default longityde this.options.zoomLevel = 9; //sets the default zoom } if(this.options.type==1) that.googleMap.setCenter(new GLatLng(that.options.lat,that.options.lng), that.options.zoomLevel); //sets the initial point of the google map switch(this.options.view) { case 1: this.googleMap.setMapType(G_SATELLITE_MAP); break; case 2: this.googleMap.setMapType(G_HYBRID_MAP); break; default: this.googleMap.setMapType(G_NORMAL_MAP); } this.fireEvent('onReady', this.googleMap); //fires all the events onReady }; //creates the marker this.createMarker = function() { //creates a marker icon var newicon = new GIcon(); newicon.image = this.options.path+'images/hotel.png'; newicon.iconSize = new GSize(24, 24); newicon.shadowSize = new GSize(22, 20); newicon.iconAnchor = new GPoint(12, 24); var point = new GLatLng(this.options.lat,this.options.lng); //creates the marker var marker = new GMarker(point,{"icon":newicon, "title":this.options.name}); GEvent.addListener(marker, "dblclick", function() { that.googleMap.zoomIn(point,true); }); return marker; //returns the marker }; //inicializes the popup this.initPopup = function() { //creates the header div this.headerDiv = new Element('div',{'id':'hotelmapheader_v'+this.id,'class':'hotelmapheader'+this.options.moduleclass_sfx}); this.headerDiv.innerHTML = '  '+this.options.name; this.headerDiv.setStyles({ position:"relative", height:25, lineHeight:25, width:600, margin:"0 auto", border:"1px solid #ffffff", backgroundColor:"#000000", color:"#ffffff" }); //creates the close image div this.imageDiv = new Element('div',{'id':'hotelmapimage_v'+this.id,'class':'hotelmapimage'+this.options.moduleclass_sfx}); this.imageDiv.setStyles({ position:"absolute", height:25, width:25, right:0, top:0, cursor:'pointer', background:"url("+this.options.path+"images/close.png) no-repeat center center" }); //creates the div wrapper for the map div and header div this.mapInnerWrapper = new Element('div',{'id':'hotelmapinnerwrapper_v'+this.id,'class':'hotelmapinnerwrapper'+this.options.moduleclass_sfx}); this.mapInnerWrapper.setStyles({ position:"absolute", width:"100%", height:0, overflow:'hidden' }); //sets the style for the background div this.mapDivWrapper.setStyles({ position:"absolute", width:"100%", backgroundColor:"#000000", display:"none", opacity:'0.8' }); //sets the style for the google map div this.mapDiv.setStyles({ position:"relative", height:400, width:600, margin:"0 auto", border:"1px solid #ffffff" }); this.imageDiv.inject(this.headerDiv); //puts the close image div inside the header div this.headerDiv.inject(this.mapInnerWrapper); //puts the header div inside the inner wrapper div this.mapDiv.inject(this.mapInnerWrapper); //puts the map div inside the inner wrapper div this.mapInnerWrapper.inject(this.mapDivWrapper.getParent()); //puts the inner wrapper div at the same level of the background div this.imageDiv.addEvent('click',that.hide); //adds the close event to the close image div this.mapDivWrapper.addEvent('click',that.hide); //adds the close event to the background div }; //shows the popup window this.show = function() { if(!this.mapInnerWrapper || !this.googleMap) return; that.googleMap.setCenter(new GLatLng(that.options.lat,that.options.lng), that.options.zoomLevel); //centers the google map that.updateBackground(true); //detects if the scrool changes //shows the popup window that.mapDivWrapper.setStyle('display', 'block'); that.update(); }; //hides the popup window this.hide = function() { that.updateBackground(false); //don't detect if the scrool changes //hides the popup window that.mapDivWrapper.setStyle('display', 'none'); that.mapInnerWrapper.setStyle('height', 0); }; //updates the position of the background div and the google map wrapper div this.update = function() { that.mapDivWrapper.setStyles({top: window.getScrollTop(), height: window.getHeight()}); that.mapInnerWrapper.setStyles({top:window.getScrollTop()+20, height:that.innerWrapperHeight}); }; //updates the position of the background div and the google map wrapper div when the scroll changes this.updateBackground = function(open) { var fn = open ? "addEvent" : "removeEvent"; window[fn]("scroll", that.update)[fn]("resize", that.update); }; /*#######################################################################################################*/ } ///////////////////////////////////////////////////////////////////////////////////////////////////////////// }); googleMapHotelObj.implement(new Events, new Options); /*********************************************************************************************************/ /*************************************** Google Map Cache Object *****************************************/ var googleMapHotelObjCache = { instances:new Array(), //holds the instances //adds an instance addInstances:function(obj){ this.instances.push(obj); }, //inicialize all instances loadInstances:function(){ for (var i=0; i