McDonald's Test

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Events</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-JSONP/2.4.0/jquery.jsonp.js"
    type="text/javascript"></script>
  <script src="https://momentjs.com/downloads/moment.js" type="text/javascript"></script>
  <style>
    #map {
      height: 100%;
    }

html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

let prev_infowindow = false

const chicago = { name: "Chicago", lat: 41.85, lng: -87.65 }
    const tampa = { name: "Tampa", lat: 27.95, lng: -82.45 }
    const denver = { name: "Denver", lat: 39.752790, lng: -104.999614 }
    const nyc = { name: "New York City", lat: 40.713019, lng: -74.006509 }
    const san_diego = { name: "San Diego", lat: 32.8242404, lng: -117.3891578 }

const minZoom = 10

const getEvents = async (bounds) => {

let url = new URL(window.location.href)
      
      let urlPrefix = 'https://104.236.16.91:8680/getEvents/' 
      
      //urlPrefix = 'https://localhost:8680/getEvents/'

let nag = eval(`bounds.${Object.keys(bounds)[0]}.g`)
      let nah = eval(`bounds.${Object.keys(bounds)[0]}.h`)
      let jag = eval(`bounds.${Object.keys(bounds)[1]}.g`)
      let jah = eval(`bounds.${Object.keys(bounds)[1]}.h`)
      
      let targetUrl
      if (url.searchParams.get('start_date') && url.searchParams.get('end_date')) {
        let sDate = url.searchParams.get('start_date')
        let eDate = url.searchParams.get('end_date')
        targetUrl = `${urlPrefix}${jag}/${nag}/${jah}/${nah}/${sDate}/${eDate}`
      }
      else {
        targetUrl = `${urlPrefix}${jag}/${nag}/${jah}/${nah}/2019-01-01/2019-12-31`
      }

let events = await $.ajax({
        url: targetUrl
      })

return events
    }

const getContentFrom = (event) => {
      return `<div id="content">
                <h1 id="firstHeading" class="firstHeading">${event.name}</h1>
                <div id="bodyContent">
                  <p><img src='${event.venue_image_url}' width='100' /></p>
                  <p>
                    <strong>Description:</strong><br/>
                    ${event.event_description}
                  </p>
                  <p>
                    <strong>Date/Time:</strong><br/>
                    ${moment(event.start_date).format("MMM DD, YYYY")}: ${moment(event.start_date).format("h:mm A")} until ${moment(event.end_date).format("h:mm A")}
                  </p>
                  <p>
                    <strong>Address:</strong><br/>
                    ${event.address}</br>
                    ${event.city}, ${event.state_province} ${event.postal_code ? event.postal_code : ""}
                  </p>
                  <p>
                    <strong>Phone:</strong><br/>
                    ${event.phone}
                  </p>
                  <p><a href='${event.event_url}'>Register for event</a><br/>(${event.counter} volunteers committed)</p>
                </div>
              </div>`
    }

function CenterControl(controlDiv, target, map) {

// Set CSS for the control border.
      var controlUI = document.createElement('div');
      controlUI.style.backgroundColor = '#fff';
      controlUI.style.border = '2px solid #fff';
      controlUI.style.borderRadius = '3px';
      controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
      controlUI.style.cursor = 'pointer';
      controlUI.style.marginBottom = '22px';
      controlUI.style.textAlign = 'center';
      controlUI.title = `Click to pan map to ${target.name}.`
      controlDiv.appendChild(controlUI);

// Set CSS for the control interior.
      var controlText = document.createElement('div');
      controlText.style.color = 'rgb(25,25,25)';
      controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
      controlText.style.fontSize = '16px';
      controlText.style.lineHeight = '38px';
      controlText.style.paddingLeft = '5px';
      controlText.style.paddingRight = '5px';
      controlText.innerHTML = target.name;
      controlUI.appendChild(controlText);

// Setup the click event listeners: simply set the map to Chicago.
      controlUI.addEventListener('click', function () {
        map.setCenter(target)
        map.setZoom(minZoom)
      });
    }

const addCityControl = (city, map) => {
      var div = document.createElement('div')
      var cityControl = new CenterControl(div, city, map)
      div.index = 1
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(div)
    }

const plotMarkers = async (map) => {

let events = await getEvents(map.getBounds())

let markers = events.map((event, i) => {

let toolTipContent = getContentFrom(event)

let infowindow = new google.maps.InfoWindow({ content: toolTipContent })

let marker = new google.maps.Marker({
          position: { lat: event.latitude, lng: event.longitude },
          map: map,
          title: `${event.address}, ${event.city}, ${event.state_province}`
        })

marker.addListener('click', () => {
          if (prev_infowindow) prev_infowindow.close()
          prev_infowindow = infowindow
          infowindow.open(map, marker)
        })
        return marker
      })

let markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' })
    }

async function initMap() {

let map = new google.maps.Map(document.getElementById('map'), {
        zoom: minZoom,
        center: denver,
        minZoom: minZoom
      })

google.maps.event.addListener(map, 'bounds_changed', () => {
        plotMarkers(map)
      })

addCityControl(san_diego, map)

addCityControl(denver, map)

addCityControl(chicago, map)

addCityControl(tampa, map)

addCityControl(nyc, map)

}

</script>

</body>

</html>

<-- https://blockbuilder.org/FergusDevelopmentLLC/9afe6fb23b00ac3c588954e80da7ffbf -->

https://momentjs.com/downloads/moment.js