Untitled

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poiret+One&display=swap" rel="stylesheet">
<style>
body {
  background-color: white;
}

h1 {
  color: black;
  text-align: center;
  font-size:50px;
  border: 10px solid black;
  font-family: TimesNewRoman;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-size: 20px;
}

li {
  float: left;
}

li a, .dropdown {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 4px solid #B1E4EE;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #B1E4EE;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color:#f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color:#B1E4EE;}

.dropdown:hover .dropdown-content {
  display: block;
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */


/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
 /* Set the size of the div element that contains the map */
      #map {
        min-height: 1500px;  /* The height is 600 pixels */
        //width: 600%;  /* The width is the width of the web page */
       }
}
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

</style>
</head>
<body>

<center>
<div class="gallery">
<a target="_blank" href="symbol.jpg">
</a>
<img src="symbol.jpg" alt="Mountains" width="100" height="100">
</div>
</center>

<h1 style="background-color:white;">KEVINSVILLE HEALTH CARE MINISTRY</h1>
<ul>
 <li><a href="#">Home</a></li>
  <li><a href= "more.html"="#">About Us</a></li>
  <li class="emergencies">
 <div class="dropdown">
  <span class="dropbtn">Emergencies</span>
   <div class="dropdown-content">
      <a href="#">Medicines</a>
      <a href="#">Ambulances</a>
      <a href="#">Manual Assistance at home</a>
    </div>
 <li class="emergencies">
 <div class="dropdown">
  <span class="dropbtn">Contacts</span>
   <div class="dropdown-content">
      <a href="#">Facebook</a>
      <a href="#">Linkedin</a>
      <a href="#">Twitter</a>
    </div>
   <li><a href= "table.html"="#">Survey</a></li>
  </li>
</ul>
<p><b><a href="MAPinSITE.html"></a></b></p>
<br>
<center>
<div class="gallery">
<a target="_blank" href="https://i.postimg.cc/PxFRyWNP/bg-final.gif">
</a>
<img src="https://i.postimg.cc/PxFRyWNP/bg-final.gif" alt="Mountains" width="1000" height="600">
</div>

<div style="padding-top: 100px;">
</div>
<h1 style="background-color: white;">TRACK THE NEAREST AMBULANCE</h1>
    <!--The div element for the map -->
    <div id="map"></div>
</center>
<script>

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
	}
};
xmlhttp.open("GET", ""json_demo.txt"", true);
xmlhttp.send();


var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}


// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: 13.082680, lng: 80.270721};
  var uluru2 = {lat: 13.5, lng: 80.270721};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 3, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
  var marker2 = new google.maps.Marker({position: uluru2, map: map});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkEhNtqmqSDZntjdr-dy_bWx71EY37L_E&callback=initMap">
</script>

</body>


</html>