https://collezione.starhotels.com/assets/js/premium/label.js

1// Define the overlay, derived from google.maps.OverlayView
2function Label(opt_options, type) {
3  // Initialization
4  this.setValues(opt_options);
5
6
7  // Label specific
8  var span = this.span_ = document.createElement('span');
9  var top = (type == 'hotel') ? '-50' : '-22';
10  span.style.cssText = 'display: inline-block; padding: 15px 20px; position: relative; left: 35px; top: '+top+'px; ' +
11  'white-space: nowrap; text-transform: uppercase; ' +
12  'font-family:"Museo Sans W01_500"; font-size: 1.3em; color: #191c1f; letter-spacing: .1em;' + 
13  'background-color: #fff';
14
15  var div = this.div_ = document.createElement('div');
16  div.appendChild(span);
17  div.style.cssText = 'position: absolute; visibility: hidden; z-index: 99999';
18};
19Label.prototype = new google.maps.OverlayView;
20
21
22// Implement onAdd
23Label.prototype.onAdd = function() {
24  var pane = this.getPanes().overlayMouseTarget;
25  pane.appendChild(this.div_);
26
27
28  // Ensures the label is redrawn if the text or position is changed.
29  var me = this;
30  this.listeners_ = [
31    google.maps.event.addListener(this, 'position_changed', function() { me.draw(); }),
32    google.maps.event.addListener(this, 'visible_changed', function() { me.draw(); }),
33    google.maps.event.addListener(this, 'clickable_changed', function() { me.draw(); }),
34    google.maps.event.addListener(this, 'text_changed', function() { me.draw(); }),
35    google.maps.event.addListener(this, 'zindex_changed', function() { me.draw(); }),
36    google.maps.event.addDomListener(this.div_, 'click', function() { 
37      if (me.get('clickable')) {
38        google.maps.event.trigger(me, 'click');
39      }
40    })
41  ];
42};
43
44
45// Implement onRemove
46Label.prototype.onRemove = function() {
47  this.div_.parentNode.removeChild(this.div_);
48
49
50  // Label is removed from the map, stop updating its position/text.
51  for (var i = 0, I = this.listeners_.length; i < I; ++i) {
52    google.maps.event.removeListener(this.listeners_[i]);
53  }
54};
55
56
57// Implement draw
58Label.prototype.draw = function() {
59  var projection = this.getProjection();
60  var position = projection.fromLatLngToDivPixel(this.get('position'));
61
62  var div = this.div_;
63  div.style.left = position.x + 'px';
64  div.style.top = position.y + 'px';
65
66
67  var visible = this.get('visible');
68  div.style.visibility = visible ? 'visible' : 'hidden';
69
70
71  var clickable = this.get('clickable');
72  this.span_.style.cursor = clickable ? 'pointer' : '';
73
74
75  var zIndex = this.get('zIndex');
76  //div.style.zIndex = zIndex;
77
78
79  this.span_.innerHTML = this.get('text').toString();
80};
81
82Label.prototype.hide = function() {
83	if (this.div_) {
84		this.div_.style.visibility = "hidden";
85	}
86}
87
88Label.prototype.show = function() {
89	if (this.div_) {
90		/*var _this = this;
91		var projection = this.getProjection();
92		var map_bounds_left = projection.fromLatLngToDivPixel(this.getMap().getBounds().getSouthWest

92());
93		var map_bounds_right = projection.fromLatLngToDivPixel(this.getMap().getBounds().getNorthEast());
94		var position = projection.fromLatLngToDivPixel(this.get('position'));*/
95		this.div_.style.visibility = "visible";
96		/*if ( ((position.x + $(this.div_).outerWidth()) > map_bounds_right.x) ) {
97			this.getMap().panBy($(this.div_).outerWidth(), 0);
98			google.maps.event.addListenerOnce(this.map, 'idle', function(){
99			    _this.div_.style.visibility = "visible";
100			});
101		} else {
102			this.div_.style.visibility = "visible";
103		}*/
104	}
105}
106
107Label.prototype.panMap = function() {
108	
109  // if we go beyond map, pan map
110  var map = this.getMap();
111  var bounds = map.getBounds();
112  if (!bounds) return;
113
114  // The position of the infowindow
115  //var projection = this.getProjection();
116  var position = this.get('position');
117  //var position = this.latlng_;
118
119  // The dimension of the infowindow
120  var iwWidth = this.div_.clientWidth;
121  var iwHeight = this.div_.clientHeight;
122
123  // The offset position of the infowindow
124  var iwOffsetX = this.div_.offsetLeft - 35;
125  var iwOffsetY = this.div_.offsetTop;
126
127  // Padding on the infowindow
128  var padX = 20;
129  var padY = 15;
130
131  // The degrees per pixel
132  var mapDiv = map.getDiv();
133  var mapWidth = mapDiv.offsetWidth;
134  var mapHeight = mapDiv.offsetHeight;
135  var boundsSpan = bounds.toSpan();
136  var longSpan = boundsSpan.lng();
137  var latSpan = boundsSpan.lat();
138  var degPixelX = longSpan / mapWidth;
139  var degPixelY = latSpan / mapHeight;
140
141  // The bounds of the map

142  var mapWestLng = bounds.getSouthWest().lng();
143  var mapEastLng = bounds.getNorthEast().lng();
144  var mapNorthLat = bounds.getNorthEast().lat();
145  var mapSouthLat = bounds.getSouthWest().lat();
146
147  // The bounds of the infowindow
148  var iwWestLng = position.lng() + (35 + padX) * degPixelX;
149  var iwEastLng = position.lng() + (35 + iwWidth + padY) * degPixelX;
150  var iwNorthLat = position.lat();
151  var iwSouthLat = position.lat() + (iwOffsetY + iwHeight + padY) * degPixelY;
152	
153  // calculate center shift
154  var shiftLng =
155      (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
156      (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
157  var shiftLat =
158      (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
159      (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);
160
161  // The center of the map
162  var center = map.getCenter();
163
164  // The new map center
165  var centerX = center.lng() - shiftLng;
166  var centerY = center.lat() - shiftLat;
167
168  // center the map to the new shifted center
169  map.panTo(new google.maps.LatLng(centerY, centerX));
170  //map.setCenter(new google.maps.LatLng(centerY, centerX));
171
172  // Remove the listener after panning is complete.
173  google.maps.event.removeListener(this.boundsChangedListener_);
174  this.boundsChangedListener_ = null;
175  
176};