Some of the code for the Ontario index page of the Covid19 Visualization app

index.html.erb

<% content_for :page_header do %>
  <style>
    #map {
      height: 80%;
      margin-top: 30px;
    }
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
<% end %>


<div id="map"></div>

<% content_for :page_bottom do %>

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(42.98641646, -82.40480836),
      mapTypeId: 'terrain'
    });
  
    // Create a <script> tag and set the USGS URL as the source.
    var script = document.createElement('script');
    // This example uses a local copy of the GeoJSON stored at
    // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
    // script.src = 'conposcovidloc.geojson';
    // script.src = 'mydata.geojson';
    script.src = 'ontario_map_data.js';
    document.getElementsByTagName('head')[0].appendChild(script);
  }
  
  // Loop through the results array and place a marker for each
  // set of coordinates.
  
  window.eqfeed_callback = function(results) {
    const infowindow = new google.maps.InfoWindow(); // Only one InfoWindow
    for (var i = 0; i < results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1],coords[0]);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: results.features[i].properties.reporter
      });
      marker.data = results.features[i];
      marker.latLng = latLng;
      marker.addListener('click', function(){
          infowindow.close(); // Close previously opened infowindow
          infowindow.setPosition(this.latLng);
          infowindow.setContent(`<div id="infowindow"><strong>${this.data.properties.reporter}</strong><br/>${this.data.properties.num_cases} Cases<br/><a href='http://${this.data.properties.website}' target='_blank'>visit website</a></div>`);
          infowindow.open(map);
      });
    }
  }
</script>
<!-- You'll need to add your Google Maps API key here -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=xxxxx&callback=initMap"></script>
<% end %>