home.html

<!DOCTYPE html>
<html>
<head>
	<title>Health Map</title>
	<style>
       #map {
        height: 100vh;
        width: 100%;
        background-color: grey;
        /*padding: 10px;*/
        align-content: center;
        /*margin-left: 10%;*/
       }
    </style>
</head>
<body>
<div id="map"></div>
<script>
   	  function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(19, 72),
          zoom: 4
        });
        var infoWindow = new google.maps.InfoWindow;

          downloadUrl('markers.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              if (markerElem.getAttribute('flag') == 1) {
                var id = markerElem.getAttribute('id');
                var name = markerElem.getAttribute('name');
                var description = markerElem.getAttribute('des');
                var cases = markerElem.getAttribute('cases');
                var point = new google.maps.LatLng(
                    parseFloat(markerElem.getAttribute('lat')),
                    parseFloat(markerElem.getAttribute('lng')));

                var infowincontent = document.createElement('div');
                var strong = document.createElement('strong');
                strong.textContent = name
                infowincontent.appendChild(strong);
                infowincontent.appendChild(document.createElement('br'));

                var text = document.createElement('text');
                text.textContent = description
                infowincontent.appendChild(text);
                /*creating circles with area proportional to no. of cases*/
                var intensity = new google.maps.Circle({
                strokeWeight: 0,
                fillColor: '#990000',
                fillOpacity: 0.50,
                map: map,
                center: point,
                radius: Math.sqrt(cases) * 1000,
                position: point
                });
                /*info window on clicking the circle*/
                intensity.addListener('click', function() {
                  infoWindow.setContent(infowincontent);
                  infoWindow.setPosition(intensity.getCenter());
                  infoWindow.open(map);
                });
              }
            });
          });
        }


        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;

          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };

          request.open('GET', url, true);
          request.send(null);
        }

        function doNothing() {}

      </script>
      <script src="markerclusterer.js"></script>
      <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOjj5yR_uy57jVp0u9moK2SJbtd756swk&callback=initMap">
      </script>
</body>
</html>