Hi All, Could u plz tell me how to find the pixel co ordinates of a marker in Google Maps API V3?
+1
A:
Hi,
You first need to get the latitude and longitude with Marker.getLatLng(). You then will have a LatLng object. Next you need to transform from geographic coordinates to pixel coordinates, and you do that with Map.fromLatLngToContainerPixel.
So:
var pixelPosition = Map.fromLatLngToContainerPixel(marker.getLatLng());
Alin Purcaru
2010-10-07 12:53:57
Nup, I got to find the pixel co ordinates of the marker, not in terms of latitude/longitude. I have to display a <div> content on mouseover of the marker. I'm able to do that partly right - the div is displayed on the top left corner of the map. How do I display it right next to each marker?
Ashriya
2010-10-07 13:00:46
My code goes like this: (Label.js file)var x=0, y=0;function getLeft(obj){if ('string' == typeof obj)obj = document.getElementById(obj);while (obj != null){x += obj.offsetLeft;obj = obj.offsetParent;}//return x;}function getTop(obj){if ('string' == typeof obj)obj = document.getElementById(obj);while (obj != null){y += obj.offsetTop;obj = obj.offsetParent;}//return y;}
Ashriya
2010-10-07 13:01:46
Why don't you read my answer again? pixelPosition will hold the offsets of the marker in respect to the map containing div. You access them with pixelPosition.x and pixelPosition.y
Alin Purcaru
2010-10-07 13:02:04
Okay, now how do I display the <div> near the element itself?
Ashriya
2010-10-07 13:06:35
append your div to the map container, then set yourDivEl.style.position = 'relative'; yourDivEl.style.left = pixels.x; yourDivEl.style.top = pixels.y;
Alin Purcaru
2010-10-07 13:09:32
The API allows you to create overlays. So you should consider reading the documentation on how to do this.
Alin Purcaru
2010-10-07 13:11:07
Hi Alin,I tried the method which u said but I don't seem to get it right:( Can u plz provide me the correct syntax to find the co ordinates?
Ashriya
2010-10-07 13:22:41
See here: http://stackoverflow.com/questions/2674392/how-to-access-google-maps-api-v3-markers-div-and-its-pixel-position
Alin Purcaru
2010-10-07 13:29:50
Hi Alin,It doesn't display the div next to the marker. Instead, it shows up on the top left corner only. What do I do??:(
Ashriya
2010-10-08 07:10:21
You do some debugging and see where it fails. First check that the x and y are correct. I suggest using Firefox with Firebug and debug with console.log().
Alin Purcaru
2010-10-08 07:23:11
If I change the position of the div to relative its getting displayed further to the left - as a result only a part of the div is seen. The x and y seem to be correct only..
Ashriya
2010-10-08 07:41:42
First of all make sure you have position relative/absolute/fixed on the container. Then you can position the child with position:absolute; and left and top offsets.
Alin Purcaru
2010-10-08 07:44:22
Yeah, the container is positioned as Absolute. So do I need to set the same position to the div too?
Ashriya
2010-10-08 07:48:44
First of all you need to make sure the div is added as a direct child of the container. Then give position: absolute; left: 100px; top:100px; test with some fixed offsets to make if work first.
Alin Purcaru
2010-10-08 07:52:54
The div is a label control which is added through a Label.js file. And my map is placed inside the iframe of a certain window. I need to display the label taking into account the co ordinates relative to the iframe. Could you help me with that pls?
Ashriya
2010-10-08 08:37:58
Yes. We went far outside the scope of a programming question. You should consider hiring a professional.
Alin Purcaru
2010-10-08 08:47:20
Oh no..:( Okay, anyway thanks for sparing ur valuable time.
Ashriya
2010-10-08 09:45:58