JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<input id="address" type="text" value="344 Laguna Dr, Milpitas, CA  95035" />
<input id="geoBtn" type="button" value="Go" />
<div id="map_canvas"></div>

CSS

html, body, #map_canvas {
    height:100%;
    width:100%;
}

JavaScript

var geocoder = new google.maps.Geocoder();
var myStreetView = null;
var marker = null;

function geocodeAddress() {
    // var address = "344 Laguna Dr, Milpitas, CA  95035";
    var address = document.getElementById('address').value;
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        //alert (results);
        if (status == google.maps.GeocoderStatus.OK) {
            //alert(results[0].geometry.location);
            myStreetView = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"));
            myStreetView.setPosition(results[0].geometry.location);
            google.maps.event.addListenerOnce(myStreetView, 'status_changed', function () {
                var heading = google.maps.geometry.spherical.computeHeading(myStreetView.getLocation().latLng, results[0].geometry.location);
                myStreetView.setPov({
                    heading: heading,
                    pitch: 0
                });
                setTimeout(function() {
                marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: myStreetView,
                    title: address
                });
                if (marker && marker.setMap) marker.setMap(myStreetView);}, 500);
            });

        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
    google.maps.event.addDomListener(document.getElementById('geoBtn'), 'click', geocodeAddress);
}
google.maps.event.addDomListener(window, 'load', geocodeAddress);