<div class="container-fluid>
 <div class="row">
  <div class="banner" id="region-banner>
  </div>
  <div class="location-container container">
     <h3><%= @region.name %> </h3>
  </div>
 </div>
</div>
<script>document.addEventListener('DOMContentLoaded', app.regions);</script>

app.regions = () => {
  function init() {
   startGoogleMap();
   let tabs = document.querySelectorAll("a.tab");
    for (let tab of tabs) {
        tab.addEventListener("click", tabClicked);
    }
    document
        .querySelector("#region-select_")
        .addEventListener("change", selectClicked);
}
let startGoogleMap = () => {
    let map = new google.maps.Map(document.getElementById("region-banner"), {
        zoom: 7,
        // The latitude and longitude to center the map (always required)
        disableDefaultUI: true,
        gestureHandling: "cooperative",
        styles: mapStyle
    });
    const chicago = new google.maps.Marker({
        position: new google.maps.LatLng(39.900705, -86.061112),
        map: map,
        region: "Illinois",
        icon: "/marker.png",
        title: "Chicago"
    });

    const baltimore = new google.maps.Marker({
        position: new google.maps.LatLng(39.332629, -76.746407),
        map: map,
        region: "Maryland"
        icon: "/marker.png",
        title: "Baltimore"
    });
    let bounds = new google.maps.LatLngBounds();
    bounds.extend(cedar.position);
    bounds.extend(baltimore.position);
    map.fitBounds(bounds);
  };
 return init();
};