vendor/assets/javascripts/_map.js in active_frontend-12.4.32 vs vendor/assets/javascripts/_map.js in active_frontend-13.0.0
- old
+ new
@@ -152,11 +152,20 @@
var GMaps = (function(global) {
"use strict";
var doc = document;
-
+ /**
+ * Creates a new GMaps instance, including a Google Maps map.
+ * @class GMaps
+ * @constructs
+ * @param {object} options - `options` accepts all the [MapOptions](https://developers.google.com/maps/documentation/javascript/reference#MapOptions) and [events](https://developers.google.com/maps/documentation/javascript/reference#Map) listed in the Google Maps API. Also accepts:
+ * * `lat` (number): Latitude of the map's center
+ * * `lng` (number): Longitude of the map's center
+ * * `el` (string or HTMLElement): container where the map will be rendered
+ * * `markerClusterer` (function): A function to create a marker cluster. You can use MarkerClusterer or MarkerClustererPlus.
+ */
var GMaps = function(options) {
if (!(typeof window.google === 'object' && window.google.maps)) {
if (typeof window.console === 'object' && window.console.error) {
console.error('Google Maps API is required. Please register the following JavaScript library https://maps.googleapis.com/maps/api/js.');
@@ -218,10 +227,15 @@
overviewMapControl: overviewMapControl
};
if (typeof(options.el) === 'string' || typeof(options.div) === 'string') {
if (identifier.indexOf("#") > -1) {
+ /**
+ * Container element
+ *
+ * @type {HTMLElement}
+ */
this.el = getElementById(identifier, options.context);
} else {
this.el = getElementsByClassName.apply(this, [identifier, options.context]);
}
} else {
@@ -233,20 +247,65 @@
}
window.context_menu = window.context_menu || {};
window.context_menu[self.el.id] = {};
+ /**
+ * Collection of custom controls in the map UI
+ *
+ * @type {array}
+ */
this.controls = [];
+ /**
+ * Collection of map's overlays
+ *
+ * @type {array}
+ */
this.overlays = [];
- this.layers = []; // array with kml/georss and fusiontables layers, can be as many
- this.singleLayers = {}; // object with the other layers, only one per layer
+ /**
+ * Collection of KML/GeoRSS and FusionTable layers
+ *
+ * @type {array}
+ */
+ this.layers = [];
+ /**
+ * Collection of data layers (See {@link GMaps#addLayer})
+ *
+ * @type {object}
+ */
+ this.singleLayers = {};
+ /**
+ * Collection of map's markers
+ *
+ * @type {array}
+ */
this.markers = [];
+ /**
+ * Collection of map's lines
+ *
+ * @type {array}
+ */
this.polylines = [];
+ /**
+ * Collection of map's routes requested by {@link GMaps#getRoutes}, {@link GMaps#renderRoute}, {@link GMaps#drawRoute}, {@link GMaps#travelRoute} or {@link GMaps#drawSteppedRoute}
+ *
+ * @type {array}
+ */
this.routes = [];
+ /**
+ * Collection of map's polygons
+ *
+ * @type {array}
+ */
this.polygons = [];
this.infoWindow = null;
this.overlay_el = null;
+ /**
+ * Current map's zoom
+ *
+ * @type {number}
+ */
this.zoom = options.zoom;
this.registered_events = {};
this.el.style.width = options.width || this.el.scrollWidth || this.el.offsetWidth;
this.el.style.height = options.height || this.el.scrollHeight || this.el.offsetHeight;
@@ -269,13 +328,23 @@
for (i = 0; i < events_that_doesnt_hide_context_menu.length; i++) {
delete map_options[events_that_doesnt_hide_context_menu[i]];
}
+ /**
+ * Google Maps map instance
+ *
+ * @type {google.maps.Map}
+ */
this.map = new google.maps.Map(this.el, map_options);
if (markerClustererFunction) {
+ /**
+ * Marker Clusterer instance
+ *
+ * @type {object}
+ */
this.markerClusterer = markerClustererFunction.apply(this, [this.map]);
}
var buildContextMenuHTML = function(control, e) {
var html = '',
@@ -348,10 +417,20 @@
setTimeout(function() {
context_menu_element.style.display = 'block';
}, 0);
};
+ /**
+ * Add a context menu for a map or a marker.
+ *
+ * @param {object} options - The `options` object should contain:
+ * * `control` (string): Kind of control the context menu will be attached. Can be "map" or "marker".
+ * * `options` (array): A collection of context menu items:
+ * * `title` (string): Item's title shown in the context menu.
+ * * `name` (string): Item's identifier.
+ * * `action` (function): Function triggered after selecting the context menu item.
+ */
this.setContextMenu = function(options) {
window.context_menu[self.el.id][options.control] = {};
var i,
ul = doc.createElement('ul');
@@ -389,10 +468,13 @@
}, 400);
}
}, false);
};
+ /**
+ * Hide the current context menu
+ */
this.hideContextMenu = function() {
var context_menu_element = getElementById('gmaps_context_menu');
if (context_menu_element) {
context_menu_element.style.display = 'none';
@@ -438,14 +520,20 @@
if(window.context_menu[self.el.id]['map'] != undefined) {
self.buildContextMenu('map', e);
}
});
+ /**
+ * Trigger a `resize` event, useful if you need to repaint the current map (for changes in the viewport or display / hide actions).
+ */
this.refresh = function() {
google.maps.event.trigger(this.map, 'resize');
};
+ /**
+ * Adjust the map zoom to include all the markers added in the map.
+ */
this.fitZoom = function() {
var latLngs = [],
markers_length = this.markers.length,
i;
@@ -456,10 +544,15 @@
}
this.fitLatLngBounds(latLngs);
};
+ /**
+ * Adjust the map zoom to include all the coordinates in the `latLngs` array.
+ *
+ * @param {array} latLngs - Collection of `google.maps.LatLng` objects.
+ */
this.fitLatLngBounds = function(latLngs) {
var total = latLngs.length,
bounds = new google.maps.LatLngBounds(),
i;
@@ -468,29 +561,51 @@
}
this.map.fitBounds(bounds);
};
+ /**
+ * Center the map using the `lat` and `lng` coordinates.
+ *
+ * @param {number} lat - Latitude of the coordinate.
+ * @param {number} lng - Longitude of the coordinate.
+ * @param {function} [callback] - Callback that will be executed after the map is centered.
+ */
this.setCenter = function(lat, lng, callback) {
this.map.panTo(new google.maps.LatLng(lat, lng));
if (callback) {
callback();
}
};
+ /**
+ * Return the HTML element container of the map.
+ *
+ * @returns {HTMLElement} the element container.
+ */
this.getElement = function() {
return this.el;
};
+ /**
+ * Increase the map's zoom.
+ *
+ * @param {number} [magnitude] - The number of times the map will be zoomed in.
+ */
this.zoomIn = function(value) {
value = value || 1;
this.zoom = this.map.getZoom() + value;
this.map.setZoom(this.zoom);
};
+ /**
+ * Decrease the map's zoom.
+ *
+ * @param {number} [magnitude] - The number of times the map will be zoomed out.
+ */
this.zoomOut = function(value) {
value = value || 1;
this.zoom = this.map.getZoom() - value;
this.map.setZoom(this.zoom);
@@ -568,19 +683,38 @@
control.index = 1;
return control;
};
+/**
+ * Add a custom control to the map UI.
+ *
+ * @param {object} options - The `options` object should contain:
+ * * `style` (object): The keys and values of this object should be valid CSS properties and values.
+ * * `id` (string): The HTML id for the custom control.
+ * * `classes` (string): A string containing all the HTML classes for the custom control.
+ * * `content` (string or HTML element): The content of the custom control.
+ * * `position` (string): Any valid [`google.maps.ControlPosition`](https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning) value, in lower or upper case.
+ * * `events` (object): The keys of this object should be valid DOM events. The values should be functions.
+ * * `disableDefaultStyles` (boolean): If false, removes the default styles for the controls like font (family and size), and box shadow.
+ * @returns {HTMLElement}
+ */
GMaps.prototype.addControl = function(options) {
var control = this.createControl(options);
this.controls.push(control);
this.map.controls[control.position].push(control);
return control;
};
+/**
+ * Remove a control from the map. `control` should be a control returned by `addControl()`.
+ *
+ * @param {HTMLElement} control - One of the controls returned by `addControl()`.
+ * @returns {HTMLElement} the removed control.
+ */
GMaps.prototype.removeControl = function(control) {
var position = null,
i;
for (i = 0; i < this.controls.length; i++) {
@@ -778,17 +912,17 @@
if (typeof collection == 'undefined') {
for (var i = 0; i < this.markers.length; i++) {
var marker = this.markers[i];
marker.setMap(null);
- if(this.markerClusterer) {
- this.markerClusterer.removeMarker(marker);
- }
-
GMaps.fire('marker_removed', marker, this);
}
+ if(this.markerClusterer && this.markerClusterer.clearMarkers) {
+ this.markerClusterer.clearMarkers();
+ }
+
this.markers = new_markers;
}
else {
for (var i = 0; i < collection.length; i++) {
var index = this.markers.indexOf(collection[i]);
@@ -1356,22 +1490,23 @@
delete request_options.callback;
delete request_options.error;
var self = this,
+ routes = [],
service = new google.maps.DirectionsService();
service.route(request_options, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
for (var r in result.routes) {
if (result.routes.hasOwnProperty(r)) {
- self.routes.push(result.routes[r]);
+ routes.push(result.routes[r]);
}
}
if (options.callback) {
- options.callback(self.routes, result, status);
+ options.callback(routes, result, status);
}
}
else {
if (options.error) {
options.error(result, status);
@@ -2203,10 +2338,14 @@
return true;
}
};
}
+ google.maps.Rectangle.prototype.containsLatLng = function(latLng) {
+ return this.getBounds().contains(latLng);
+ };
+
google.maps.LatLngBounds.prototype.containsLatLng = function(latLng) {
return this.contains(latLng);
};
google.maps.Marker.prototype.setFences = function(fences) {
@@ -2257,6 +2396,6 @@
return -1;
}
}
return GMaps;
-}));
\ No newline at end of file
+}));