JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" async defer></script>
<script>
            function initMap() {
        var occ = {lat: 45.5280879, lng: -122.6630186};
        var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        draggable: false,
        scrollwheel: false,
        center: occ
        });
        var contentString = '<div id="content" style="font-family: Poppins, sans-serif; padding: 1em;">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h4 style="margin-bottom: .125em;">The Oregon Convention Center</h4>'+
        '<p>777 NE Martin Luther King Jr Blvd<br>'+
        'Portland, OR 97232<br>'+
        '<a href="https://www.google.com/maps/dir//Oregon+Convention+Center,+777+NE+Martin+Luther+King+Jr+Blvd,+Portland,+OR+97232,+United+States/@45.5280879,-122.6630186,15z/data=!4m12!1m3!3m2!1s0x0:0x610cf37babf5b9df!2sOregon+Convention+Center!4m7!1m0!1m5!1m1!1s0x5495a0adc5ff1af5:0x610cf37babf5b9df!2m2!1d-122.6630186!2d45.5280879" target="_blank">Get directions</a></p>'+
        '</div>';
        var infowindow = new google.maps.InfoWindow({
        content: contentString,
        pixelOffset: new google.maps.Size(0, 15),
        });

        var marker = new google.maps.Marker({
        position: occ,
        map: map,
        title: 'The Oregon Convention Center',
        });

        infowindow.open(map, marker);


        google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
        });
        }

    </script>

CSS

#map {
  width: 100%;
  height: 500px;
}