gistfile1.coffee

# http://stackoverflow.com/questions/2674392/how-to-access-google-maps-api-v3-markers-div-and-its-pixel-position/2692617#2692617
    scale = Math.pow 2, @map.getZoom()
    nw = new google.maps.LatLng @map.getBounds().getNorthEast().lat(), @map.getBounds().getSouthWest().lng()
    worldCoordinateNW = @map.getProjection().fromLatLngToPoint nw
    worldCoordinate = @map.getProjection().fromLatLngToPoint venueMarker.getPosition()
    pixelOffset = new google.maps.Point Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
    
        
    tooltipDiv = $('#explore-tooltip')
    tooltip = width: tooltipDiv.width(), height: tooltipDiv.height()
    
    console.log "tooltipWidth: #{tooltip.width}"
    console.log "tooltipHeight: #{tooltip.height}"
    
    # some code to display the tooltip at the right position
    mapDiv = $('#google-map')
    map = width: mapDiv.width(), height: mapDiv.height()    
    console.log "map:"
    console.log map
    
    venue = x: pixelOffset.x, y: pixelOffset.y
    
    console.log "venue"
    console.log venue
    
    mapCenter = x: map.width/2, y: map.height/2
    console.log "mapCenter:"
    console.log mapCenter
    
    if venue.x < mapCenter.x
      # tooltip is east
      tooltipDiv.css 'left', venue.x + 30 + 350
      tooltipDiv.css 'right', ''
    else
      # tooltip is west
      tooltipDiv.css 'right', (map.width - venue.x) + 30
      tooltipDiv.css 'left', ''
      
    if venue.y < mapCenter.y
      tooltipDiv.css 'top', venue.y + 76 - 45
      tooltipDiv.css 'bottom', ''
      if (venue.y + tooltip.height) > map.height
        tooltipDiv.css 'top', 20 + 76
        # alert 'ok'
    else
      tooltipDiv.css 'bottom', (map.height - venue.y)
      tooltipDiv.css 'top', ''
      if (venue.y - tooltip.height) < 0
        tooltipDiv.css 'bottom', 20