window.initMap = function () {
  $(".fpp-map-section").each(function (i, el) {
    initMapStart(el);
  });
};

function initMapStart(el) {
  var sectionId = $(el).data("section_id");
  var $mapContainer = document.getElementById(`fpp-map-${sectionId}`);
  var styles = JSON.parse(
    document.querySelector(`[data-gmap-style-${sectionId}]`).innerHTML
  );
  var section = JSON.parse(
    document.querySelector(`[data-gmap-section-${sectionId}]`).innerHTML
  );
  var blocks = section.blocks;
  var mapPositions = {};
  var desktopMarkers = {};
  var origin = null;

  if (!$mapContainer) {
    return;
  }

  var $map = new google.maps.Map($mapContainer, {
    zoom: section.settings.zoom,
    styles,
    streetViewControl: false,
  });
  setGeoMarkers($map);
  $(".fpp-map-header").click(function () {
    var blockId = $(this).parent().data("blockid");
    $map.setCenter(mapPositions[blockId]);
  });

  function setGeoMarkers() {
    var geocoder = new google.maps.Geocoder();
    blocks.forEach(function (block, index) {
      geocoder.geocode(
        { address: block.settings.map_address },
        function (results, status) {
          if (status !== google.maps.GeocoderStatus.OK) {
            console.error("谷歌地图 地址查询失败");
          } else {
            var position = results[0].geometry.location;
            mapPositions[block.blockId] = position;

            desktopMarkers[block.blockId] = new google.maps.Marker({
              map: $map,
              position: position,
              icon: {
                path: "M12.5,0 C6.388889,0 0,4.7304348 0,12.5217391 C0,19.8956522 11.111111,31.1652174 11.527778,31.5826087 C11.805556,31.8608696 12.083333,32 12.5,32 C12.916667,32 13.194444,31.8608696 13.472222,31.5826087 C13.888889,31.1652174 25,19.8956522 25,12.5217391 C25,4.7304348 18.611111,0 12.5,0 Z M12,16 C9.733333,16 8,14.2666667 8,12 C8,9.7333333 9.733333,8 12,8 C14.266667,8 16,9.7333333 16,12 C16,14.2666667 14.266667,16 12,16 Z",
                fillOpacity: 1,
                anchor: new google.maps.Point(12, 30),
                fillColor: "#EA4234",
                strokeWeight: 0,
              },
            });
            if (!origin) {
              origin = position;
              $map.setCenter(position);
            }
          }
        }
      );
    });
  }

  $($(el)).find(`.fpp-map-header`).click(function () {
    triggerMapPosition($(this));
  });
  triggerMapPosition($($(el)).find(".fpp-map-header").eq(0));

  function triggerMapPosition($target) {
    var $parentTarget = $target.parent();
    $(".fpp-map-item").each(function (idx, el) {
      if ($(el).is($parentTarget) && !$(el).hasClass("active")) {
        $(el).addClass("active");

        var blockId = $(this).data("blockid");
        $map && $map.setCenter(mapPositions[blockId]);
      } else {
        $(el).removeClass("active");
      }
    });
  }
}