Thanks for you reply Mike.
The functionality i'm trying to replicate is what happens when you
click the pin rather than when you hover over the pin, are you able to
find the code for how they do that as it seems a mystery to me.
On the other hand, i've tried to implement the fromLatLngToDivPixel
with strange results...
A sample page which i've mocked up to demonstrate this is:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript">
function initGoogleAJAXLoader(mapKey, callback) {
var script = document.createElement("script");
script.src = "http://www.google.com/jsapi?key="; + mapKey +
"&callback=" + callback;
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild
(script);
}
function loadMaps() {
google.load("maps", "2", { "callback": mapsLoaded });
}
function mapsLoaded() {
var map;
map = new google.maps.Map2(document.getElementById
("gmap"));
map.draggingEnabled();
map.enableScrollWheelZoom();
map.doubleClickZoomEnabled();
map.setMapType = G_DEFAULT_MAP_TYPES;
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(0, 0));
GEvent.addListener(map, "click", function(overlay, latlng,
overlaylatlng) {
setDivPosition(map.fromLatLngToDivPixel(latlng));
});
}
function setDivPosition(gPoint) {
var crosshair = document.getElementById("crosshair");
crosshair.style.left = (gPoint.x - 20) + "px";
crosshair.style.top = (gPoint.y - 20) + "px";
//alert(gPoint);
}
</script>
</head>
<body onload="initGoogleAJAXLoader('ABCDEFG', 'loadMaps');"
style="margin:0px">
<div id="gmap" style="width:500px; height:500px"></div>
<div id="crosshair" style="position:absolute; left:500px; right:
500px; height:40px; width:40px">
<img src="http://www.thelightisgreen.com/Crosshairs.png";
style="height:40px; width:40px"/>
</div>
</body>
</html>
In the example, i'd hope to be able to click on a point and then the
crosshairs will point to the point, or in real world examples, i'll
click on a marker and the overlay will point to the marker, such as in
trulia. As you will see, the crosshairs don't point to the point once
you start panning, or zooming.
Any ideas?
Thanks again,
RodgerWilko!
On May 4, 6:44 pm, Mike Williams <[email protected]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
![http://www.thelightisgreen.com/Crosshairs.png"](http://www.thelightisgreen.com/Crosshairs.png"){kind=link}