/* +----------------------------------------------------------------------+ | Touro_GoogleMaps is a google API widget for contact pages around touro.edu | see Touro_GoogleMaps.class.php for documentation +----------------------------------------------------------------------+ | author: thomas biegeleisen | last modified: feb 24 2008 +----------------------------------------------------------------------+ */ // for callback functions, we need a global variable var Touro_GoogleMaps_globalTemp = "Hello World"; /* +----------------------------------------------------------------------+ | main constructor | @param string id the unique id of the map | @param int currentSite the id of the Touro site to display onload | @param bool locations whether to display a locations window | @param bool open whether the locations window is open or not onload | @param string rootURL the rootURL of the directory | @param obj sites object containing names of sites for locations window | @param obj coords object containing coords of sites for locations window | @param obj locsites object containing html-formatted addresses of sites for locations window +----------------------------------------------------------------------+ */ Touro_GoogleMaps = function(id, currentSite, locations, open, rootURL, sites, coords, locsites, init) { this.id = id; this.currentSite = currentSite; this.locations = locations; this.open = open; this.rootURL = rootURL; this.sites = sites; this.coords = coords; this.locsites = locsites; this.init = init; // base properties/objects this.map; // gmap object this.mapDiv; // div containing above object this.mapBack; // div for "move back" link (hidden initially) this.mapContainer; // container for all map objects this.initialized = false; this.moveInitialized = false; this.baseIcon; this.markers = new Object; this.latlng = new Object; this.loc = new Object; this.window = window; // we need a reference from window back to the instantied class this.window.obj = this; if ( this.window.opera ) { // [TODO: opera 9 doesn't seem to fire when you resize...] // this.window.document.body.addEventListener("resize",this.setPositionFromListener,false); // this.window.opera.addEventListener("resize",this.setPositionFromListener,false); } else if ( this.window.attachEvent ) { this.window.attachEvent("onresize",this.setPositionFromListener); } else if ( this.window.addEventListener ) { this.window.addEventListener("resize",this.setPositionFromListener,false); } } /* +----------------------------------------------------------------------+ | callback function for listeners +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.setPositionFromListener = function() { this.obj.setPosition(this.obj); } /* +----------------------------------------------------------------------+ | repositions the map object if there's a change in window/document/frame dimensions | @param obj ref reference to the object instance | NOTE: this function is pseudo-global... the caller object isn't necessarily the instance, | so we have to use a reference (if you need to call the instance itself, just pass `this') +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.setPosition = function(ref) { // use a reference since this might be called by any object var coords = findPos(ref.mapDiv); coords[0] = parseInt(coords[0]) ; coords[1] = parseInt(coords[1]) ; if ( ref.loc['align'] == "bottom" ) { var arrowWidthPadding = ref.loc['arrowWidth'] + ref.loc['arrowPadding'] ; var arrowHeightPadding = ref.loc['arrowHeight'] + ref.loc['arrowPadding'] ; var closedTop = parseInt(coords[1] + (parseInt(getHeight(ref.mapDiv)) - ref.loc['height'] + ref.loc['linkHeight'] + arrowHeightPadding)); ref.loc['closedTop'] = closedTop ; // extra pixel is for border (not counted in element dimensions) ref.loc['openTop'] = closedTop - ref.loc['linkHeight'] + ref.loc['height'] - arrowHeightPadding - 1; // set coords ref.loc['div'].style.left = coords[0] + "px" ; if ( ref.loc['open'] ) { ref.loc['div'].style.top = ref.loc['openTop'] + "px" ; } else { ref.loc['div'].style.top = ref.loc['closedTop'] + "px" ; } } } /* +----------------------------------------------------------------------+ | initializes the map: assigns div objects to instance, creates initial | marker, icons, etc. +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.initialize = function() { this.mapDiv = document.getElementById(this.id + "_map") ; this.mapContainer = document.getElementById(this.id + "_container"); this.mapBack = document.getElementById(this.id + "_back"); // create icon this.baseIcon = new google.maps.Icon; this.baseIcon.image = this.rootURL + "/global/images/modules/google_maps/google_maps_touro.png" ; this.baseIcon.shadow = this.rootURL + "/global/images/modules/google_maps/google_maps_touro_shadow.png" ; this.baseIcon.shadowSize = new google.maps.Size(37,34); this.baseIcon.iconSize = new google.maps.Size(20,34); this.baseIcon.iconAnchor = new google.maps.Point(10,33); this.baseIcon.transparent = this.rootURL + "/global/images/modules/google_maps/google_maps_touro_transparent.png" ; this.baseIcon.infoWindowAnchor = new google.maps.Point(10,0); // create map object this.map = new google.maps.Map2(this.mapDiv) ; for ( i in this.sites ) { var temp_latlng = new google.maps.LatLng(this.coords[i].lat,this.coords[i].lng) ; if ( i == this.currentSite || i == 1 ) { this.map.setCenter(temp_latlng, 16) ; } var marker = this.createMarker(temp_latlng,i) ; this.markers[i] = marker; this.latlng[i] = temp_latlng; this.map.addOverlay(marker); if ( i == this.currentSite ) { marker.openInfoWindowHtml(this.sites[i]); } } this.map.addControl(new GLargeMapControl()); if ( this.locations ) { this.locationsInitialize() ; } this.mapDiv.map = this; // make google map object referenceable through div this.initialized = true; // TODO: integrate moving map with this class /* // correct width for border (TODO: border assumed to be 1px wide) var divSize = getWidth(this.mapDiv); this.mapDiv.style.width = (divSize-2) + "px" ; */ } /* +----------------------------------------------------------------------+ | initializes the locations window, and creates an iframe +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.locationsInitialize = function() { // layering var coords = findPos(this.mapDiv); this.mapDiv.style.zIndex = 1; coords[0] = parseInt(coords[0]) ; coords[1] = parseInt(coords[1]) ; this.loc['arrowPadding'] = 2 ; this.loc['arrowHeight'] = 4 ; this.loc['arrowWidth'] = 10; this.loc['linkHeight'] = 25; this.loc['width'] = parseInt(getWidth(this.mapDiv)) - 2; this.loc['height'] = 240; this.loc['align'] = "bottom"; this.loc['linktextClosed'] = "View Touro Locations around the country" ; this.loc['linktextOpen'] = "Click here to close this window" ; this.loc['div'] = document.getElementById(this.id + "_locations") ; this.loc['div'].style.display = "" ; this.loc['div'].style.width = this.loc['width'] + "px" ; this.loc['div'].style.height = this.loc['height'] + "px" ; this.loc['div'].style.borderWidth = "1px" ; this.loc['div'].style.borderStyle = "solid" ; this.loc['div'].style.borderColor = "#ccc"; this.loc['div'].style.backgroundColor = "#fff" ; this.loc['div'].style.position = "absolute" ; this.loc['div'].style.zIndex = parseInt(this.mapDiv.style.zIndex) - 1; // set html // dynamically grab css properties from permalink elements var html = "
\"Touro<\/td>
Touro Locations around the country<\/div>
Click on a location to view it on the map:<\/div><\/td><\/tr><\/table><\/div>
<\/div><\/div>" ; if ( this.loc['align'] == "bottom" ) { var arrowWidthPadding = this.loc['arrowWidth'] + this.loc['arrowPadding'] ; var arrowHeightPadding = this.loc['arrowHeight'] + this.loc['arrowPadding'] ; var closedTop = parseInt(coords[1] + (parseInt(getHeight(this.mapDiv)) - this.loc['height'] + this.loc['linkHeight'] + arrowHeightPadding)); this.loc['closedTop'] = closedTop ; // extra pixel is for border (not counted in element dimensions) this.loc['openTop'] = closedTop - this.loc['linkHeight'] + this.loc['height'] - arrowHeightPadding - 1; // set coords this.loc['div'].style.left = coords[0] + "px" ; var initialText; var initialArrow; if ( this.open ) { this.loc['div'].style.top = this.loc['openTop'] + "px" ; this.loc['open'] = true; initialText = this.loc['linktextOpen'] ; initialArrow = "top" ; } else { this.loc['div'].style.top = this.loc['closedTop'] + "px" ; this.loc['open'] = false; initialText = this.loc['linktextClosed'] ; initialArrow = "bottom" ; } this.loc['div'].innerHTML = "
" + html + "<\/div>
" + initialText + "<\/span><\/a><\/td><\/tr><\/table><\/div>
\"\"<\/a><\/td>\"\"<\/a><\/td>\"\"<\/a><\/td><\/tr><\/table><\/div>" ; } this.loc['easing'] = 0.3; this.loc['initialized'] = true; this.loc['targetTop'] ; this.loc['interval'] ; this.loc['moving'] = false; // now dump the locations var holder = document.getElementById(this.id + "_locations_iframe"); var iframe = new IFrame(holder); var hrefCSS = document.getElementById(this.id + "_toggle_link"); var hrefCSSFontFamily = getStyle(hrefCSS,"font-family"); var hrefCSSFontSize = getStyle(hrefCSS,"font-size"); var hrefCSSColor = getStyle(hrefCSS,"color"); var hrefCSSTextDecoration = getStyle(hrefCSS,"text-decoration"); // basic styles for iframe body iframe.doc.body.style.margin = "0"; iframe.doc.body.style.padding = "0"; iframe.id = "google_maps_locations_iframe_element"; var div = iframe.doc.createElement("div"); div.style.padding = "5px"; iframe.style.border = "0"; iframe.style.width = (this.loc['width'] - 30) + "px"; iframe.style.borderWidth = "1px 0 1px 1px" ; iframe.style.borderColor = "#999"; iframe.style.borderStyle = "solid" ; for ( i in this.locsites ) { div.innerHTML += "
" + this.locsites[i] + "<\/div>" ; } iframe.doc.body.appendChild(div); for ( i in this.locsites ) { var thisDiv = iframe.doc.getElementById('iframe_location_href_' + i) ; thisDiv.style.fontFamily = hrefCSSFontFamily; thisDiv.style.fontSize = hrefCSSFontSize; thisDiv.style.color = hrefCSSColor; thisDiv.style.textDecoration = hrefCSSTextDecoration; } if ( !this.loc['open'] ) { holder.style.display = "none" ; } this.loc['iframe'] = iframe; this.loc['iframeDiv'] = holder; this.loc['toggleLinkText'] = document.getElementById(this.id + "_toggle_link_text") ; } /* +----------------------------------------------------------------------+ | starts moving the locations iframe +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.locationStartMove = function() { if ( this.loc['moving'] ) return ; if ( this.loc['open'] ) { this.loc['targetTop'] = this.loc['closedTop'] ; this.loc['toggleLinkText'].innerHTML = this.loc['linktextClosed'] ; } else { this.loc['iframeDiv'].style.display = "" ; this.loc['toggleLinkText'].innerHTML = this.loc['linktextOpen'] ; this.loc['targetTop'] = this.loc['openTop'] ; } this.loc['moving'] = true ; this.loc['interval'] = setInterval(this.id + ".locationMove()",20); } /* +----------------------------------------------------------------------+ | callback function for locations iframe moving interval +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.locationMove = function() { var coords = findPos(this.loc['div']); var vy = (this.loc['targetTop'] - parseInt(coords[1])) * this.loc['easing']; var newY = parseInt(coords[1]) + vy; var dy = Math.abs(this.loc['targetTop'] - newY); if ( dy < 3 ) { clearInterval(this.loc['interval']) ; this.loc['moving'] = false ; var arrow = document.getElementById(this.id + "_locations_arrow"); if ( this.loc['targetTop'] == this.loc['closedTop'] ) { this.loc['open'] = false ; this.loc['iframeDiv'].style.display = "none" ; arrow.src = arrow.src.replace(/top/,"bottom") ; } else { this.loc['open'] = true ; arrow.src = arrow.src.replace(/bottom/,"top") ; } this.setPosition(this); } else { this.loc['div'].style.top = newY + "px" ; } } /* +----------------------------------------------------------------------+ | creates a Touro marker | @param obj temp_latlng GCoord object containing coords | @param int i the key of this marker in sites object +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.createMarker = function(temp_latlng,i) { var marker = new google.maps.Marker(temp_latlng,this.baseIcon); marker.map = this.map; // make map available to markers marker.obj = this; marker.id = i; google.maps.Event.addListener(marker, "click", function() { if ( marker.map.getInfoWindow().isHidden() === false ) { marker.closeInfoWindow(); } marker.openInfoWindowHtml(marker.obj.sites[marker.id]) ; }); return marker; } /* +----------------------------------------------------------------------+ | opens infoHtmlWindow for a site +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.openInfoWindow = function(i) { this.map.setCenter(this.latlng[i], 16); this.markers[i].openInfoWindowHtml(this.sites[this.markers[i].id]); } /* +----------------------------------------------------------------------+ | geocodes an address, creates a marker, and recenters on it | @param string address a single-line address, with address, city, state, zip comma delineated | @param string addressHtml the html to dump into the info window +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.moveToAddressAndCreateMarker = function(address,addressHtml) { // set globally accessible variable to object instance so callback function can see it Touro_GoogleMaps_globalTemp = this; var geocoder = new google.maps.ClientGeocoder; geocoder.getLatLng(address, function(point) { if ( point ) { Touro_GoogleMaps_globalTemp.map.setCenter(point, 16) ; var marker = new google.maps.Marker(point); marker.map = Touro_GoogleMaps_globalTemp.map; google.maps.Event.addListener(marker, "click", function() { if ( marker.map.getInfoWindow().isHidden() === false ) { marker.closeInfoWindow(); } marker.openInfoWindowHtml(addressHtml) ; }); Touro_GoogleMaps_globalTemp.map.addOverlay(marker); marker.openInfoWindowHtml(addressHtml); } }); // TODO: if we set to null here, callback will fire AFTER assignment... // figure out where to set to null (in callback?) // Touro_GoogleMaps_globalTemp = null; } /* +----------------------------------------------------------------------+ | does the same as moveToAddressAndCreateMarker, except it doesn't geocode | @param obj point a GPoint object | @param string html the html to dump into the info window +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.moveToPointAndCreateMarker = function(point,html) { var point = new google.maps.LatLng(point.lat,point.lng) ; this.map.setCenter(point, 16) ; var marker = new google.maps.Marker(point); marker.map = this.map; google.maps.Event.addListener(marker, "click", function() { if ( marker.map.getInfoWindow().isHidden() === false ) { marker.closeInfoWindow(); } marker.openInfoWindowHtml(html) ; }); this.map.addOverlay(marker); marker.openInfoWindowHtml(html) ; } /* +----------------------------------------------------------------------+ | if the map instance is a hidden pop-up map, display it | @param obj el the element that called this function | @param string address comma-delineated address | @param string addressHtml the html to dump into the info window | @param int w the width of the popup window | @param int h the height of the popup window +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.displayPopup = function(el,address,addressHtml,w,h) { /* var coords = findPos(el); if ( this.initialized == false ) { this.mapContainer = document.getElementById(this.id + "_container"); this.mapDiv = document.getElementById(this.id + "_map"); } var docHeight = documentHeight(); var offset = 50; // offset for the "close" bar (estimate) if ( coords[1] + h + offset > docHeight ) { var topPos = docHeight - h - offset; } else { var topPos = coords[1]; } this.mapContainer.style.display = ""; this.mapContainer.style.width = w + "px"; this.mapContainer.style.height = h + "px"; this.mapContainer.style.position = "absolute"; this.mapContainer.style.top = topPos + "px"; this.mapContainer.style.left = coords[0] + "px"; this.mapDiv.style.display = "block"; this.mapDiv.style.width = (w - 2) + "px" ; this.mapDiv.style.height = (h - 2) + "px" ; if ( this.initialized == false ) { this.initialize(); } this.moveToAddressAndCreateMarker(address,addressHtml); */ if ( this.initialized == false ) { this.mapContainer = document.getElementById(this.id + "_container"); this.mapDiv = document.getElementById(this.id + "_map"); } var coords = findPos(el); var offset = 50; // offset for the "close" bar (estimate) var docHeight = documentHeight(); if ( coords[1] + h + offset > docHeight ) { var topPos = docHeight - h - offset; } else { var topPos = coords[1]; } var docWidth = documentWidth(); if ( coords[0] + w + offset > docWidth ) { var leftPos = docWidth - w - offset; } else { var leftPos = coords[0]; } this.mapContainer.style.display = ""; this.mapContainer.style.top = topPos + "px"; this.mapContainer.style.left = leftPos + "px"; this.setDimensions(w,h); this.moveToAddressAndCreateMarker(address,addressHtml); } /* +----------------------------------------------------------------------+ | sets the dimensions of the map in absolute pixels, and absolutely positions it | (often width or height may be percentage, or not set at all -- movement and re-positioning | will require absolute dimensions) | @param int (optional) the width to force the map to | @param int (optional) the height to force the map to +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.setDimensions = function() { var w; var h; if ( arguments[0] ) { w = parseInt(arguments[0]); } else { w = getWidth(this.mapDiv); } if ( arguments[1] ) { h = parseInt(arguments[1]) ; } else { h = getHeight(this.mapDiv); } if ( this.initialized == false ) { this.mapContainer = document.getElementById(this.id + "_container"); this.mapDiv = document.getElementById(this.id + "_map"); } this.mapContainer.style.width = w + "px"; this.mapContainer.style.height = h + "px"; this.mapContainer.style.position = "absolute"; this.mapDiv.style.display = "block"; this.mapDiv.style.width = (w - 2) + "px" ; this.mapDiv.style.height = (h - 2) + "px" ; if ( this.initialized == false ) { this.initialize(); } return; } /* +----------------------------------------------------------------------+ | hide the map, if it's a popup +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.hidePopup = function() { this.mapContainer.style.display = "none"; } /* +----------------------------------------------------------------------+ | start moving the map to a specific spot on the page +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.startMoveMap = function() { this.setDimensions(); if ( !this.moveInitialized ) { // we're moving for the first time! this.mapEasing = 0.3; var coords = findPos(this.mapContainer); this.mapOriginalTop = parseInt(coords[1]); this.moveInitialized = true; } this.mapContainer.style.zIndex = "10"; this.mapBack.style.display = ""; this.mapTargetTop = parseInt(posTop()) + 10; if ( this.mapTargetTop < this.mapOriginalTop ) { this.moveMapBack(); return; } this.moveInterval = setInterval(this.id + ".moveMap()",20); } /* +----------------------------------------------------------------------+ | move map back to original position +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.moveMapBack = function() { this.mapTargetTop = this.mapOriginalTop; this.mapBack.style.display = "none"; this.moveInterval = setInterval(this.id + ".moveMap()",15); } /* +----------------------------------------------------------------------+ | callback function to move map +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.moveMap = function() { var coords = findPos(this.mapContainer); var vy = (this.mapTargetTop - parseInt(coords[1])) * this.mapEasing; var newY = parseInt(coords[1]) + vy; var dy = Math.abs(this.mapTargetTop - newY); if ( dy < 2 ) { this.mapContainer.style.top = this.mapTargetTop + "px" ; clearInterval(this.moveInterval); } else { this.mapContainer.style.top = newY + "px" ; } } /* +----------------------------------------------------------------------+ | combo function: starts map movement, creates a point + marker based on absolute coords | @param obj point a GPoint object | @param string addressHtml the html to dump in the info window +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.moveAndCreate = function(point,addressHtml) { this.moveToPointAndCreateMarker(point,addressHtml); this.startMoveMap(); } /* +----------------------------------------------------------------------+ | often you'll want a clickable anchor tag that doesn't have any href -- | in order to ensure the mouse arrow turns into a "hand", use this function | as a void function, e.g.: | Click me! +----------------------------------------------------------------------+ */ Touro_GoogleMaps.prototype.nothing = function() { return; }