https://elitepyramids.com/wp-content/themes/traveler/inc/modules/l…/vendors/markerwithlabel.js?ver=7.1.2

1/**
2 * @name MarkerWithLabel for V3
3 * @version 1.1.7 [January 9, 2012]
4 * @author Gary Little (inspired by code from Marc Ridey of Google).
5 * @copyright Copyright 2012 Gary Little [gary at luxcentral.com]
6 * @fileoverview MarkerWithLabel extends the Google Maps JavaScript API V3
7 *  <code>google.maps.Marker</code> class.
8 *  <p>
9 *  MarkerWithLabel allows you to define markers with associated labels. As you would expect,
10 *  if the marker is draggable, so too will be the label. In addition, a marker with a label
11 *  responds to all mouse events in the same manner as a regular marker. It also fires mouse
12 *  events and "property changed" events just as a regular marker would. Version 1.1 adds
13 *  support for the raiseOnDrag feature introduced in API V3.3.
14 *  <p>
15 *  If you drag a marker by its label, you can cancel the drag and return the marker to its
16 *  original position by pressing the <code>Esc</code> key. This doesn't work if you drag the marker
17 *  itself because this feature is not (yet) supported in the <code>google.maps.Marker</code> class.
18 */
19
20/*!
21 *
22 * Licensed under the Apache License, Version 2.0 (the "License");
23 * you may not use this file except in compliance with the License.
24 * You may obtain a copy of the License at
25 *
26 *       http://www.apache.org/licenses/LICENSE-2.0
27 *
28 * Unless required by applicable law or agreed to in writing, software
29 * distributed under the License is distributed on an "AS IS" BASIS,
30 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
31 * See the License for the specific language governing permissions and
32 * limitations under the License.
33 */
34
35/*jslint browser:true */
36/*global document,google */
37
38/**
39 * This constructor creates a label and associates it with a marker.
40 * It is for the private use of the MarkerWithLabel class.
41 * @constructor
42 * @param {Marker} marker The marker with which the label is to be associated.
43 * @param {string} crossURL The URL of the cross image =.
44 * @param {string} handCursor The URL of the hand cursor.
45 * @private
46 */
47function MarkerLabel_(marker, crossURL, handCursorURL) {
48  this.marker_ = marker;
49  this.handCursorURL_ = marker.handCursorURL;
50
51  this.labelDiv_ = document.createElement("div");
52  this.labelDiv_.style.cssText = "position: absolute; overflow: hidden;";
53
54  // Set up the DIV for handling mouse events in the label. This DIV forms a transparent veil
55  // in the "overlayMouseTarget" pane, a veil that covers just the label. This is done so that
56  // events can be captured even if the label is in the shadow of a google.maps.InfoWindow.
57  // Code is included here to ensure the veil is always exactly the same size as the label.
58  this.eventDiv_ = document.createElement("div");
59  this.eventDiv_.style.cssText = this.labelDiv_.style.cssText;
60
61  // This is needed for proper behavior on MSIE:
62  this.eventDiv_.setAttribute("onselectstart", "return false;");
63  this.eventDiv_.setAttribute("ondragstart", "return false;");
64
65  // Get the DIV for the "X" to be displayed when the marker is raised.
66  this.crossDiv_ = MarkerLabel_.getSharedCross(crossURL);
67}
68
69// MarkerLabel_ inherits from OverlayView:
70MarkerLabel_.prototype = new google.maps.OverlayView();
71
72/**
73 * Returns the DIV for the cross used when dragging a marker when the
74 * raiseOnDrag parameter set to true. One cross is shared with all markers.
75 * @param {string} crossURL The URL of the cross image =.
76 * @private
77 */
78MarkerLabel_.getSharedCross = function (crossURL) {
79  var div;
80  if (typeof MarkerLabel_.getSharedCross.crossDiv === "undefined") {
81    div = document.createElement("img");
82    div.style.cssText = "position: absolute; z-index: 1000002; display: none;";
83    // Hopefully Google never changes the standard "X" attributes:
84    div.style.marginLeft = "-8px";
85    div.style.marginTop = "-9px";
86    div.src = crossURL;
87    MarkerLabel_.getSharedCross.crossDiv = div;
88  }
89  return MarkerLabel_.getSharedCross.crossDiv;
90};
91
92/**
93 * Adds the DIV representing the label to the DOM. This method is called
94 * automatically when the marker's <code>setMap</code> method is called.
95 * @private
96 */
97MarkerLabel_.prototype.onAdd = function () {
98  var me = this;
99  var cMouseIsDown = false;
100  var cDraggingLabel = false;
101  var cSavedZIndex;
102  var cLatOffset, cLngOffset;
103  var cIgnoreClick;
104  var cRaiseEnabled;
105  var cStartPosition;
106  var cStartCenter;
107  // Constants:
108  var cRaiseOffset = 20;
109  var cDraggingCursor = "url(" + this.handCursorURL_ + ")";
110
111  // Stops all processing of an event.
112  //
113  var cAbortEvent = function (e) {
114    if (e.preventDefault) {
115      e.preventDefault();
116    }
117    e.cancelBubble = true;
118    if (e.stopPropagation) {
119      e.stopPropagation();
120    }
121  };
122
123  var cStopBounce = function () {
124    me.marker_.setAnimation(null);
125  };
126
127  this.getPanes().overlayImage.appendChild(this.labelDiv_);
128  this.getPanes().overlayMouseTarget.appendChild(this.eventDiv_);
129  // One cross is shared with all markers, so only add it once:
130  if (typeof MarkerLabel_.getSharedCross.processed === "undefined") {
131    this.getPanes().overlayImage.appendChild(this.crossDiv_);
132    MarkerLabel_.getSharedCross.processed = true;
133  }
134
135  this.listeners_ = [
136    google.maps.event.addDomListener(this.eventDiv_, "mouseover", function (e) {
137      me.labelDiv_.classList.add("hover");
138      if (me.marker_.getDraggable() || me.marker_.getClickable()) {
139        this.style.cursor = "pointer";
140        google.maps.event.trigger(me.marker_, "mouseover", e);
141      }
142    }),
143    google.maps.event.addDomListener(this.eventDiv_, "mouseout", function (e) {
144      me.labelDiv_.classList.remove("hover");
145      if ((me.marker_.getDraggable() || me.marker_.getClickable()) && !cDraggingLabel) {
146        this.style.cursor = me.marker_.getCursor();
147        google.maps.event.trigger(me.marker_, "mouseout", e);
148      }
149    }),
150    google.maps.event.addDomListener(this.eventDiv_, "mousedown", function (e) {
151      cDraggingLabel = false;
152      if (me.marker_.getDraggable()) {
153        cMouseIsDown = true;
154        this.style.cursor = cDraggingCursor;
155      }
156      if (me.marker_.getDraggable() || me.marker_.getClickable()) {
157        google.maps.event.trigger(me.marker_, "mousedown", e);
158        cAbortEvent(e); // Prevent map pan when starting a drag on a label
159      }
160    }),
161    google.maps.event.addDomListener(document, "mouseup", function (mEvent) {
162      var position;
163      if (cMouseIsDown) {
164        cMouseIsDown = false;
165        me.eventDiv_.style.cursor = "pointer";
166        google.maps.event.trigger(me.marker_, "mouseup", mEvent);
167      }
168      if (cDraggingLabel) {
169        if (cRaiseEnabled) { // Lower the marker & label
170          position = me.getProjection().fromLatLngToDivPixel(me.marker_.getPosition());
171          position.y += cRaiseOffset;
172          me.marker_.setPosition(me.getProjection().fromDivPixelToLatLng(position));
173          // This is not the same bouncing style as when the marker portion is dragged,
174          // but it will have to do:
175          try { // Will fail if running Google Maps API earlier than V3.3
176            me.marker_.setAnimation(google.maps.Animation.BOUNCE);
177            setTimeout(cStopBounce, 1406);
178          } catch (e) {}
179        }
180        me.crossDiv_.style.display = "none";
181        me.marker_.setZIndex(cSavedZIndex);
182        cIgnoreClick = true; // Set flag to ignore the click event reported after a label drag
183        cDraggingLabel = false;
184        mEvent.latLng = me.marker_.getPosition();
185        google.maps.event.trigger(me.marker_, "dragend", mEvent);
186      }
187    }),
188    google.maps.event.addListener(me.marker_.getMap(), "mousemove", function (mEvent) {
189      var position;
190      if (cMouseIsDown) {
191        if (cDraggingLabel) {
192          // Change the reported location from the mouse position to the marker position:
193          mEvent.latLng = new google.maps.LatLng(mEvent.latLng.lat() - cLatOffset, mEvent.latLng.lng() - cLngOffset);
194          position = me.getProjection().fromLatLngToDivPixel(mEvent.latLng);
195          if (cRaiseEnabled) {
196            me.crossDiv_.style.left = position.x + "px";
197            me.crossDiv_.style.top = position.y + "px";
198            me.crossDiv_.style.display = "";
199            position.y -= cRaiseOffset;
200          }
201          me.marker_.setPosition(me.getProjection().fromDivPixelToLatLng(position));
202          if (cRaiseEnabled) { // Don't raise the veil; this hack needed to make MSIE act properly
203            me.eventDiv_.style.top = (position.y + cRaiseOffset) + "px";
204          }
205          google.maps.event.trigger(me.marker_, "drag", mEvent);
206        } else {
207          // Calculate offsets from the click point to the marker position:
208          cLatOffset = mEvent.latLng.lat() - me.marker_.getPosition().lat();
209          cLngOffset = mEvent.latLng.lng() - me.marker_.getPosition().lng();
210          cSavedZIndex = me.marker_.getZIndex();
211          cStartPosition = me.marker_.getPosition();
212          cStartCenter = me.marker_.getMap().getCenter();
213          cRaiseEnabled = me.marker_.get("raiseOnDrag");
214          cDraggingLabel = true;
215          me.marker_.setZIndex(1000000); // Moves the marker & label to the foreground during a drag
216          mEvent.latLng = me.marker_.getPosition();
217          google.maps.event.trigger(me.marker_, "dragstart", mEvent);
218        }
219      }
220    }),
221    google.maps.event.addDomListener(document, "keydown", function (e) {
222      if (cDraggingLabel) {
223        if (e.keyCode === 27) { // Esc key
224          cRaiseEnabled = false;
225          me.marker_.setPosition(cStartPosition);
226          me.marker_.getMap().setCenter(cStartCenter);
227          google.maps.event.trigger(document, "mouseup", e);
228        }
229      }
230    }),
231    google.maps.event.addDomListener(this.eventDiv_, "click", function (e) {
232      if (me.marker_.getDraggable() || me.marker_.getClickable()) {
233        if (cIgnoreClick) { // Ignore the click reported when a label drag ends
234          cIgnoreClick = false;
235        } else {
236          google.maps.event.trigger(me.marker_, "click", e);
237          cAbortEvent(e); // Prevent click from being passed on to map
238        }
239      }
240    }),
241    google.maps.event.addDomListener(this.eventDiv_, "dblclick", function (e) {
242      if (me.marker_.getDraggable() || me.marker_.getClickable()) {
243        google.maps.event.trigger(me.marker_, "dblclick", e);
244        cAbortEvent(e); // Prevent map zoom when double-clicking on a label
245      }
246    }),
247    google.maps.event.addListener(this.marker_, "dragstart", function (mEvent) {
248      if (!cDraggingLabel) {
249        cRaiseEnabled = this.get("raiseOnDrag");
250      }
251    }),
252    google.maps.event.addListener(this.marker_, "drag", function (mEvent) {
253      if (!cDraggingLabel) {
254        if (cRaiseEnabled) {
255          me.setPosition(cRaiseOffset);
256          // During a drag, the marker's z-index is temporarily set to 1000000 to
257          // ensure it appears above all other markers. Also set the label's z-index
258          // to 1000000 (plus or minus 1 depending on whether the label is supposed
259          // to be above or below the marker).
260          me.labelDiv_.style.zIndex = 1000000 + (this.get("labelInBackground") ? -1 : +1);
261        }
262      }
263    }),
264    google.maps.event.addListener(this.marker_, "dragend", function (mEvent) {
265      if (!cDraggingLabel) {
266        if (cRaiseEnabled) {
267          me.setPosition(0); // Also restores z-index of label
268        }
269      }
270    }),
271    google.maps.event.addListener(this.marker_, "position_changed", function () {
272      me.setPosition();
273    }),
274    google.maps.event.addListener(this.marker_, "zindex_changed", function () {
275      me.setZIndex();
276    }),
277    google.maps.event.addListener(this.marker_, "visible_changed", function () {
278      me.setVisible();
279    }),
280    google.maps.event.addListener(this.marker_, "labelvisible_changed", function () {
281      me.setVisible();
282    }),
283    google.maps.event.addListener(this.marker_, "title_changed", function () {
284      me.setTitle();
285    }),
286    google.maps.event.addListener(this.marker_, "labelcontent_changed", function () {
287      me.setContent();
288    }),
289    google.maps.event.addListener(this.marker_, "labelanchor_changed", function () {
290      me.setAnchor();
291    }),
292    google.maps.event.addListener(this.marker_, "labelclass_changed", function () {
293      me.setStyles();
294    }),
295    google.maps.event.addListener(this.marker_, "labelstyle_changed", function () {
296      me.setStyles();
297    })
298  ];
299};
300
301/**
302 * Removes the DIV for the label from the DOM. It also removes all event handlers.
303 * This method is called automatically when the marker's <code>setMap(null)</code>
304 * method is called.
305 * @private
306 */
307MarkerLabel_.prototype.onRemove = function () {
308  var i;
309  this.labelDiv_.parentNode.removeChild(this.labelDiv_);
310  this.eventDiv_.parentNode.removeChild(this.eventDiv_);
311
312  // Remove event listeners:
313  for (i = 0; i < this.listeners_.length; i++) {
314    google.maps.event.removeListener(this.listeners_[i]);
315  }
316};
317
318/**
319 * Draws the label on the map.
320 * @private
321 */
322MarkerLabel_.prototype.draw = function () {
323  this.setContent();
324  this.setTitle();
325  this.setStyles();
326};
327
328/**
329 * Sets the content of the label.
330 * The content can be plain text or an HTML DOM node.
331 * @private
332 */
333MarkerLabel_.prototype.setContent = function () {
334  var content = this.marker_.get("labelContent");
335  if (typeof content.nodeType === "undefined") {
336    this.labelDiv_.innerHTML = content;
337    this.eventDiv_.innerHTML = this.labelDiv_.innerHTML;
338  } else {
339    this.labelDiv_.innerHTML = ""; // Remove current content
340    this.labelDiv_.appendChild(content);
341    content = content.cloneNode(true);
342    this.eventDiv_.appendChild(content);
343  }
344};
345
346/**
347 * Sets the content of the tool tip for the label. It is
348 * always set to be the same as for the marker itself.
349 * @private
350 */
351MarkerLabel_.prototype.setTitle = function () {
352  this.eventDiv_.title = this.marker_.getTitle() || "";
353};
354
355/**
356 * Sets the style of the label by setting the style sheet and applying
357 * other specific styles requested.
358 * @private
359 */
360MarkerLabel_.prototype.setStyles = function () {
361  var i, labelStyle;
362
363  // Apply style values from the style sheet defined in the labelClass parameter:
364  this.labelDiv_.className = this.marker_.get("labelClass");
365  this.eventDiv_.className = this.labelDiv_.className;
366
367  // Clear existing inline style values:
368  this.labelDiv_.style.cssText = "";
369  this.eventDiv_.style.cssText = "";
370  // Apply style values defined in the labelStyle parameter:
371  labelStyle = this.marker_.get("labelStyle");
372  for (i in labelStyle) {
373    if (labelStyle.hasOwnProperty(i)) {
374      this.labelDiv_.style[i] = labelStyle[i];
375      this.eventDiv_.style[i] = labelStyle[i];
376    }
377  }
378  this.setMandatoryStyles();
379};
380
381/**
382 * Sets the mandatory styles to the DIV representing the label as well as to the
383 * associated event DIV. This includes setting the DIV position, z-index, and visibility.
384 * @private
385 */
386MarkerLabel_.prototype.setMandatoryStyles = function () {
387  this.labelDiv_.style.position = "absolute";
388  this.labelDiv_.style.overflow = "hidden";
389  // Make sure the opacity setting causes the desired effect on MSIE:
390  if (typeof this.labelDiv_.style.opacity !== "undefined" && this.labelDiv_.style.opacity !== "") {
391    this.labelDiv_.style.filter = "alpha(opacity=" + (this.labelDiv_.style.opacity * 100) + ")";
392  }
393
394  this.eventDiv_.style.position = this.labelDiv_.style.position;
395  this.eventDiv_.style.overflow = this.labelDiv_.style.overflow;
396  this.eventDiv_.style.opacity = 0.01; // Don't use 0; DIV won't be clickable on MSIE
397  this.eventDiv_.style.filter = "alpha(opacity=1)"; // For MSIE
398
399  this.setAnchor();
400  this.setPosition(); // This also updates z-index, if necessary.
401  this.setVisible();
402};
403
404/**
405 * Sets the anchor point of the label.
406 * @private
407 */
408MarkerLabel_.prototype.setAnchor = function () {
409  var anchor = this.marker_.get("labelAnchor");
410  this.labelDiv_.style.marginLeft = -(this.labelDiv_.offsetWidth / 2) + "px";
411  this.labelDiv_.style.marginTop = -anchor.y + "px";
412  this.eventDiv_.style.marginLeft = -(this.eventDiv_.offsetWidth / 2) + "px";
413  this.eventDiv_.style.marginTop = -anchor.y + "px";
414};
415
416/**
417 * Sets the position of the label. The z-index is also updated, if necessary.
418 * @private
419 */
420MarkerLabel_.prototype.setPosition = function (yOffset) {
421  var position = this.getProjection().fromLatLngToDivPixel(this.marker_.getPosition());
422  if (typeof yOffset === "undefined") {
423    yOffset = 0;
424  }
425  this.labelDiv_.style.left = Math.round(position.x) + "px";
426  this.labelDiv_.style.top = Math.round(position.y - yOffset) + "px";
427  this.eventDiv_.style.left = this.labelDiv_.style.left;
428  this.eventDiv_.style.top = this.labelDiv_.style.top;
429
430  this.setZIndex();
431};
432
433/**
434 * Sets the z-index of the label. If the marker's z-index property has not been defined, the z-index
435 * of the label is set to the vertical coordinate of the label. This is in keeping with the default
436 * stacking order for Google Maps: markers to the south are in front of markers to the north.
437 * @private
438 */
439MarkerLabel_.prototype.setZIndex = function () {
440  var zAdjust = (this.marker_.get("labelInBackground") ? -1 : +1);
441  if (typeof this.marker_.getZIndex() === "undefined") {
442    this.labelDiv_.style.zIndex = parseInt(this.labelDiv_.style.top, 10) + zAdjust;
443    this.eventDiv_.style.zIndex = this.labelDiv_.style.zIndex;
444  } else {
445    this.labelDiv_.style.zIndex = this.marker_.getZIndex() + zAdjust;
446    this.eventDiv_.style.zIndex = this.labelDiv_.style.zIndex;
447  }
448};
449
450/**
451 * Sets the visibility of the label. The label is visible only if the marker itself is
452 * visible (i.e., its visible property is true) and the labelVisible property is true.
453 * @private
454 */
455MarkerLabel_.prototype.setVisible = function () {
456  if (this.marker_.get("labelVisible")) {
457    this.labelDiv_.style.display = this.marker_.getVisible() ? "block" : "none";
458  } else {
459    this.labelDiv_.style.display = "none";
460  }
461  this.eventDiv_.style.display = this.labelDiv_.style.display;
462};
463
464/**
465 * @name MarkerWithLabelOptions
466 * @class This class represents the optional parameter passed to the {@link MarkerWithLabel} constructor.
467 *  The properties available are the same as for <code>google.maps.Marker</code> with the addition
468 *  of the properties listed below. To change any of these additional properties after the labeled
469 *  marker has been created, call <code>google.maps.Marker.set(propertyName, propertyValue)</code>.
470 *  <p>
471 *  When any of these properties changes, a property changed event is fired. The names of these
472 *  events are derived from the name of the property and are of the form <code>propertyname_changed</code>.
473 *  For example, if the content of the label changes, a <code>labelcontent_changed</code> event
474 *  is fired.
475 *  <p>
476 * @property {string|Node} [labelContent] The content of the label (plain text or an HTML DOM node).
477 * @property {Point} [labelAnchor] By default, a label is drawn with its anchor point at (0,0) so
478 *  that its top left corner is positioned at the anchor point of the associated marker. Use this
479 *  property to change the anchor point of the label. For example, to center a 50px-wide label
480 *  beneath a marker, specify a <code>labelAnchor</code> of <code>google.maps.Point(25, 0)</code>.
481 *  (Note: x-values increase to the right and y-values increase to the top.)
482 * @property {string} [labelClass] The name of the CSS class defining the styles for the label.
483 *  Note that style values for <code>position</code>, <code>overflow</code>, <code>top</code>,
484 *  <code>left</code>, <code>zIndex</code>, <code>display</code>, <code>marginLeft</code>, and
485 *  <code>marginTop</code> are ignored; these styles are for internal use only.
486 * @property {Object} [labelStyle] An object literal whose properties define specific CSS
487 *  style values to be applied to the label. Style values defined here override those that may
488 *  be defined in the <code>labelClass</code> style sheet. If this property is changed after the
489 *  label has been created, all previously set styles (except those defined in the style sheet)
490 *  are removed from the label before the new style values are applied.
491 *  Note that style values for <code>position</code>, <code>overflow</code>, <code>top</code>,
492 *  <code>left</code>, <code>zIndex</code>, <code>display</code>, <code>marginLeft</code>, and
493 *  <code>marginTop</code> are ignored; these styles are for internal use only.
494 * @property {boolean}