JSFiddle - React, Tailwind, and code Playground

by Chetak Patel

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<h3>Harvard University - CSCI E-3 (15118)</h3>
<h3>Extra Credit</h3>
<h3>Option #3: Prove Your Understanding</h3>
<h3>Chetak Patel</h3>
<h4></h4>

In this extra credit assingment, I am going to prove that I understand how to use forms using javascript. I had a bit of tuff time understand the relations and after careful review, I now understand how they work throught research. 
<p>
Here are some examples of a of using forms to find the Latitude and Longitude. So a user can enter the address and press get Lat & Long for results. </p>

<div>
     <h3>Please enter an address below and press to get the Latitude and Longitude.</h3>
    <input id="address" type="text" placeholder="Enter full address here" />
    <button id="btn">Lat & Long</button>
    <div>
        <p>Latitude:
            <input type="text" id="latitude" readonly />
        </p>
        <p>Longitude:
            <input type="text" id="longitude" readonly />
        </p>
    </div>
</div>
<br>

JavaScript

function showResult(result) {
    document.getElementById('latitude').value = result.geometry.location.lat();
    document.getElementById('longitude').value = result.geometry.location.lng();
}

function getLatitudeLongitude(callback, address) {
    address = address || 'Boston, MA';
    geocoder = new google.maps.Geocoder();
    if (geocoder) {
        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                callback(results[0]);
            }
        });
    }
}

var button = document.getElementById('btn');
button.addEventListener("click", function () {
    var address = document.getElementById('address').value;
    getLatitudeLongitude(showResult, address)
});