API tools faq
paste
Guenni007

avia_google_maps_api

Guenni007
Mar 3rd, 2020
309
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 12.95 KB | None | 0 0
raw download clone embed print report
  1. // -------------------------------------------------------------------------------------------
  2. //
  3. // AVIA GOOGLE MAPS API - loads the google maps api asynchronously
  4. // Only one infoWindow open at a time
  5. // afterwards applies the map to the container
  6. //
  7. // -------------------------------------------------------------------------------------------
  8.  
  9.  
  10. (function($)
  11. {
  12.     "use strict";
  13.     /******  new variable  *****/
  14.     var openedInfoWindow = null;
  15.  
  16.     $.AviaMapsAPI  =  function(options, container)
  17.     {
  18.         if(typeof window.av_google_map == 'undefined')
  19.         {
  20.             $.avia_utilities.log('Map creation stopped, var av_google_map not found');
  21.             return;
  22.         }
  23.    
  24.         // gather container and map data
  25.         this.container  = container;
  26.         this.$container = $( container );
  27.         this.$body      = $('body');
  28.         this.$mapid     = this.$container.data('mapid');
  29.         this.$data      = window.av_google_map[this.$mapid];
  30.         this.retina     = window.devicePixelRatio > 1;
  31.        
  32.         // set up the whole api object
  33.         this._init( options );
  34.     };
  35.    
  36.     $.AviaMapsAPI.apiFiles =
  37.     {
  38.         loading: false,
  39.         finished: false,
  40.         src: ''
  41.     };
  42.    
  43.     $.AviaMapsAPI.prototype =
  44.     {
  45.         _init: function()
  46.         {
  47.             if( 'undefined' == typeof avia_framework_globals.gmap_maps_loaded || avia_framework_globals.gmap_maps_loaded == '' )
  48.             {
  49.                         //  this is only a fallback setting - should never be used
  50.                 var gmap_version = 'string' == typeof avia_framework_globals.gmap_version ? avia_framework_globals.gmap_version : 'weekly';
  51.                 $.AviaMapsAPI.apiFiles.src = 'https://maps.googleapis.com/maps/api/js?v=' + gmap_version + '&callback=aviaOnGoogleMapsLoaded';
  52.                 if( typeof avia_framework_globals.gmap_api != 'undefined' && avia_framework_globals.gmap_api != "" )
  53.                 {
  54.                     $.AviaMapsAPI.apiFiles.src += "&key=" + avia_framework_globals.gmap_api;
  55.                 }
  56.             }
  57.             else
  58.             {
  59.                 $.AviaMapsAPI.apiFiles.src = avia_framework_globals.gmap_maps_loaded;
  60.             }
  61.            
  62.             this._bind_execution();
  63.             this._getAPI();
  64.         },
  65.        
  66.         _getAPI: function( )
  67.         {  
  68.             //make sure the api file is loaded only once
  69.             if((typeof window.google == 'undefined' || typeof window.google.maps == 'undefined') && $.AviaMapsAPI.apiFiles.loading == false)
  70.             {  
  71.                 $.AviaMapsAPI.apiFiles.loading = true;
  72.                 var script  = document.createElement('script');
  73.                     script.id = 'av-google-maps-api';
  74.                     script.type = 'text/javascript';   
  75.                     script.src  = $.AviaMapsAPI.apiFiles.src;
  76.  
  77.                 document.body.appendChild(script);
  78.             }
  79.             else if((typeof window.google != 'undefined' && typeof window.google.maps != 'undefined') || $.AviaMapsAPI.apiFiles.loading == false)
  80.             //else if($.AviaMapsAPI.apiFiles.finished === true)
  81.             {
  82.                 this._applyMap();
  83.             }
  84.         },
  85.        
  86.         _bind_execution: function()
  87.         {
  88.             this.$body.on('av-google-maps-api-loaded', $.proxy( this._applyMap, this) );
  89.         },
  90.        
  91.         _applyMap: function()
  92.         {
  93.             if(typeof this.map != 'undefined') return;
  94.             if(!this.$data.marker || !this.$data.marker[0] || !this.$data.marker[0].lat || !this.$data.marker[0].long)
  95.             {
  96.                 $.avia_utilities.log('Latitude or Longitude missing', 'map-error');
  97.                 return;
  98.             }
  99.            
  100.             var _self = this,
  101.                 mobile_drag = $.avia_utilities.isMobile ? this.$data.mobile_drag_control : true,
  102.                 zoomValue   = this.$data.zoom == "auto" ? 10 : this.$data.zoom;
  103.        
  104.             var mapTypeControl = false;
  105.             var mapTypeId = google.maps.MapTypeId.ROADMAP;
  106.             var mapTypeControlOptions = google.maps.MapTypeControlStyle.DROPDOWN_MENU;
  107.            
  108.             switch( this.$data.maptype_control )
  109.             {
  110.                 case 'dropdown':
  111.                     mapTypeControl = true;
  112.                     mapTypeControlOptions = google.maps.MapTypeControlStyle.DROPDOWN_MENU;
  113.                     break;
  114.                 case 'horizontal':
  115.                     mapTypeControl = true;
  116.                     mapTypeControlOptions = google.maps.MapTypeControlStyle.HORIZONTAL_BAR;
  117.                     break;
  118.                 case 'default':
  119.                     mapTypeControl = true;
  120.                     mapTypeControlOptions = google.maps.MapTypeControlStyle.DEFAULT;
  121.                     break;
  122.                 default:
  123.                     mapTypeControl = false;
  124.                     mapTypeControlOptions = google.maps.MapTypeControlStyle.DROPDOWN_MENU;
  125.                     break;
  126.             }
  127.            
  128.             switch( this.$data.maptype_id )
  129.             {
  130.                 case 'SATELLITE':
  131.                     mapTypeId = google.maps.MapTypeId.SATELLITE;
  132.                     break;
  133.                 case 'HYBRID':
  134.                     mapTypeId = google.maps.MapTypeId.HYBRID;
  135.                     break;
  136.                 case 'TERRAIN':
  137.                     mapTypeId = google.maps.MapTypeId.TERRAIN;
  138.                     break;
  139.                 default:
  140.                     mapTypeId = google.maps.MapTypeId.ROADMAP;
  141.             }
  142.            
  143.             if( 'undefined' == typeof this.$data.scrollwheel ) {this.$data.scrollwheel = false; }
  144.             if( 'undefined' == typeof this.$data.gestureHandling ) {this.$data.gestureHandling = 'cooperative' };
  145.             if( 'undefined' == typeof this.$data.backgroundColor ) {this.$data.backgroundColor = 'transparent' };
  146.             if( 'undefined' == typeof this.$data.styles ) {this.$data.styles = [{featureType: "poi", elementType: "labels", stylers: [ { visibility: "off" }] }] };
  147.            
  148.             this.mapVars = {
  149.                 mapMaker: false, //mapmaker tiles are user generated content maps. might hold more info but also be inaccurate
  150.                 backgroundColor: this.$data.backgroundColor,
  151.                 streetViewControl: this.$data.streetview_control,
  152.                 zoomControl: this.$data.zoom_control,
  153.                 //draggable: mobile_drag,
  154.                 gestureHandling: this.$data.gestureHandling,
  155.                 scrollwheel: this.$data.scrollwheel,
  156.                 zoom: zoomValue,
  157.                 mapTypeControl: mapTypeControl,
  158.                 mapTypeControlOptions: {style:mapTypeControlOptions},
  159.                 mapTypeId: mapTypeId,
  160.                 center: new google.maps.LatLng(this.$data.marker[0].lat, this.$data.marker[0].long),
  161.                 styles: this.$data.styles
  162.             };
  163.  
  164.             this.map = new google.maps.Map(this.container, this.mapVars);
  165.             this.$container.removeClass('av_gmaps_show_delayed av_gmaps_show_unconditionally');
  166.             this.$container.addClass('av_gmaps_map_attached');
  167.        
  168.             this._applyMapStyle();
  169.            
  170.             if(this.$data.zoom == "auto")
  171.             {
  172.                 this._setAutoZoom();
  173.             }
  174.            
  175.             google.maps.event.addListenerOnce(this.map, 'tilesloaded', function() {
  176.                 _self._addMarkers();
  177.             });
  178.            
  179.             //  must triggr 'resize' because if more then 1 map on page only the first is shown after confirm
  180.             var new_map = this.map;
  181.             setTimeout( function(){
  182.                             google.maps.event.trigger(new_map, 'resize');
  183.                         }, 100 );
  184.         },
  185.        
  186.         _setAutoZoom: function()
  187.         {
  188.             var bounds = new google.maps.LatLngBounds();
  189.            
  190.             for (var key in this.$data.marker)
  191.             {
  192.                 bounds.extend( new google.maps.LatLng (this.$data.marker[key].lat , this.$data.marker[key].long) );
  193.             }
  194.            
  195.             this.map.fitBounds(bounds);
  196.         },
  197.        
  198.         _applyMapStyle: function()
  199.         {
  200.             var stylers = [], style = [], mapType, style_color = "";
  201.            
  202.             if(this.$data.hue != "") stylers.push({hue: this.$data.hue});
  203.             if(this.$data.saturation != "") stylers.push({saturation: this.$data.saturation});
  204.            
  205.             if(stylers.length)
  206.             {
  207.                 style = [{
  208.                           featureType: "all",
  209.                           elementType: "all",
  210.                           stylers: stylers
  211.                         }, {
  212.                           featureType: "poi",
  213.                           stylers: [
  214.                             { visibility: "off" }
  215.                           ]
  216.                         }];
  217.                        
  218.                
  219.                 if(this.$data.saturation == "fill")
  220.                 {
  221.                        
  222.                     style_color = this.$data.hue || "#242424";
  223.                    
  224.                     var c = style_color.substring(1);      // strip #
  225.                     var rgb = parseInt(c, 16);   // convert rrggbb to decimal
  226.                     var r = (rgb >> 16) & 0xff;  // extract red
  227.                     var g = (rgb >>  8) & 0xff;  // extract green
  228.                     var b = (rgb >>  0) & 0xff;  // extract blue
  229.                    
  230.                     var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
  231.                     var lightness = 1;
  232.                     var street_light = 2;
  233.                    
  234.                     if (luma > 60) {
  235.                         lightness = -1;
  236.                         street_light = 3;
  237.                     }
  238.                     if (luma > 220) {
  239.                         lightness = -2;
  240.                         street_light = -2;
  241.                     }
  242.                    
  243.                 style = [
  244. {"featureType":"all","elementType":"all","stylers":[{"color":style_color},{"lightness":0}]},
  245. {"featureType":"all","elementType":"labels.text.fill","stylers":[{"color":style_color},{"lightness":(25 * street_light)}]},
  246. {"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":style_color},{"lightness":3}]},
  247. {"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},
  248. {"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":style_color},{"lightness":30}]},
  249. {"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":style_color},{"lightness":30},{"weight":1.2}]},
  250. {"featureType":"landscape","elementType":"geometry","stylers":[{visibility: 'simplified'},{"color":style_color},{"lightness":3}]},
  251. {"featureType":"poi","elementType":"geometry","stylers":[{ "visibility": "off" }]},
  252. {"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":style_color},{"lightness":-3}]},
  253. {"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":style_color},{"lightness":2},{"weight":0.2}]},
  254. {"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":style_color},{"lightness":-3}]},
  255. {"featureType":"road.local","elementType":"geometry","stylers":[{"color":style_color},{"lightness":-3}]},
  256. {"featureType":"transit","elementType":"geometry","stylers":[{"color":style_color},{"lightness":-3}]},
  257. {"featureType":"water","elementType":"geometry","stylers":[{"color":style_color},{"lightness":-20}]}
  258.                         ];
  259.                 }  
  260.                
  261.                 mapType = new google.maps.StyledMapType(style, { name:"av_map_style" });
  262.                 this.map.mapTypes.set('av_styled_map', mapType);
  263.                 this.map.setMapTypeId('av_styled_map');
  264.             }
  265.         },
  266.        
  267.         _addMarkers: function()
  268.         {
  269.             for (var key in this.$data.marker)
  270.             {  
  271.                 var _self = this;
  272.                
  273.                 (function(key, _self)
  274.                 {
  275.                     setTimeout(function()
  276.                     {
  277.                             var marker = "";
  278.                            
  279.                             if(!_self.$data.marker[key] || !_self.$data.marker[key].lat || !_self.$data.marker[key].long)
  280.                             {
  281.                                 $.avia_utilities.log('Latitude or Longitude for single marker missing', 'map-error');
  282.                                 return;
  283.                             }
  284.                            
  285.                             _self.$data.LatLng = new google.maps.LatLng(_self.$data.marker[key].lat, _self.$data.marker[key].long);
  286.                            
  287.                             var markerArgs = {
  288.                               flat: false,
  289.                               position: _self.$data.LatLng,
  290.                               animation: google.maps.Animation.BOUNCE,
  291.                               map: _self.map,
  292.                               title: _self.$data.marker[key].address,
  293.                               optimized: false
  294.                             };
  295.                            
  296.                             //set a custom marker image if available. also set the size and reduce the marker on retina size so its sharp
  297.                             if(_self.$data.marker[key].icon && _self.$data.marker[key].imagesize)
  298.                             {
  299.                                 var size = _self.$data.marker[key].imagesize, half = "", full = "";
  300.                                
  301.                                 if(_self.retina && size > 40) size = 40;            //retina downsize to at least half the px size
  302.                                 half = new google.maps.Point(size / 2, size ) ;     //used to position the marker
  303.                                 full = new google.maps.Size(size , size ) ;         //marker size
  304.                                 markerArgs.icon = new google.maps.MarkerImage(_self.$data.marker[key].icon, null, null, half, full);
  305.                             }
  306.                            
  307.                             marker = new google.maps.Marker(markerArgs);
  308.                            
  309.                             setTimeout(function(){ marker.setAnimation(null); _self._infoWindow(_self.map, marker, _self.$data.marker[key]); },500);
  310.                            
  311.                     },200 * (parseInt(key,10) + 1));
  312.                        
  313.                 }(key, _self));
  314.             }
  315.         },
  316.        
  317.         _infoWindow: function(map, marker, data)
  318.         {
  319.             var info = $.trim(data.content);
  320.            
  321.             if(info != "")
  322.             {
  323.                 var infowindow = new google.maps.InfoWindow({
  324.                     content: info
  325.                 });
  326.  
  327. /******** these lines are new ******/
  328.  
  329.                 google.maps.event.addListener(marker, 'click', function() {
  330.                     if (openedInfoWindow != null)
  331.                         openedInfoWindow.close();
  332.  
  333.                     infowindow.open(map,marker);
  334.  
  335.                     openedInfoWindow = infowindow;
  336.  
  337.                     google.maps.event.addListener(infowindow, 'closeclick', function() {
  338.                         openedInfoWindow = null;
  339.                     });
  340.  
  341.                     google.maps.event.addListener(map, 'click', function() {
  342.                         infowindow.close();
  343.                     });
  344.                 });
  345.  
  346. /******* end of replaced code   ******/
  347.  
  348.                 if(data.tooltip_display) infowindow.open(map,marker);
  349.             }
  350.         }
  351.        
  352.        
  353.     };
  354.  
  355.     //simple wrapper to call the api. makes sure that the api data is not applied twice
  356.     $.fn.aviaMaps = function( options )
  357.     {
  358.         return this.each(function()
  359.         {  
  360.             var self = $.data( this, 'aviaMapsApi' );
  361.            
  362.             if(!self)
  363.             {
  364.                 self = $.data( this, 'aviaMapsApi', new $.AviaMapsAPI( options, this ) );
  365.             }
  366.         });
  367.     };
  368.    
  369.    
  370.    
  371.     //this function is executed once the api file is loaded
  372.     window.aviaOnGoogleMapsLoaded = function(){
  373.                             $('body').trigger('av-google-maps-api-loaded');
  374.                             $.AviaMapsAPI.apiFiles.finished = true;
  375.                         };
  376.  
  377.    
  378.     $('body').trigger('avia-google-maps-api-script-loaded');
  379.    
  380. })( jQuery );
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!