Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Moving the map will mess up positioning of the tooltip #2

Open
karlwettin opened this Issue · 1 comment

1 participant

@karlwettin

When I move my map the tooltip will get an inverted offset equal to my movement. I.e. if I move the map 50% to any direction the tooltip will have moved out of the screen.

Again, I'm not a JS-person but I think it has something to do with the get_overlay with focus on the map rather than focused on the marker overlay?

@karlwettin

Here is my fix for the problem, based on MBO:s post in http://stackoverflow.com/questions/2674392/how-to-access-google-maps-api-v3-markers-div-and-its-pixel-position

//
// http://github.com/christianhellsten/jquery-google-maps-tooltips
//
function MapTooltip(map, tip, onBeforeShow, onBeforeHide) {
  // Don't forget the tip
  var $tooltip = tip;
  // One timer
  var timer = 0;
  // Don't loose our scope
  var self = this;

  this.map_ = map;

  if (!$tooltip.hasClass('tooltip-enabled')) {
    // Mouse enter
    $tooltip.bind('mouseenter.tooltip', function(e) {
      stopTimer();
    });

    // Mouse leave
    $tooltip.bind('mouseleave.tooltip', function(e) {
        self.hide(200)
    });

    $tooltip.addClass('tooltip-enabled');
  }

  function startTimer(callback, time) {
    stopTimer();
    timer = setTimeout(callback, time);
  }

  function stopTimer() {
    clearTimeout(timer);
  }

  this.show = function(marker) {
    // Hide
    self.hide(0);

    $tooltip.data('MapTooltips.marker', marker);

    // Callback
    onBeforeShow(marker, $tooltip);

    var scale = Math.pow(2, self.map_.getZoom());
    var nw = new google.maps.LatLng(
        self.map_.getBounds().getNorthEast().lat(),
        self.map_.getBounds().getSouthWest().lng()
    );
    var worldCoordinateNW = self.map_.getProjection().fromLatLngToPoint(nw);
    var worldCoordinate = self.map_.getProjection().fromLatLngToPoint(marker.getPosition());
    var pixelOffset = new google.maps.Point(
        Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
        Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
    );

    var x = pixelOffset.x;
    var y = pixelOffset.y; 

    $tooltip.css({
      position: "absolute",
      'z-index': 20000,
      top: y, left: x
    });

    $tooltip.animate({"top": "+=20px", "opacity": "toggle"}, 300);
  };

  this.hide = function(time) {
    var marker = $tooltip.data('MapTooltips.marker');

    if (marker && typeof onBeforeHide == 'function') {
      onBeforeHide(marker, $tooltip);
    }
    $tooltip.fadeOut(time);
  };

  this.addMarker = function(marker) {
    google.maps.event.addListener(marker, 'mouseover', function(event) {
        self.show(marker)
    });

    google.maps.event.addListener(marker, 'mouseout', function(event) {
      self.hide(200)
    });
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.