'use strict';

var initMap = function initMap() {
  var coords = {
    lat: 51.546237,
    lng: -0.117999
  };
  var map = new google.maps.Map(document.getElementById('map-container'), {
    center: coords, 
    zoom: 15,
    disableDefaultUI: true,
    styles: [{
      "featureType": "landscape",
      "stylers": [{
        "color": "#e5e4e4"
      }]
    }, {
      "featureType": "poi",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#e5e4e4"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels.icon",
      "stylers": [{
        "color": "#787878"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels.text.fill",
      "stylers": [{
        "color": "#787878"
      }, {
        "visibility": "off"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#bcdaa6"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "labels.text.fill",
      "stylers": [{
        "visibility": "on"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "visibility": "on"
      }]
    }, {
      "featureType": "poi.sports_complex",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#e5e4e4"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#e5e4e4"
      }, {
        "lightness": 65
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry.stroke",
      "stylers": [{
        "lightness": -20
      }, {
        "weight": 1
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#e5e4e4"
      }, {
        "lightness": 100
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry.stroke",
      "stylers": [{
        "color": "#e5e4e4"
      }, {
        "lightness": -20
      }, {
        "weight": 1
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#e5e4e4"
      }, {
        "lightness": 60
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry.stroke",
      "stylers": [{
        "lightness": -5
      }, {
        "weight": 1
      }]
    }, {
      "featureType": "road.local",
      "elementType": "labels.text.fill",
      "stylers": [{
        "lightness": 30
      }]
    }, {
      "featureType": "road.local",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "weight": 0.5
      }]
    }, {
      "featureType": "water",
      "elementType": "geometry.fill",
      "stylers": [{
        "lightness": 50
      }, {
        "visibility": "on"
      }]
    }]
  });
  var popupContent = document.createElement('div');
  popupContent.innerHTML = '<header>Cally Yard</header>' + 'Caledonian Road N7';
  var Popup = createPopupClass();
  var popup = new Popup(new google.maps.LatLng(coords.lat, coords.lng), popupContent);
  popup.setMap(map);
};
/**
 * Returns the Popup class.
 *
 * Unfortunately, the Popup class can only be defined after
 * google.maps.OverlayView is defined, when the Maps API is loaded.
 * This function should be called by initMap.
 */


function createPopupClass() {
  /**
   * A customized popup on the map.
   * @param {!google.maps.LatLng} position
   * @param {!Element} content The bubble div.
   * @constructor
   * @extends {google.maps.OverlayView}
   */
  function Popup(position, content) {
    this.position = position;
    content.classList.add('popup-bubble'); // This zero-height div is positioned at the bottom of the bubble.

    var bubbleAnchor = document.createElement('div');
    bubbleAnchor.classList.add('popup-bubble-anchor');
    bubbleAnchor.appendChild(content); // This zero-height div is positioned at the bottom of the tip.

    this.containerDiv = document.createElement('div');
    this.containerDiv.classList.add('popup-container');
    this.containerDiv.appendChild(bubbleAnchor); // Optionally stop clicks, etc., from bubbling up to the map.

    google.maps.OverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);
  } // ES5 magic to extend google.maps.OverlayView.


  Popup.prototype = Object.create(google.maps.OverlayView.prototype);
  /** Called when the popup is added to the map. */

  Popup.prototype.onAdd = function () {
    this.getPanes().floatPane.appendChild(this.containerDiv);
  };
  /** Called when the popup is removed from the map. */


  Popup.prototype.onRemove = function () {
    if (this.containerDiv.parentElement) {
      this.containerDiv.parentElement.removeChild(this.containerDiv);
    }
  };
  /** Called each frame when the popup needs to draw itself. */


  Popup.prototype.draw = function () {
    var divPosition = this.getProjection().fromLatLngToDivPixel(this.position); // Hide the popup when it is far out of view.

    var display = Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000 ? 'block' : 'none';

    if (display === 'block') {
      this.containerDiv.style.left = divPosition.x + 'px';
      this.containerDiv.style.top = divPosition.y + 'px';
    }

    if (this.containerDiv.style.display !== display) {
      this.containerDiv.style.display = display;
    }
  };

  return Popup;
}