<!DOCTYPE html>
<html>
<head>
<title>Netra Camp OPD Map</title>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h2 style="text-align:center;">नेत्र शिविर OPD रिपोर्ट (Map)</h2>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: { lat: 23.2599, lng: 77.4126 } // Center: Bhopal
});
var locations = [
{
name: "भोपाल शिविर",
lat: 23.2599,
lng: 77.4126,
opd: 120,
cataract: 25,
glasses: 60,
date: "10-03-2026"
},
{
name: "सीहोर शिविर",
lat: 23.2030,
lng: 77.0850,
opd: 80,
cataract: 15,
glasses: 40,
date: "12-03-2026"
}
];
locations.forEach(function(loc) {
var marker = new google.maps.Marker({
position: { lat: loc.lat, lng: loc.lng },
map: map
});
var info = `
<b>${loc.name}</b><br>
तारीख: ${loc.date}<br>
OPD: ${loc.opd}<br>
मोतियाबिंद: ${loc.cataract}<br>
चश्मा: ${loc.glasses}
`;
var infowindow = new google.maps.InfoWindow({
content: info
});
marker.addListener("click", function() {
infowindow.open(map, marker);
});
});
}
</script>
<!-- Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
