Blah blah blah
<!DOCTYPE html> <html> <head> <title>WEWS News 5 Cleveland Beat Map</title> <style> /* Set the size of the map container. */ #map { height: 600px; width: 100%; } body, html { margin: 0; padding: 0; font-family: Arial, sans-serif; } .gm-style-iw-d { font-size: 14px; } .gm-style-iw-d h4 { margin: 0 0 5px 0; font-size: 16px; } .gm-style-iw-d ul { list-style-type: none; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> // --- Reporter Data --- // This object holds all the county info, including reporter names and polygon coordinates. const countyData = { ashland: { name: "Ashland", reporters: ["Catherine Ross"], coords: [/* Simplified Coords */{lat: 40.86, lng: -82.31}, {lat: 40.9, lng: -82.25}, {lat: 40.8, lng: -82.2}, {lat: 40.75, lng: -82.35}] }, ashtabula: { name: "Ashtabula", reporters: ["Clay Lepard"], coords: [{lat: 41.87, lng: -80.79}, {lat: 41.9, lng: -80.5}, {lat: 41.6, lng: -80.5}, {lat: 41.6, lng: -80.8}] }, cuyahoga: { name: "Cuyahoga", reporters: ["Nadeen Abusada", "Kaylee Olivas", "Mike Holden"], coords: [{lat: 41.5, lng: -81.69}, {lat: 41.6, lng: -81.5}, {lat: 41.4, lng: -81.4}, {lat: 41.3, lng: -81.8}] }, erie: { name: "Erie", reporters: ["Maya Lockett"], coords: [{lat: 41.45, lng: -82.7}, {lat: 41.5, lng: -82.6}, {lat: 41.3, lng: -82.5}, {lat: 41.3, lng: -82.8}] }, franklin: { name: "Franklin", reporters: ["Morgan Trau"], coords: [{lat: 40.0, lng: -83.0}, {lat: 40.1, lng: -82.8}, {lat: 39.9, lng: -82.8}, {lat: 39.8, lng: -83.2}] }, geauga: { name: "Geauga", reporters: ["Clay Lepard"], coords: [{lat: 41.5, lng: -81.2}, {lat: 41.6, lng: -81.0}, {lat: 41.3, lng: -81.0}, {lat: 41.3, lng: -81.3}] }, huron: { name: "Huron", reporters: ["Maya Lockett"], coords: [{lat: 41.15, lng: -82.6}, {lat: 41.2, lng: -82.5}, {lat: 41.0, lng: -82.4}, {lat: 41.0, lng: -82.7}] }, lake: { name: "Lake", reporters: ["Tracy Carloss", "Katie Ussin"], coords: [{lat: 41.7, lng: -81.25}, {lat: 41.75, lng: -81.0}, {lat: 41.6, lng: -81.0}, {lat: 41.5, lng: -81.3}] }, lorain: { name: "Lorain", reporters: ["Tiffany Tarpley", "Catherine Ross"], coords: [{lat: 41.45, lng: -82.18}, {lat: 41.5, lng: -82.0}, {lat: 41.2, lng: -82.0}, {lat: 41.2, lng: -82.3}] }, medina: { name: "Medina", reporters: ["Remi Murrey"], coords: [{lat: 41.14, lng: -81.86}, {lat: 41.2, lng: -81.7}, {lat: 41.0, lng: -81.7}, {lat: 41.0, lng: -82.0}] }, portage: { name: "Portage", reporters: ["Clay Lepard"], coords: [{lat: 41.16, lng: -81.2}, {lat: 41.2, lng: -81.0}, {lat: 41.0, lng: -81.0}, {lat: 41.0, lng: -81.3}] }, richland: { name: "Richland", reporters: ["Maya Lockett"], coords: [{lat: 40.77, lng: -82.52}, {lat: 40.8, lng: -82.4}, {lat: 40.6, lng: -82.4}, {lat: 40.6, lng: -82.6}] }, stark: { name: "Stark", reporters: ["Bob Jones", "Tessa DiTirro"], coords: [{lat: 40.8, lng: -81.38}, {lat: 40.9, lng: -81.2}, {lat: 40.7, lng: -81.2}, {lat: 40.6, lng: -81.5}] }, summit: { name: "Summit", reporters: ["Bob Jones", "Remi Murrey", "Tessa DiTirro"], coords: [{lat: 41.08, lng: -81.52}, {lat: 41.2, lng: -81.4}, {lat: 41.0, lng: -81.4}, {lat: 40.9, lng: -81.6}] }, tuscarawas: { name: "Tuscarawas", reporters: ["Bob Jones"], coords: [{lat: 40.48, lng: -81.44}, {lat: 40.6, lng: -81.3}, {lat: 40.4, lng: -81.3}, {lat: 40.3, lng: -81.6}] } }; let map; let infoWindow; function initMap() { // Create the map, centered on Northeast Ohio. map = new google.maps.Map(document.getElementById("map"), { center: { lat: 41.2, lng: -81.5 }, zoom: 8.5, mapTypeControl: false, streetViewControl: false, }); infoWindow = new google.maps.InfoWindow(); // Loop through the county data to create polygons and add listeners. for (const countyKey in countyData) { const county = countyData[countyKey]; // Note: The coordinates here are simplified. For production, you'd use // more detailed GeoJSON polygon data for each county. const countyPolygon = new google.maps.Polygon({ paths: county.coords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, }); countyPolygon.setMap(map); // Add event listeners for each county polygon. google.maps.event.addListener(countyPolygon, 'mouseover', function(event) { this.setOptions({fillOpacity: 0.6}); let reporterList = county.reporters.map(r => `<li>${r}</li>`).join(''); let content = `<h4>${county.name} County</h4><ul>${reporterList}</ul>`; infoWindow.setContent(content); infoWindow.setPosition(event.latLng); infoWindow.open(map); }); google.maps.event.addListener(countyPolygon, 'mouseout', function() { this.setOptions({fillOpacity: 0.35}); infoWindow.close(); }); } } </script> <!-- IMPORTANT: Replace "YOUR_API_KEY" with your actual Google Maps API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html>
