function myInfowin(bounds, html, map) {
  this.prototype = new google.maps.OverlayView();
  this.prototype.bounds_ = bounds;
  this.prototype.html_ = html;
  this.prototype.map_ = map;
  this.prototype.div_ = null;
  this.prototype.setMap(map);
  
  this.prototype.onAdd = function () {
    var div = document.createElement('div');
    div.className = "tooltip";
    div.innerHTML = this.html_;
    this.div_ = div;
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }
  
  this.prototype.draw = function() {
    var overlayProjection = this.getProjection();
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = (ne.y - 95) + 'px';
    // 
    div.style.width = 185 + 'px';
    div.style.marginLeft = -84 + 'px';
  }
  
  this.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
}

function setMarkers(map, locations) {
  var shadow = new google.maps.MarkerImage(
                        '/Content/images/map_shadow.png',
                        new google.maps.Size(22, 34),
                        new google.maps.Point(0, 0),
                        new google.maps.Point(3, 22)
                      );

  var shape = {
    coord: [1, 1, 1, 22, 17, 22, 17, 1],
    type: 'poly'
  };

  for (var i = 0; i < locations.length; i++) {
    var loc = locations[i];
    var myLatLng = new google.maps.LatLng(loc[1], loc[2]);
    var image = new google.maps.MarkerImage(
                        '/Content/images/map_point_' + loc[4].replace(' ', '_') + '.png',
                        new google.maps.Size(17, 22),
                        new google.maps.Point(0, 0),
                        new google.maps.Point(0, 24)
                      );

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: loc[0],
      zIndex: loc[3]
    });

    google.maps.event.addListener(
      marker,
      'click',
      function () {
        var i = this.zIndex - 1;
        this.map.setCenter(this.position);
        var bounds = new google.maps.LatLngBounds(this.position, this.position);

        myInfowin(bounds, '<span class="l"></span><span class="content"><span class="' + locations[i][4] + '"></span>' + ((locations[i][7]) ? '<span class="superior s_' + locations[i][4].replace("stelle", "") + '"></span>' : '') + '<a href="' + locations[i][6] + '" class="titolo">' + this.title + '</a>' + locations[i][5] + '<a href="javascript:;" onclick="$(this).parents(\'.tooltip\').hide();" class="close">X</a></span><span class="arrow"></span><span class="r"></span>', this.map);
      }
    );
  }
}