Built with blockbuilder.org
xxxxxxxxxx<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><body> <div id="map"></div> <script> 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> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBXmDsuoKrugv-302U1fRnvGz1d4Bi2HR8&callback=initMap"></script></body></html><-- https://blockbuilder.org/FergusDevelopmentLLC/9afe6fb23b00ac3c588954e80da7ffbf --> https://momentjs.com/downloads/moment.js