0

Could you please tell me how to find the pixel co ordinates of a marker in Google Maps API V3?

Kara
  • 6,115
  • 16
  • 50
  • 57

1 Answers1

1

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
  • 43,655
  • 12
  • 77
  • 90
  • Nup, I got to find the pixel co ordinates of the marker, not in terms of latitude/longitude. I have to display a
    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?
     –  Oct 07 '10 at 13:00
  • 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; } –  Oct 07 '10 at 13:01
  • 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 Oct 07 '10 at 13:02
  • Okay, now how do I display the
    near the element itself?
     –  Oct 07 '10 at 13:06
  • 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 Oct 07 '10 at 13:09
  • The API allows you to create overlays. So you should consider reading the documentation on how to do this. – Alin Purcaru Oct 07 '10 at 13:11
  • 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? –  Oct 07 '10 at 13:22
  • See here: http://stackoverflow.com/questions/2674392/how-to-access-google-maps-api-v3-markers-div-and-its-pixel-position – Alin Purcaru Oct 07 '10 at 13:29
  • 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??:( –  Oct 08 '10 at 07:10
  • 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 Oct 08 '10 at 07:23
  • 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.. –  Oct 08 '10 at 07:41
  • 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 Oct 08 '10 at 07:44
  • Yeah, the container is positioned as Absolute. So do I need to set the same position to the div too? –  Oct 08 '10 at 07:48
  • 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 Oct 08 '10 at 07:52
  • 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? –  Oct 08 '10 at 08:37
  • Yes. We went far outside the scope of a programming question. You should consider hiring a professional. – Alin Purcaru Oct 08 '10 at 08:47