JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>
<div id="angle"></div>
<div id="map_canvas" style="width: 400px; height: 400px; border: 1px solid orange; display: inline-block;"></div>
<div id="pano" style="width: 400px; height: 400px; border: 1px solid green; display: inline-block;"></div>

JavaScript

function load_map_and_street_view_from_address(address) {
    // Check if GPS has been locally cached.
    var geocoder = new google.maps.Geocoder();
    var directionsService = new google.maps.DirectionsService();
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            var gps = results[0].geometry.location;
            // create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');

            var request = {
                origin: address,
                destination: address,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    var cameraLatLng = response.routes[0].legs[0].steps[0].start_location;
                    create_map_and_streetview(gps, cameraLatLng, 'map_canvas', 'pano');
                }
            });
        }
    });
}

function create_map_and_streetview(addLatLng, panoLatLng, map_id, street_view_id) {

    var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
    var service = new google.maps.StreetViewService();
    service.getPanoramaByLocation(panoLatLng, 50, function (panoData, status) {
        if (status != google.maps.StreetViewStatus.OK) {
            $('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
            return;
        }
        var marker = new google.maps.Marker({
            map: map,
            icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
            position: panoData.location.latLng
        });
        var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);
        document.getElementById('angle').innerHTML = angle;
        var panoOptions = {
           ...