var infoWindows = [];
var mapStyles = [
  {
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi.business",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
];

var currentCenter = null;

$('#single-map').ready( () => {
  var markers = [];
  const polskaCenter = { lat: 52.249703, lng: 19.445352 };

  const map = new google.maps.Map(document.getElementById("single-map"), {
    zoom: 10,
    center: polskaCenter,
    styles: mapStyles,
    mapTypeId: "roadmap",
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    rotateControl: false,
    fullscreenControl: false
  });

  setMarkers(map, markers, infoWindows);
  let bounds = new google.maps.LatLngBounds();

  for(var i in markers) {
    bounds.extend(markers[i].getPosition());
  }
  map.addListener('zoom_changed', function() {
    zoomChangeBoundsListener = map.addListener('bounds_changed', function(event) {
      if (this.getZoom() > 16 && this.initialZoom == true) {
          // Change max/min zoom here
          this.setZoom(16);
          this.initialZoom = false;
      }
      // map.removeListener(zoomChangeBoundsListener);
    });
  });
  map.initialZoom = true;
  map.fitBounds(bounds);

  map.panTo(currentCenter);

  map.addListener("dragend", () => {
      closeAllInfoWindows();
  });
});

function setMarkers(map, markers, infoWindows) {
  for (let i = 0; i < properties_like_this.length; i++) {

    var lat = properties_like_this[i].lat;
    var lng = properties_like_this[i].lng;

    let propertyLatlngset = new google.maps.LatLng(lat, lng);

    var contentString = '<h3 style="text-align: center">';
    if (properties_like_this[i].title) {
      contentString += properties_like_this[i].title;
    }
    contentString += '</h3>';
    if(properties_like_this[i].url) {
      contentString += "<div style='margin: 0px auto 16px auto; width: 160px;' class='domhouse__map backBtn__div' ";
      contentString += "onclick=\"window.open('"+properties_like_this[i].url+"', '_blank')\">";
      contentString += "<div class='domhouse__map backBtn__inner'>";
      //contentString += translate_on_map_strings['see_the_offer'];
      contentString += '</div></div>';
    }

    infoWindows[i] = new google.maps.InfoWindow({
      content: contentString,
    });

    markers[i] = new google.maps.Marker({
      position: propertyLatlngset,
      visible: true,
      icon: "/images/icons/marker1.png",
    });
    markers[i].setMap(map);

    if (properties_like_this[i].current) {
      markers[i].setIcon("/images/marker_selected.png");
      markers[i].setAnimation(google.maps.Animation.BOUNCE);
      currentCenter = propertyLatlngset;
    } else {
      markers[i].addListener("click", () => {
        closeAllInfoWindows();
        infoWindows[i].open({
          anchor: markers[i],
          map,
          shouldFocus: false,
        });
      });
    }

    
 }
}

function closeAllInfoWindows() {
  for (var i=0;i<infoWindows.length;i++) {
    if(infoWindows[i]!==undefined) {
      infoWindows[i].close();
    }
  }
}
