Show tool tip on google map polygon drag handle using Jquery





How to show tool tip on Google map polygon drag handle when user hovers mouse over the drag handle?

When user draws polygon on Google map, Google injects number of Div on to the map to  show the polygon drawn. Small squares on the polygon give the facility to drag and re-size the polygon. Those small squares are Div. J Query makes it very easy to implement events to those Div (drag handles). All drag handles has  id which starts with cp_n (underscore) n=number (0, 1, 2, 3….). J Query Selectors make it extremely easy to find all those Div which start with cp_ .  Following piece of code is doing the job for us.

$(“div[id^=’cp_’]”).mousemove(function(e)
{
showToolTip(“Drag to move a point”);
$(“#maptooltipcontainer”).css(“top”, (e.pageY – 190) + “px”).css(“left”, (e.pageX + 30) + “px”);
});

showToolTip is a method used to pass the tool tip text. You can create your own method or write your own logic.

This code is for illustration purpose only. Feel free to use according to your own needs.

$(“div[id^=’cp_’] = J Query  Selector to get all Div where Div Id start with “cp_”.




Tags: , ,

Comments are closed.