Question

I have developed an application using google maps v3. Here, I need to show some markers at the initial zoom level. The problem is on mouseover of the marker, I need to show a div content. The div is not properly aligned, that is for the marker on the extreme left or right, the div is getting partly hidden. How do I show the div with proper alignment viz., inside the map itself? could someone help me with this please? Thanks in advance.

Answer 1

First get the size of the map canvas div, then capture the x coordinates of the marker.

For the mouseover event, write a conditional statement so that if the marker’s x coordinate are too close to the left edge, add extra pixels to the x coordinate of the floating div so the floating div shifts to the right to go inside the map canvas. (If the marker is too close to the right edge, reduce the value of x coordinate by certain pixel so that the floating div shifts to the left a bit.)

How much to add or reduce the value of x coordinates depend on how big the floating div is.