// onload/onunload event listeners on
pages that do not have the required div tag. doing so will result
in a Javascript Error and could cause further problems.
DIRECTIONS
Body tag needs to look like this
GLoadMulti(map_div, map_long_center, map_lat_center, ARRAY_OF_ADDRESSES (long, lat, label, address, tooltiptext))
address is not required. if you ommit the direction box is not shown
tooltiptext is also not required. defaults to 'Click here for directions'
*/
function GLoadMulti(map_div, long_center, lat_center, zoom, addresses) {
//if(typeof address == "undefined" || address == null) var address = false;
//if(typeof tooltiptext == "undefined" || tooltiptext == null) var tooltiptext = 'Click here for directions';
if (GBrowserIsCompatible()) {
function createMarker(point, index, lbl, addr) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
var directions_box = '';
if (addr)
marker.openInfoWindowHtml(''+lbl+'' + directions_box);
else
marker.openInfoWindowHtml(''+lbl+'');
});
return marker;
}
var map = new GMap2(document.getElementById(map_div));
map.setCenter(new GLatLng(long_center, lat_center), zoom);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var markers = new Array();
var tooltip;
for (var i=0; i < addresses.length; i++) {
markers[i] = createMarker(new GLatLng(addresses[i][0], addresses[i][1]), 0, addresses[i][2], addresses[i][3]);
map.addOverlay(markers[i],0);
tooltip = new Tooltip(markers[i],addresses[i][4],4);
markers[i].tooltip = tooltip;
map.addOverlay(tooltip);
GEvent.addListener(markers[i],'mouseover',function(){
this.tooltip.show();
});
GEvent.addListener(markers[i],'mouseout',function(){
this.tooltip.hide();
});
}
}
}
function Tooltip(marker, content, padding){
this.marker = marker;
this.content = content;
this.padding = padding;
this.div = null;
this.map = null;
}
Tooltip.prototype = new GOverlay();
Tooltip.prototype.initialize = function(map){
this.div = document.createElement("div");
var innerContainer = this.div.cloneNode(false);
this.div.appendChild(innerContainer);
this.div.style.position = 'absolute';
this.div.style.visibility = 'hidden';
this.shadowQuadrants = [{},{},{},{}]
this.shadowQuadrants[0].div = document.createElement('div');
this.shadowQuadrants[0].div.style.position = 'absolute';
this.shadowQuadrants[0].div.style.overflow = 'hidden';
this.shadowQuadrants[0].img = createPngElement('/examples/Tooltip_v2/tooltip_shadow.png');
this.shadowQuadrants[0].img.style.position = 'absolute';
this.shadowQuadrants[0].div.appendChild(this.shadowQuadrants[0].img);
this.shadowQuadrants[1].div = this.shadowQuadrants[0].div.cloneNode(false);
this.shadowQuadrants[1].img = this.shadowQuadrants[0].img.cloneNode(true);
this.shadowQuadrants[1].div.appendChild(this.shadowQuadrants[1].img);
this.shadowQuadrants[2].div = this.shadowQuadrants[0].div.cloneNode(false);
this.shadowQuadrants[2].img = this.shadowQuadrants[0].img.cloneNode(true);
this.shadowQuadrants[2].div.appendChild(this.shadowQuadrants[2].img);
this.shadowQuadrants[3].div = this.shadowQuadrants[0].div.cloneNode(false);
this.shadowQuadrants[3].img = this.shadowQuadrants[0].img.cloneNode(true);
this.shadowQuadrants[3].div.appendChild(this.shadowQuadrants[3].img);
this.shadowQuadrants[0].div.style.right = '0px';
this.shadowQuadrants[0].div.style.top = '0px';
this.shadowQuadrants[0].img.style.top = '0px';
this.shadowQuadrants[0].img.style.right = '0px';
this.shadowQuadrants[1].div.style.left = '0px';
this.shadowQuadrants[1].div.style.top = '0px';
this.shadowQuadrants[1].img.style.top = '0px';
this.shadowQuadrants[2].div.style.left = '0px';
this.shadowQuadrants[2].div.style.bottom = '0px';
this.shadowQuadrants[2].img.style.bottom = '0px';
this.shadowQuadrants[2].img.style.left = '0px';
this.shadowQuadrants[3].div.style.right = '0px';
this.shadowQuadrants[3].div.style.bottom = '0px';
this.shadowQuadrants[3].img.style.bottom = '0px';
this.shadow = this.div.cloneNode(false);
this.shadow.appendChild(this.shadowQuadrants[0].div);
this.shadow.appendChild(this.shadowQuadrants[1].div);
this.shadow.appendChild(this.shadowQuadrants[2].div);
this.shadow.appendChild(this.shadowQuadrants[3].div);
innerContainer.className = 'tooltip';
var child = typeof this.content == 'string' ?
document.createTextNode(this.content) :
this.content;
innerContainer.appendChild(child);
map.getPane(G_MAP_FLOAT_PANE).appendChild(this.div);
map.getPane(G_MAP_MARKER_SHADOW_PANE).appendChild(this.shadow);
this.map = map;
}
Tooltip.prototype.remove = function(){
this.div.parentNode.removeChild(this.div);
}
Tooltip.prototype.copy = function(){
var content = typeof this.content == 'string' ? this.content : this.content.cloneNode(true);
return new Tooltip(this.marker,content,this.padding);
}
Tooltip.prototype.redraw = function(force){
if (!force) return;
//draw tooltip
var markerPos = this.map.fromLatLngToDivPixel(this.marker.getPoint());
var iconAnchor = this.marker.getIcon().iconAnchor;
var xPos = Math.round(markerPos.x - this.div.clientWidth / 2);
var yPos = markerPos.y - iconAnchor.y - this.div.clientHeight - this.padding;
this.div.style.top = yPos + 'px';
this.div.style.left = xPos + 'px';
}
Tooltip.prototype.show = function(){
this.div.style.visibility = 'visible';
}
Tooltip.prototype.hide = function(){
this.div.style.visibility = 'hidden';
}
//utility function for png compatibility in IE6
var IS_IE = false;
var IS_LT_IE7;
//@cc_on IS_IE = true;
//@cc_on IS_LT_IE7 = @_jscript_version < 5.7;
function createPngElement(src){
var img = document.createElement('img');
img.setAttribute('src',src);
if(IS_IE && IS_LT_IE7){
img.style.visibility = 'hidden';
var div = document.createElement('div');
div.appendChild(img);
div.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\',sizingMethod=\'crop\')';
return div;
}
return img;
}
//]]>