diff --git a/index.html b/index.html
index 6524157..84ce527 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,60 @@
 <html>
   <head>
     <title>Mashup</title>
+	
+	<style> 
+	html, body { height: 80%; margin: 5; padding: 0; }
+	#map { height: 80%; }
+	</style>
+	
+	
+ <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
+	<script type="text/javascript">
+		function reset(){
+		var address= document.getElementById("gaddress").value;
+		$.ajex({
+			dataType: 'text',
+			url: "https://maps.googleapis.com/maps/api/geocode/json?address="+address+"&key=AIzaSyCBRJ-TOtZaaHlt7QYxkhPPfO0IhyfDPik",
+			type: "GET",
+			success: function(data){
+								$("#resultarea").text(data);
+						var result= JSON.parse(data);
+						},
+						error: function(){
+							alert("Invalid");}
+		
+		}
+		);
+		
+		}
+	
+	
+
+
+	</script>
+	
   </head>
   <body>
+  <form>
+	Enter an address:<br>
+  <input type="text" id="gaddress"><br>
+  <input type="button" value="Submit" onclick="reset()"/>
+  </form>
+  
+  
+  <div id="map"></div>
+  
+  
+	<script>
+      var map;
+      function initMap() {
+        map = new google.maps.Map(document.getElementById('map'), {
+          center: {lat: -30.397, lng: 140.644},
+          zoom: 7
+        });
+      }
+    </script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBRJ-TOtZaaHlt7QYxkhPPfO0IhyfDPik&callback=initMap"></script>
+  
   </body>
 </html>
