Use my existing jquery function in drupal 7

Your are missign two important things. First, in Drupal 7 jQuery is namespaced to avoid conflict with other JavaScript libraries. So you should either wrap your code in an anonymous function to assign the jQuery object to the $ variable (ie. (function($){...})(jQuery);).

Second, you shouldn't use $(document).ready() but add you code as a the attach function under the Drupal.behaviors.yourModule namespace. Behaviors are attached on the documentobject on load, but also to any new element added to the page by any well behaving scripts (the ones that call Drupal.attachBehaviors()). Finally, because behaviors could be attached several times to the same DOM tree, you should avoid processing the same element multiple times. This can easily be done with jQuery Once.

(function($){
  Drupal.behaviors.myFunkyModule = {
    attach: function(context, settings) {
      // Get the map wrapper element (anywhere in the document).
      var map_wrapper = $('#map-wrapper');
      //Set the map-wrapper width and height to match the img size only once.
      map_wrapper.once('my-funky-module').css({
        width: $('#map-wrapper img').width(),
        height: $('#map-wrapper img').height()
      })
      // Get the (un-processed) .pin elements, in the context (ie. DOM tree) our behavior is attached to.
      var pins = $(".pin", context).once('my-funky-module');
      // Process the pin elements (note: this could also be done using jQuery.each()).
      for (i=0; i<pins.length; i++) {
           var pin = pins.eq(i);
          // store initial tooltips contents within an array
          var tooltipContent = new Array();
          tooltipContent[i] = pin.html();

          // set tooltip direction type - up or down
          var tooltipDirection = 'tooltip-up';             
          if (pin.hasClass('pin-down')) {
              tooltipDirection = 'tooltip-down';
          }

          // Append the tooltip elements to the #map_wrapper one.
          map_wrapper.append("<div style='left:"+pin.data('xpos')+"px;top:"+pin.data('ypos')+"px' class='" + tooltipDirection +"'><div class='tooltip'>" + tooltipContent[i] + "</div></div>");
      }    

      // Add event listeners to show/hide the tooltip, again this only need to be done once.
      $('.tooltip-up, .tooltip-down').once('my-funky-module').mouseenter(function(){
        $(this).children('.tooltip').fadeIn(100);
      }).mouseleave(function(){
        $(this).children('.tooltip').fadeOut(100);
      });
    }
  }
})(jQuery);