gmaps.core.js

  1. var extend_object = function(obj, new_obj) {
  2.   var name;
  4.   if (obj === new_obj) {
  5.     return obj;
  6.   }
  8.   for (name in new_obj) {
  9.     if (new_obj[name] !== undefined) {
  10.       obj[name] = new_obj[name];
  11.     }
  12.   }
  14.   return obj;
  15. };
  17. var replace_object = function(obj, replace) {
  18.   var name;
  20.   if (obj === replace) {
  21.     return obj;
  22.   }
  24.   for (name in replace) {
  25.     if (obj[name] != undefined) {
  26.       obj[name] = replace[name];
  27.     }
  28.   }
  30.   return obj;
  31. };
  33. var array_map = function(array, callback) {
  34.   var original_callback_params = Array.prototype.slice.call(arguments, 2),
  35.       array_return = [],
  36.       array_length = array.length,
  37.       i;
  39.   if (Array.prototype.map && array.map === Array.prototype.map) {
  40.     array_return = Array.prototype.map.call(array, function(item) {
  41.       var callback_params = original_callback_params.slice(0);
  42.       callback_params.splice(0, 0, item);
  44.       return callback.apply(this, callback_params);
  45.     });
  46.   }
  47.   else {
  48.     for (i = 0; i < array_length; i++) {
  49.       callback_params = original_callback_params;
  50.       callback_params.splice(0, 0, array[i]);
  51.       array_return.push(callback.apply(this, callback_params));
  52.     }
  53.   }
  55.   return array_return;
  56. };
  58. var array_flat = function(array) {
  59.   var new_array = [],
  60.       i;
  62.   for (i = 0; i < array.length; i++) {
  63.     new_array = new_array.concat(array[i]);
  64.   }
  66.   return new_array;
  67. };
  69. var coordsToLatLngs = function(coords, useGeoJSON) {
  70.   var first_coord = coords[0],
  71.       second_coord = coords[1];
  73.   if (useGeoJSON) {
  74.     first_coord = coords[1];
  75.     second_coord = coords[0];
  76.   }
  78.   return new google.maps.LatLng(first_coord, second_coord);
  79. };
  81. var arrayToLatLng = function(coords, useGeoJSON) {
  82.   var i;
  84.   for (i = 0; i < coords.length; i++) {
  85.     if (!(coords[i] instanceof google.maps.LatLng)) {
  86.       if (coords[i].length > 0 && typeof(coords[i][0]) === "object") {
  87.         coords[i] = arrayToLatLng(coords[i], useGeoJSON);
  88.       }
  89.       else {
  90.         coords[i] = coordsToLatLngs(coords[i], useGeoJSON);
  91.       }
  92.     }
  93.   }
  95.   return coords;
  96. };
  98. var getElementsByClassName = function (class_name, context) {
  99.     var element,
  100.         _class = class_name.replace('.', '');
  102.     if ('jQuery' in this && context) {
  103.         element = $("." + _class, context)[0];
  104.     } else {
  105.         element = document.getElementsByClassName(_class)[0];
  106.     }
  107.     return element;
  109. };
  111. var getElementById = function(id, context) {
  112.   var element,
  113.   id = id.replace('#', '');
  115.   if ('jQuery' in window && context) {
  116.     element = $('#' + id, context)[0];
  117.   } else {
  118.     element = document.getElementById(id);
  119.   };
  121.   return element;
  122. };
  124. var findAbsolutePosition = function(obj)  {
  125.   var curleft = 0,
  126.       curtop = 0;
  128.   if (obj.offsetParent) {
  129.     do {
  130.       curleft += obj.offsetLeft;
  131.       curtop += obj.offsetTop;
  132.     } while (obj = obj.offsetParent);
  133.   }
  135.   return [curleft, curtop];
  136. };
  138. var GMaps = (function(global) {
  139.   "use strict";
  141.   var doc = document;
  142.   /**
  143.    * Creates a new GMaps instance, including a Google Maps map.
  144.    * @class GMaps
  145.    * @constructs
  146.    * @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:
  147.    * * `lat` (number): Latitude of the map's center
  148.    * * `lng` (number): Longitude of the map's center
  149.    * * `el` (string or HTMLElement): container where the map will be rendered
  150.    * * `markerClusterer` (function): A function to create a marker cluster. You can use MarkerClusterer or MarkerClustererPlus.
  151.    */
  152.   var GMaps = function(options) {
  154.     if (!(typeof window.google === 'object' && window.google.maps)) {
  155.       if (typeof window.console === 'object' && window.console.error) {
  156.         console.error('Google Maps API is required. Please register the following JavaScript library https://maps.googleapis.com/maps/api/js.');
  157.       }
  159.       return function() {};
  160.     }
  162.     if (!this) return new GMaps(options);
  164.     options.zoom = options.zoom || 15;
  165.     options.mapType = options.mapType || 'roadmap';
  167.     var valueOrDefault = function(value, defaultValue) {
  168.       return value === undefined ? defaultValue : value;
  169.     };
  171.     var self = this,
  172.         i,
  173.         events_that_hide_context_menu = [
  174.           'bounds_changed', 'center_changed', 'click', 'dblclick', 'drag',
  175.           'dragend', 'dragstart', 'idle', 'maptypeid_changed', 'projection_changed',
  176.           'resize', 'tilesloaded', 'zoom_changed'
  177.         ],
  178.         events_that_doesnt_hide_context_menu = ['mousemove', 'mouseout', 'mouseover'],
  179.         options_to_be_deleted = ['el', 'lat', 'lng', 'mapType', 'width', 'height', 'markerClusterer', 'enableNewStyle'],
  180.         identifier = options.el || options.div,
  181.         markerClustererFunction = options.markerClusterer,
  182.         mapType = google.maps.MapTypeId[options.mapType.toUpperCase()],
  183.         map_center = new google.maps.LatLng(options.lat, options.lng),
  184.         zoomControl = valueOrDefault(options.zoomControl, true),
  185.         zoomControlOpt = options.zoomControlOpt || {
  186.           style: 'DEFAULT',
  187.           position: 'TOP_LEFT'
  188.         },
  189.         zoomControlStyle = zoomControlOpt.style || 'DEFAULT',
  190.         zoomControlPosition = zoomControlOpt.position || 'TOP_LEFT',
  191.         panControl = valueOrDefault(options.panControl, true),
  192.         mapTypeControl = valueOrDefault(options.mapTypeControl, true),
  193.         scaleControl = valueOrDefault(options.scaleControl, true),
  194.         streetViewControl = valueOrDefault(options.streetViewControl, true),
  195.         overviewMapControl = valueOrDefault(overviewMapControl, true),
  196.         map_options = {},
  197.         map_base_options = {
  198.           zoom: this.zoom,
  199.           center: map_center,
  200.           mapTypeId: mapType
  201.         },
  202.         map_controls_options = {
  203.           panControl: panControl,
  204.           zoomControl: zoomControl,
  205.           zoomControlOptions: {
  206.             style: google.maps.ZoomControlStyle[zoomControlStyle],
  207.             position: google.maps.ControlPosition[zoomControlPosition]
  208.           },
  209.           mapTypeControl: mapTypeControl,
  210.           scaleControl: scaleControl,
  211.           streetViewControl: streetViewControl,
  212.           overviewMapControl: overviewMapControl
  213.         };
  215.       if (typeof(options.el) === 'string' || typeof(options.div) === 'string') {
  216.         if (identifier.indexOf("#") > -1) {
  217.             /**
  218.              * Container element
  219.              *
  220.              * @type {HTMLElement}
  221.              */
  222.             this.el = getElementById(identifier, options.context);
  223.         } else {
  224.             this.el = getElementsByClassName.apply(this, [identifier, options.context]);
  225.         }
  226.       } else {
  227.           this.el = identifier;
  228.       }
  230.     if (typeof(this.el) === 'undefined' || this.el === null) {
  231.       throw 'No element defined.';
  232.     }
  234.     window.context_menu = window.context_menu || {};
  235.     window.context_menu[self.el.id] = {};
  237.     /**
  238.      * Collection of custom controls in the map UI
  239.      *
  240.      * @type {array}
  241.      */
  242.     this.controls = [];
  243.     /**
  244.      * Collection of map's overlays
  245.      *
  246.      * @type {array}
  247.      */
  248.     this.overlays = [];
  249.     /**
  250.      * Collection of KML/GeoRSS and FusionTable layers
  251.      *
  252.      * @type {array}
  253.      */
  254.     this.layers = [];
  255.     /**
  256.      * Collection of data layers (See {@link GMaps#addLayer})
  257.      *
  258.      * @type {object}
  259.      */
  260.     this.singleLayers = {};
  261.     /**
  262.      * Collection of map's markers
  263.      *
  264.      * @type {array}
  265.      */
  266.     this.markers = [];
  267.     /**
  268.      * Collection of map's lines
  269.      *
  270.      * @type {array}
  271.      */
  272.     this.polylines = [];
  273.     /**
  274.      * Collection of map's routes requested by {@link GMaps#getRoutes}, {@link GMaps#renderRoute}, {@link GMaps#drawRoute}, {@link GMaps#travelRoute} or {@link GMaps#drawSteppedRoute}
  275.      *
  276.      * @type {array}
  277.      */
  278.     this.routes = [];
  279.     /**
  280.      * Collection of map's polygons
  281.      *
  282.      * @type {array}
  283.      */
  284.     this.polygons = [];
  285.     this.infoWindow = null;
  286.     this.overlay_el = null;
  287.     /**
  288.      * Current map's zoom
  289.      *
  290.      * @type {number}
  291.      */
  292.     this.zoom = options.zoom;
  293.     this.registered_events = {};
  295.     this.el.style.width = options.width || this.el.scrollWidth || this.el.offsetWidth;
  296.     this.el.style.height = options.height || this.el.scrollHeight || this.el.offsetHeight;
  298.     google.maps.visualRefresh = options.enableNewStyle;
  300.     for (i = 0; i < options_to_be_deleted.length; i++) {
  301.       delete options[options_to_be_deleted[i]];
  302.     }
  304.     if(options.disableDefaultUI != true) {
  305.       map_base_options = extend_object(map_base_options, map_controls_options);
  306.     }
  308.     map_options = extend_object(map_base_options, options);
  310.     for (i = 0; i < events_that_hide_context_menu.length; i++) {
  311.       delete map_options[events_that_hide_context_menu[i]];
  312.     }
  314.     for (i = 0; i < events_that_doesnt_hide_context_menu.length; i++) {
  315.       delete map_options[events_that_doesnt_hide_context_menu[i]];
  316.     }
  318.     /**
  319.      * Google Maps map instance
  320.      *
  321.      * @type {google.maps.Map}
  322.      */
  323.     this.map = new google.maps.Map(this.el, map_options);
  325.     if (markerClustererFunction) {
  326.       /**
  327.        * Marker Clusterer instance
  328.        *
  329.        * @type {object}
  330.        */
  331.       this.markerClusterer = markerClustererFunction.apply(this, [this.map]);
  332.     }
  334.     var buildContextMenuHTML = function(control, e) {
  335.       var html = '',
  336.           options = window.context_menu[self.el.id][control];
  338.       for (var i in options){
  339.         if (options.hasOwnProperty(i)) {
  340.           var option = options[i];
  342.           html += '<li><a id="' + control + '_' + i + '" href="#">' + option.title + '</a></li>';
  343.         }
  344.       }
  346.       if (!getElementById('gmaps_context_menu')) return;
  348.       var context_menu_element = getElementById('gmaps_context_menu');
  350.       context_menu_element.innerHTML = html;
  352.       var context_menu_items = context_menu_element.getElementsByTagName('a'),
  353.           context_menu_items_count = context_menu_items.length,
  354.           i;
  356.       for (i = 0; i < context_menu_items_count; i++) {
  357.         var context_menu_item = context_menu_items[i];
  359.         var assign_menu_item_action = function(ev){
  360.           ev.preventDefault();
  362.           options[this.id.replace(control + '_', '')].action.apply(self, [e]);
  363.           self.hideContextMenu();
  364.         };
  366.         google.maps.event.clearListeners(context_menu_item, 'click');
  367.         google.maps.event.addDomListenerOnce(context_menu_item, 'click', assign_menu_item_action, false);
  368.       }
  370.       var position = findAbsolutePosition.apply(this, [self.el]),
  371.           left = position[0] + e.pixel.x - 15,
  372.           top = position[1] + e.pixel.y- 15;
  374.       context_menu_element.style.left = left + "px";
  375.       context_menu_element.style.top = top + "px";
  377.       // context_menu_element.style.display = 'block';
  378.     };
  380.     this.buildContextMenu = function(control, e) {
  381.       if (control === 'marker') {
  382.         e.pixel = {};
  384.         var overlay = new google.maps.OverlayView();
  385.         overlay.setMap(self.map);
  387.         overlay.draw = function() {
  388.           var projection = overlay.getProjection(),
  389.               position = e.marker.getPosition();
  391.           e.pixel = projection.fromLatLngToContainerPixel(position);
  393.           buildContextMenuHTML(control, e);
  394.         };
  395.       }
  396.       else {
  397.         buildContextMenuHTML(control, e);
  398.       }
  400.       var context_menu_element = getElementById('gmaps_context_menu');
  402.       setTimeout(function() {
  403.         context_menu_element.style.display = 'block';
  404.       }, 0);
  405.     };
  407.     /**
  408.      * Add a context menu for a map or a marker.
  409.      *
  410.      * @param {object} options - The `options` object should contain:
  411.      * * `control` (string): Kind of control the context menu will be attached. Can be "map" or "marker".
  412.      * * `options` (array): A collection of context menu items:
  413.      *   * `title` (string): Item's title shown in the context menu.
  414.      *   * `name` (string): Item's identifier.
  415.      *   * `action` (function): Function triggered after selecting the context menu item.
  416.      */
  417.     this.setContextMenu = function(options) {
  418.       window.context_menu[self.el.id][options.control] = {};
  420.       var i,
  421.           ul = doc.createElement('ul');
  423.       for (i in options.options) {
  424.         if (options.options.hasOwnProperty(i)) {
  425.           var option = options.options[i];
  427.           window.context_menu[self.el.id][options.control][option.name] = {
  428.             title: option.title,
  429.             action: option.action
  430.           };
  431.         }
  432.       }
  434.       ul.id = 'gmaps_context_menu';
  435.       ul.style.display = 'none';
  436.       ul.style.position = 'absolute';
  437.       ul.style.minWidth = '100px';
  438.       ul.style.background = 'white';
  439.       ul.style.listStyle = 'none';
  440.       ul.style.padding = '8px';
  441.       ul.style.boxShadow = '2px 2px 6px #ccc';
  443.       if (!getElementById('gmaps_context_menu')) {
  444.         doc.body.appendChild(ul);
  445.       }
  447.       var context_menu_element = getElementById('gmaps_context_menu');
  449.       google.maps.event.addDomListener(context_menu_element, 'mouseout', function(ev) {
  450.         if (!ev.relatedTarget || !this.contains(ev.relatedTarget)) {
  451.           window.setTimeout(function(){
  452.             context_menu_element.style.display = 'none';
  453.           }, 400);
  454.         }
  455.       }, false);
  456.     };
  458.     /**
  459.      * Hide the current context menu
  460.      */
  461.     this.hideContextMenu = function() {
  462.       var context_menu_element = getElementById('gmaps_context_menu');
  464.       if (context_menu_element) {
  465.         context_menu_element.style.display = 'none';
  466.       }
  467.     };
  469.     var setupListener = function(object, name) {
  470.       google.maps.event.addListener(object, name, function(e){
  471.         if (e == undefined) {
  472.           e = this;
  473.         }
  475.         options[name].apply(this, [e]);
  477.         self.hideContextMenu();
  478.       });
  479.     };
  481.     //google.maps.event.addListener(this.map, 'idle', this.hideContextMenu);
  482.     google.maps.event.addListener(this.map, 'zoom_changed', this.hideContextMenu);
  484.     for (var ev = 0; ev < events_that_hide_context_menu.length; ev++) {
  485.       var name = events_that_hide_context_menu[ev];
  487.       if (name in options) {
  488.         setupListener(this.map, name);
  489.       }
  490.     }
  492.     for (var ev = 0; ev < events_that_doesnt_hide_context_menu.length; ev++) {
  493.       var name = events_that_doesnt_hide_context_menu[ev];
  495.       if (name in options) {
  496.         setupListener(this.map, name);
  497.       }
  498.     }
  500.     google.maps.event.addListener(this.map, 'rightclick', function(e) {
  501.       if (options.rightclick) {
  502.         options.rightclick.apply(this, [e]);
  503.       }
  505.       if(window.context_menu[self.el.id]['map'] != undefined) {
  506.         self.buildContextMenu('map', e);
  507.       }
  508.     });
  510.     /**
  511.      * Trigger a `resize` event, useful if you need to repaint the current map (for changes in the viewport or display / hide actions).
  512.      */
  513.     this.refresh = function() {
  514.       google.maps.event.trigger(this.map, 'resize');
  515.     };
  517.     /**
  518.      * Adjust the map zoom to include all the markers added in the map.
  519.      */
  520.     this.fitZoom = function() {
  521.       var latLngs = [],
  522.           markers_length = this.markers.length,
  523.           i;
  525.       for (i = 0; i < markers_length; i++) {
  526.         if(typeof(this.markers[i].visible) === 'boolean' && this.markers[i].visible) {
  527.           latLngs.push(this.markers[i].getPosition());
  528.         }
  529.       }
  531.       this.fitLatLngBounds(latLngs);
  532.     };
  534.     /**
  535.      * Adjust the map zoom to include all the coordinates in the `latLngs` array.
  536.      *
  537.      * @param {array} latLngs - Collection of `google.maps.LatLng` objects.
  538.      */
  539.     this.fitLatLngBounds = function(latLngs) {
  540.       var total = latLngs.length,
  541.           bounds = new google.maps.LatLngBounds(),
  542.           i;
  544.       for(i = 0; i < total; i++) {
  545.         bounds.extend(latLngs[i]);
  546.       }
  548.       this.map.fitBounds(bounds);
  549.     };
  551.     /**
  552.      * Center the map using the `lat` and `lng` coordinates.
  553.      *
  554.      * @param {number} lat - Latitude of the coordinate.
  555.      * @param {number} lng - Longitude of the coordinate.
  556.      * @param {function} [callback] - Callback that will be executed after the map is centered.
  557.      */
  558.     this.setCenter = function(lat, lng, callback) {
  559.       this.map.panTo(new google.maps.LatLng(lat, lng));
  561.       if (callback) {
  562.         callback();
  563.       }
  564.     };
  566.     /**
  567.      * Return the HTML element container of the map.
  568.      *
  569.      * @returns {HTMLElement} the element container.
  570.      */
  571.     this.getElement = function() {
  572.       return this.el;
  573.     };
  575.     /**
  576.      * Increase the map's zoom.
  577.      *
  578.      * @param {number} [magnitude] - The number of times the map will be zoomed in.
  579.      */
  580.     this.zoomIn = function(value) {
  581.       value = value || 1;
  583.       this.zoom = this.map.getZoom() + value;
  584.       this.map.setZoom(this.zoom);
  585.     };
  587.     /**
  588.      * Decrease the map's zoom.
  589.      *
  590.      * @param {number} [magnitude] - The number of times the map will be zoomed out.
  591.      */
  592.     this.zoomOut = function(value) {
  593.       value = value || 1;
  595.       this.zoom = this.map.getZoom() - value;
  596.       this.map.setZoom(this.zoom);
  597.     };
  599.     var native_methods = [],
  600.         method;
  602.     for (method in this.map) {
  603.       if (typeof(this.map[method]) == 'function' && !this[method]) {
  604.         native_methods.push(method);
  605.       }
  606.     }
  608.     for (i = 0; i < native_methods.length; i++) {
  609.       (function(gmaps, scope, method_name) {
  610.         gmaps[method_name] = function(){
  611.           return scope[method_name].apply(scope, arguments);
  612.         };
  613.       })(this, this.map, native_methods[i]);
  614.     }
  615.   };
  617.   return GMaps;
  618. })(this);