wpgmza-google-photo.js

/**
 * Custom script which handles loading remote images via Google Photos API
 *
 * Import your image photo references accordingly
*/
jQuery(function($){
    WPGMZA.ProInfoWindow.prototype.open = function(map, feature)
      {
          var self = this;
         
          // Legacy support
          if(window.infoWindow)
              infoWindow[feature.map.id] = this;
         
          if(!WPGMZA.InfoWindow.prototype.open.call(this, map, feature))
              return false;    // Parent class has detected that the window shouldn't open
         
          if(this.feature == map.userLocationMarker)
              return true;    // Allow the default style window to open for user location markers
         
          if(map.settings.wpgmza_list_markers_by == WPGMZA.MarkerListing.STYLE_MODERN)
              return false;    // Don't show if modern style marker listing is selected
         
          if(WPGMZA.settings.wpgmza_settings_disable_infowindows)
              return false;    // Global setting "disable infowindows" is set
         
          if($('.wpgmza-standalone-component .wpgmza-panel-info-window[data-map="' + feature.map.id + '"]').length > 0){
              $('.wpgmza-standalone-component .wpgmza-panel-info-window[data-map="' + feature.map.id + '"]').removeClass('wpgmza-hidden');
              this.populatePanel();
              return false;
          }
 
          this.legacyCreateDefaultInfoWindow();
         
          setTimeout(() => {
          var dynamicImage = $("<img class='google-image' />");
          var marker = this.feature;
          let imgUrl = "";
          if(marker.pic){
               /* We have a pic value */
                /* Make the google API request via and get back the real URL */
                //imgUrl = marker.pic;
                imgUrl = "https://maps.googleapis.com/maps/api/place/photo?maxheight=150&maxwidth=300&photo_reference=";
                imgUrl += marker.pic;
                imgUrl += "&key=";
                imgUrl += WPGMZA.settings.googleMapsApiKey;
                dynamicImage.attr('src', imgUrl);
          }
         
          if($('.wpgmza-infowindow .wpgmza_infowindow_image').length > 0){
              if(imgUrl.indexOf('https://maps.googleapis.com') !== -1){
                imgUrl = imgUrl.substr( imgUrl.indexOf('https://maps.googleapis.com'));
              }
              $('.wpgmza-infowindow .wpgmza_infowindow_image').attr('src', imgUrl);
          } else {
              $('.wpgmza-infowindow .wpgmza_gallery_placeholder').replace(dynamicImage);
          }
          }, 1000);
         
          return true;
      }
  });