gmap.js

(function($, APP) {
  APP.Components.Map = {
    data: {
      scriptsCreated: false,
      isGoogleLoaded: false,
    },
    init: function() {
      var _this = this;
      if ($('.page').last().find('#map').length > 0) {
        if (this.data.isGoogleLoaded) {
          google.maps.event.addDomListener(window, 'load', _this.initMap.bind(this));
        } else {
          this.tryLoadScripts();
        }
      }
    },
    createScripts: function() {
      var gKey = 'AIzaSyAfuintIeTkWllbOnvyju_B6nbYLDcUoMk';
      var gScript = document.createElement('script');
      gScript.type = 'text/javascript';
      gScript.src = 'https://maps.googleapis.com/maps/api/js?key=' + gKey;
      $('head').append(gScript);
      this.data.scriptsCreated = true;      
    },
    tryLoadScripts: function() {
      var _this = this;
      if (!_this.data.scriptsCreated) {
        _this.createScripts();
      }

      var ticker = setInterval(readyChecker, 250);
      function readyChecker() {
        if (!_this.data.isGoogleLoaded) {
          try {
            if (google) {
              _this.data.isGoogleLoaded = true;
              _this.init(); // reinit
              clearInterval(ticker);
            }
          } catch (e) {
            // console.log('maps not ready yeat, another try');
          }
        }
      }
    },
    initMap: function() {
      var map = new google.maps.Map($('.page').last().find('#map').get(0), {
        zoom: 11,
        center: { lat: -33, lng: 151 },
        styles: [
          {
            featureType: 'water',
            elementType: 'geometry',
            stylers: [{ color: '#e9e9e9' }, { lightness: 17 }],
          },
          {
            featureType: 'landscape',
            elementType: 'geometry',
            stylers: [{ color: '#f5f5f5' }, { lightness: 20 }],
          },
          {
            featureType: 'road.highway',
            elementType: 'geometry.fill',
            stylers: [{ color: '#ffffff' }, { lightness: 17 }],
          },
          {
            featureType: 'road.highway',
            elementType: 'geometry.stroke',
            stylers: [{ color: '#ffffff' }, { lightness: 29 }, { weight: 0.2 }],
          },
          {
            featureType: 'road.arterial',
            elementType: 'geometry',
            stylers: [{ color: '#ffffff' }, { lightness: 18 }],
          },
          {
            featureType: 'road.local',
            elementType: 'geometry',
            stylers: [{ color: '#ffffff' }, { lightness: 16 }],
          },
          {
            featureType: 'poi',
            elementType: 'geometry',
            stylers: [{ color: '#f5f5f5' }, { lightness: 21 }],
          },
          {
            featureType: 'poi.park',
            elementType: 'geometry',
            stylers: [{ color: '#dedede' }, { lightness: 21 }],
          },
          {
            elementType: 'labels.text.stroke',
            stylers: [{ visibility: 'on' }, { color: '#ffffff' }, { lightness: 16 }],
          },
          {
            elementType: 'labels.text.fill',
            stylers: [{ saturation: 36 }, { color: '#333333' }, { lightness: 40 }],
          },
          { elementType: 'labels.icon', stylers: [{ visibility: 'off' }] },
          {
            featureType: 'transit',
            elementType: 'geometry',
            stylers: [{ color: '#f2f2f2' }, { lightness: 19 }],
          },
          {
            featureType: 'administrative',
            elementType: 'geometry.fill',
            stylers: [{ color: '#fefefe' }, { lightness: 20 }],
          },
          {
            featureType: 'administrative',
            elementType: 'geometry.stroke',
            stylers: [{ color: '#fefefe' }, { lightness: 17 }, { weight: 1.2 }],
          },
        ],
      });
      var image = '../img/marker.svg';
      var markers = [];
      var someMarker = new google.maps.Marker({
        position: { lat: -33, lng: 151 },
        map: map,
        icon: {
          url: image,
          scaledSize: new google.maps.Size(38, 50),
        },
      });

      markers.push(someMarker);

      var options = {
        styles: [
          {
            url: '../img/cluster.svg',
            width: 38,
            height: 50,
            anchor: [-10, 0],
            iconAnchor: [10, 50],
            textColor: '#40434a',
            textSize: 15,
          },
        ],
      };
      var markerCluster = new MarkerClusterer(map, markers, options);
    },
  };
})(jQuery, window.APP);