Gwith/api.js

## api.js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
      #map{
        height: 400px;
        width: 100%;
      }
    </style>

  </head>
  <body>
   <div class="container">
    <form id="form">
     <label>Address</label>
      <input type="text" id="address" class="form-control" placeholder="Enter Address">
      <br>
      <button type="submit" class="btn btn-primary btn-block">Submit</button>
     </form>
   </div>
   <div class="container">
     <h1 id="fullAddress"></h1>
   </div>
   <br>
   <div class="container">
     <div id="map"></div>
   </div>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.js"
      integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg="
      crossorigin="anonymous">
    </script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      function initMap() {
          var options = {
            zoom: 11,
            center: {lat:12.8252, lng:-123.7029}
            }
          var map = new google.maps.Map(document.getElementById('map'), options);
          var marker = new google.maps.Marker({
            position:{lat: 12.830791, lng: -123.740111},
            map:map
          });
      }
      form.addEventListener('submit', function(event) {
        event.preventDefault();
        var location = document.getElementById("address").value;
        axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
        params:
          {
          address:location,
          key:'123456789'
          }
        })
        .then(function(response){
          console.log(response.data.results[0].geometry.location.lat);
          var formattedAddress = response.data.results[0].formatted_address;
          var lats = response.data.results[0].geometry.location.lat;
          var lngs = response.data.results[0].geometry.location.lng;
          document.getElementById("fullAddress").innerHTML=formattedAddress;
          })
          .catch(function(error){
            console.log(error);
            });
        });
    </script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=123456789&callback=initMap">
    </script>
<!--    <script language="JavaScript" type="text/javascript" src="scripts/script.js"></script>-->

  </body>
</html>


<!-- AIzaSyCco8WSWqzWv-d8YMK9lxRDN9Pnk5WDY48 -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie-edge">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	<style>
	#map{
	height: 400px;
	width: 100%;
	}
	</style>

	</head>
	<body>
	<div class="container">
	<form id="form">
	<label>Address</label>
	<input type="text" id="address" class="form-control" placeholder="Enter Address">
	<br>
	<button type="submit" class="btn btn-primary btn-block">Submit</button>
	</form>
	</div>
	<div class="container">
	<h1 id="fullAddress"></h1>
	</div>
	<br>
	<div class="container">
	<div id="map"></div>
	</div>
	<script
	src="https://code.jquery.com/jquery-3.2.1.slim.js"
	integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg="
	crossorigin="anonymous">
	</script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
	function initMap() {
	var options = {
	zoom: 11,
	center: {lat:12.8252, lng:-123.7029}
	}
	var map = new google.maps.Map(document.getElementById('map'), options);
	var marker = new google.maps.Marker({
	position:{lat: 12.830791, lng: -123.740111},
	map:map
	});
	}
	form.addEventListener('submit', function(event) {
	event.preventDefault();
	var location = document.getElementById("address").value;
	axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
	params:
	{
	address:location,
	key:'123456789'
	}
	})
	.then(function(response){
	console.log(response.data.results[0].geometry.location.lat);
	var formattedAddress = response.data.results[0].formatted_address;
	var lats = response.data.results[0].geometry.location.lat;
	var lngs = response.data.results[0].geometry.location.lng;
	document.getElementById("fullAddress").innerHTML=formattedAddress;
	})
	.catch(function(error){
	console.log(error);
	});
	});
	</script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=123456789&callback=initMap">
	</script>
	<!-- <script language="JavaScript" type="text/javascript" src="scripts/script.js"></script>-->

	</body>
	</html>


	<!-- AIzaSyCco8WSWqzWv-d8YMK9lxRDN9Pnk5WDY48 -->