CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Mantar
Mantar

Reputation: 2720

Calling custom functions within Google Maps?

So, I have a dirt simple tooltip written in jQuery, it only requires an element to have class="tooltips" and a right after the element (and the css ofcourse)

But how do I implement it on a polyline in Google Maps?

function tooltipDisplay() {
    return function() { $(this).contents("span:last-child").css({ display: "block" }); }
}
function tooltipHide() {
    return function() { $(this).contents("span:last-child").css({ display: "none" }); }
}
function tooltipMove() {
    return function(e) {
        var mousex = e.pageX + 10;
        var mousey = e.pageY + 5;
        $(this).contents("span:last-child").css({  top: mousey, left: mousex });
    }
}
$(".tooltips").hover(tooltipDisplay(),tooltipHide());

    $(".tooltips").mousemove(tooltipMove());

I tried using 

    google.maps.event.addListener(flightPath, 'mouseover', tooltipDisplay());

    google.maps.event.addListener(flightPath, 'mouseout', tooltipHide());

    google.maps.event.addListener(flightPath, 'mousemove', tooltipMove());

without any results. (obviously because I can't make a span on a polyline for starters)

Upvotes: 0

Views: 943

Answers (2)

Mantar
Mantar

Reputation: 2720

Right. SOLVED.

After a bit of jumping through hoops and whatnot it turned out to be easier than it seemed.

Simply put: "this" isn't useful with Google Maps Polylines, as it's the document. As such I took it down a notch and gave it it's own simple functions as such:

    google.maps.event.addListener(flightPath, 'mouseover', function() {
        $('#mapTooltip').show();
    });

    google.maps.event.addListener(flightPath, 'mouseout', function() {
        $('#mapTooltip').hide();
    });

However I also noticed the act of placing the tooltip couldn't be done with a mouseover in the Listener as it had to call an element anyways which resulted in a loop where it was firing whenever I moved anywhere, as such, in the document.ready area I added this:

function tooltipMove(e) {
    var y = e.pageY;
    var x = e.pageX;

    $("span").css({
        top:y+5,
        left:x+10
    });
}

$("#gMap").mousemove(tooltipMove);

And then just styled the css to fit. Simple as that!

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630339

Not related directly to the question (so making this Wiki as well), but there's no need for all those function wrappers, just use tooltipDisplay instead of tooltipDisplay() when calling...use the function directly, not the result of invoking it, like this overall:

function tooltipDisplay() {
    $(this).contents("span:last-child").css({ display: "block" });
}
function tooltipHide() {
    $(this).contents("span:last-child").css({ display: "none" });
}
function tooltipMove(e) {
    var mousex = e.pageX + 10;
    var mousey = e.pageY + 5;
    $(this).contents("span:last-child").css({  top: mousey, left: mousex });
}
$(".tooltips").hover(tooltipDisplay,tooltipHide).mousemove(tooltipMove);

Upvotes: 1

Related Questions