gistfile1.js

rwgps.Icon = function() {}
rwgps.Icon.prototype = {
  icon: null,
  shadow: null,
  marker: null,

  init: function(latlng, map) {
    this.marker = new google.maps.Marker({
      position: latlng,
      map: map.gmap,
      icon: this.icon,
      shadow: this.shadow
    });
    return this.marker;
  }
}
rwgps.CoursePointIcon = function(coursePoint, map) {
  this.coursePoint = coursePoint;
  this.icon = "http://hobbez.net:3000/images/cp_icon.png",
  this.shadow = new google.maps.MarkerImage(
    "http://hobbez.net:3000/images/cp_icon_shadow.png",
    new google.maps.Size(32,22), //dimensions
    new google.maps.Point(0,0), //origin to reference from
    new google.maps.Point(3, 22) //anchor (offset a bit for this one)
  );
  this.init(coursePoint.point, map);
  this.popup = $("<div/>");
  this.popup.css({
    position: "absolute",
    background: "#FFF",
    "z-index": 100,
    width: 200,
    height: 75,
    border: "1px solid black"
  });
  this.popup.append("<b>" + coursePoint.type + "</b>");

  var self = this;
  google.maps.event.addListener(this.marker, 'mouseover', function() {
    var proj = map.mockOverlay.getProjection();
    var pt = proj.fromLatLngToContainerPixel(coursePoint.point);
    self.popup.css({left: pt.x, top: pt.y});
    $("body").append(self.popup);
  });
  google.maps.event.addListener(this.marker, 'mouseout', function() {
    self.popup.remove();
  });
  return this.marker;
}
rwgps.CoursePointIcon.prototype = new rwgps.Icon();