bootmaps.js

var bootmaps = bootmaps || {};

bootmaps.InfoWindow = function(opts) {
    opts = opts || {};
    google.maps.OverlayView.apply(this, arguments);
    this.map_ = opts.map || "";
    this.content_ = opts.content || "";
    this.disableAutoPan_ = opts.disableAutoPan || false;
    this.title_ = opts.title || "";
    this.position_ = opts.position || new google.maps.LatLng(0, 0);
    this.eventListeners_ = [];
    this.moveListener_ = null;
};

bootmaps.InfoWindow.prototype = new google.maps.OverlayView();

bootmaps.InfoWindow.prototype.updateTitle_ = function() {
    if (this.elem_) {
      if (this.title_) {
        this.elem_.find('.popover-title').text(this.title_).show();
      } else {
        this.elem_.find('.popover-title').hide();
      }
    }

};

bootmaps.InfoWindow.prototype.updateContent_ = function() {
    if (this.elem_) {
      this.elem_.find('.popover-content').html(this.content_);
    }
};

bootmaps.InfoWindow.prototype.panBox_ = function() {
  var map;
  var bounds;
  var xOffset = 0, yOffset = 0;

  if (!this.disableAutoPan_) {

    map = this.getMap();

    if (map instanceof google.maps.Map) { // Only pan if attached to map, not panorama
      if (!map.getBounds().contains(this.position_)) {
      // Marker not in visible area of map, so set center
      // of map to the marker position first.
        map.setCenter(this.position_);
      }
      map.setCenter(this.position_);

      // bounds = map.getBounds();

      // var $mapDiv = $(map.getDiv());
      // var mapWidth = mapDiv.offsetWidth;
      // var mapHeight = mapDiv.offsetHeight;
      // var iwOffsetX = this.pixelOffset_.width;
      // var iwOffsetY = this.pixelOffset_.height;
      // var iwWidth = this.div_.offsetWidth;
      // var iwHeight = this.div_.offsetHeight;
      // var padX = this.infoBoxClearance_.width;
      // var padY = this.infoBoxClearance_.height;
      // var pixPosition = this.getProjection().fromLatLngToContainerPixel(this.position_);

      // if (pixPosition.x < (-iwOffsetX + padX)) {
      //   xOffset = pixPosition.x + iwOffsetX - padX;
      // } else if ((pixPosition.x + iwWidth + iwOffsetX + padX) > mapWidth) {
      //   xOffset = pixPosition.x + iwWidth + iwOffsetX + padX - mapWidth;
      // }
      // if (this.alignBottom_) {
      //   if (pixPosition.y < (-iwOffsetY + padY + iwHeight)) {
      //     yOffset = pixPosition.y + iwOffsetY - padY - iwHeight;
      //   } else if ((pixPosition.y + iwOffsetY + padY) > mapHeight) {
      //     yOffset = pixPosition.y + iwOffsetY + padY - mapHeight;
      //   }
      // } else {
      //   if (pixPosition.y < (-iwOffsetY + padY)) {
      //     yOffset = pixPosition.y + iwOffsetY - padY;
      //   } else if ((pixPosition.y + iwHeight + iwOffsetY + padY) > mapHeight) {
      //     yOffset = pixPosition.y + iwHeight + iwOffsetY + padY - mapHeight;
      //   }
      // }

      // if (!(xOffset === 0 && yOffset === 0)) {

      //   // Move the map to the shifted center.
      //   //
      //   var c = map.getCenter();
      //   map.panBy(xOffset, yOffset);
      // }
    }
  }
};

bootmaps.InfoWindow.prototype.onAdd = function() {
    this.elem_ = $('<div class="popover top map-popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title">Test</h3><div class="popover-content">Test</div></div></div>');
    this.elem_.width('200');
    this.elem_.hide();
    // Set the overlay's div_ property to this DIV
    this.div_ = this.elem_[0];

    this.updateContent_();
    this.updateTitle_();

    var cancelHandler = function (e) {
      e.cancelBubble = true;
      if (e.stopPropagation) {
        e.stopPropagation();
      }
    };

    this.elem_.on('mousewheel wheeldown wheel scrollwheel', function(event) {
      event.stopPropagation();
    });

    events = ["mousedown", "scrollwheel", "mouseover", "wheel", "mousewheel", "wheelup", "wheeldown", "mouseout", "mouseup", "click", "dblclick", "touchstart", "touchend", "touchmove"];

    for (var i = 0; i < events.length; i++) {
      this.eventListeners_.push(google.maps.event.addDomListener(this.div_, events[i], cancelHandler));
    }

    this.eventListeners_.push(google.maps.event.addDomListener(this.div_, "mouseover", function (e) {
        this.style.cursor = "default";
    }));

    // We add an overlay to a map via one of the map's panes.
    // We'll add this overlay to the overlayImage pane.
    var panes = this.getPanes();
    panes.floatPane.appendChild(this.div_);
};

bootmaps.InfoWindow.prototype.draw = function() {
    var me = this;

    var pixPosition = this.getProjection().fromLatLngToDivPixel(this.position_);

    var offsetX = this.elem_.outerWidth() / 2;
    var offsetY = this.elem_.outerHeight() + 10;

    this.elem_.css('left', (pixPosition.x - offsetX) + "px");
    this.elem_.css('top', (pixPosition.y - offsetY) + "px");

    if (this.isHidden_) {
        this.elem_.hide();
    } else {
        this.elem_.show();
    }
};

bootmaps.InfoWindow.prototype.setContent = function(content) {
  this.content_ = content;
  this.updateContent_();
};

bootmaps.InfoWindow.prototype.setTitle = function(title) {
  this.title_ = title;
  this.updateTitle_();
};

bootmaps.InfoWindow.prototype.onRemove = function () {
  if (this.div_) {
    this.elem_.remove();
  }
};

bootmaps.InfoWindow.prototype.setPosition = function (latlng) {
  this.position_ = latlng;

  if (this.div_) {
    this.draw();
  }
  google.maps.event.trigger(this, "position_changed");
};

bootmaps.InfoWindow.prototype.getPosition = function () {
  return this.position_;
};

bootmaps.InfoWindow.prototype.open = function (map, anchor) {
  var me = this;

  if (anchor) {
    if (this.getPosition() !== anchor.getPosition()) {
      this.position_ = anchor.getPosition();

      this.moveListener_ = google.maps.event.addListener(anchor, "position_changed", function () {
        me.setPosition(this.getPosition());
      });
    }
  }
  this.setMap(map);

  if (this.div_) {
    this.panBox_();
  }
};

bootmaps.InfoWindow.prototype.close = function () {
  if (this.moveListener_) {
    google.maps.event.removeListener(this.moveListener_);
    this.moveListener_ = null;
  }

  if (this.eventListeners_) {
    for (var i = 0; i < this.eventListeners_.length; i++) {
      google.maps.event.removeListener(this.eventListeners_[i]);
    }
    this.eventListeners_ = [];
  }
  this.setMap(null);
};