MIDTERM_Q1.html

<!DOCTYPE html>
<html>

<head>
  
<style>

html {
   height: 100%}

 body {
   height: 100%;
   margin: 0px;
   padding: 0px;
   background-color: black;
   color: #CCCCCC;
   text-align: center}
 
 #map_canvas {
	width:300px;
	height:400px;
	margin-left:auto;
	margin-right:auto }

 .infoBox {
	color:black }

 </style>
	
</head>

  <body>
    <h1>Midterm Question 1</h1>
    <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
    <!-- Load the external JavaScript file with the map definition code -->
    <script>
	
	   function initMap() {
			
						var mapOptions = {
							zoom: 18,
							center: {lat:  51.178884 ,lng: -1.826214},
							mapTypeId: google.maps.MapTypeId.SATELLITE
							};
						var testmap = new google.maps.Map(
							document.getElementById("map_canvas"),
							mapOptions);
				
			
						var contentString1 = '<div id="content">'+
							'<div id="siteNotice">'+
							'</div>'+
							'<h1 id="firstHeading" class="firstHeading">This should answer my question</h1>'+
							'<div id="bodyContent">'+
							'<p>to seek the end </p>' +
							'</div>'+
							'</div>';
				
						var infowindow1 = new google.maps.InfoWindow({
							content: contentString1
							});

						var testpt = new google.maps.LatLng(51.178884,-1.826214)	
						var testmarker = new google.maps.Marker({
							position: testpt,
							map: testmap,
							title: 'Center of test point'
							});
							testmarker.addListener('click', function() {
							infowindow1.open(testmap, testmarker);
							});
							
}
</script>				
				
				<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCULtN6GnMgWIvgFekC1yoDXYWfLRgjtBc"
						async defer></script>  
				
				
				
				
				
</body>			
</html>