Rather than starting from elabels, to get behaviour like the Trulia map,
it's simpler to start with custom tooltip code. The code from the Trulia
page looks like this
if(show_tooltip){
GEvent.addListener(marker,'mouseover',function(){
parent_handle.utils.showTooltip(marker,parent_handle.tooltipdiv);
});
GEvent.addListener(marker,'mouseout',function(){
parent_handle.utils.hideTooltip(parent_handle.tooltipdiv);
});}
};
TruliaMapUtils.prototype.showTooltip=function(marker,tooltipdiv){
var marker_height_adjustment=26;
var marker_width_adjustment=6;
var iwindow_width=130;
var iwindow_height=25;
var iwindow_width_offset=10;
var iwindow_height_offset=iwindow_height+10;
var point_latlng=marker.getLatLng();
var point_pixel=this.map.fromLatLngToDivPixel(point_latlng);
point_pixel.x=point_pixel.x-marker_width_adjustment;
point_pixel.y=point_pixel.y-marker_height_adjustment;
var map_bounds=this.map.getBounds();
var upper_corner_lat_lng=new
GLatLng(map_bounds.getNorthEast().lat(),map_bounds.getSouthWest().lng());
var
upper_corner_pixel=this.map.fromLatLngToDivPixel(upper_corner_lat_lng);
var pixels_from_nw=this.subGPoints(point_pixel,upper_corner_pixel);
var lower_corner_lat_lng=new
GLatLng(map_bounds.getSouthWest().lat(),map_bounds.getNorthEast().lng());
var
lower_corner_pixel=this.map.fromLatLngToDivPixel(lower_corner_lat_lng);
var pixels_from_se=this.subGPoints(point_pixel,lower_corner_pixel);
var dist_from_top=parseInt(pixels_from_nw.y);
var dist_from_left=parseInt(pixels_from_nw.x);
var dist_from_right=Math.abs(parseInt(pixels_from_se.x));
var direction_horizontal='right';
if(dist_from_right<iwindow_width)direction_horizontal='left';
tooltipdiv.style.top=(dist_from_top-5)+'px';
if(direction_horizontal=='right')tooltipdiv.style.left=dist_from_left+i
window_width_offset+'px';
else tooltipdiv.style.left=dist_from_left-iwindow_width+'px';
tooltipdiv.innerHTML=marker.trulia.tooltip;
};
Which, as you can see, is a lot simpler than elabels, because it doesn't
have to worry about the map moving while the tooltip is displayed, or
cope with multiple tooltip instances.
The awkward thing about deciding which side of the marker to display the
tooltip is working out how big the tooltip will be when displayed in a
particular browser, and therefore being able to calculate whether
there's room. In the case of the Trulia code, their code assumes that
all the tooltips will be 130x25 pixels. [In fact the code enforces that
size, causing the ends of addresses like "2221 SUMMITRIDGE D" to get
chopped off.]
In general, a simpler approach would be to always display the tooltip on
the side with the greater amount of space.
--
http://econym.org.uk/gmap
The Blackpool Community Church Javascript Team
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
