JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhKTDvbQDCH6st7Hre0lQjPjssEIEd9VA&amp;sensor=false"></script>
<div id="NavigationBar">
    <form>
        <input id="searchField" type="textbox" value="Hamburg" placeholder="Enter your address."></input>
        <input id="searchButton" type="submit" value="Search">
    </form>
</div>
<body>
    <div id="PageContents">
        <div id="map-canvas"></div>
    </div>

CSS

#searchButton
{
	background-color: #FFF;
}

html { height: 100% }
body 
{ 
	height: 100%; margin: 0; padding: 0;
	position: relative;
}
#NavigationBar
{
	height: 5%;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #AAA;
}

#map-canvas
{
	height: 100%;
	width: 100%;
}

#PageContents
{
	position: relative;
	height: 95%;
	width: 100%;
}

JavaScript

var mapObj = initializeMap()
var geocoder;

function initializeMap() {

    geocoder = new google.maps.Geocoder();
    searchInput = document.getElementById("searchField");
    searchInput.focus();
    var searchButton = document.getElementById("searchButton");
    searchButton.addEventListener("click", codeAddress);
    

	var mapOptions = 
	{
		center: new google.maps.LatLng(53.70854553884514, 10.105501748621464),
		zoom: 3,			
		panControl: true,
		zoomControl: true,
		mapTypeControl: true,
		scaleControl: true,
		streetViewControl: true,
		overviewMapControl: true,
		draggable: true,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
	gMapObj = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    return gMapObj;
}


function codeAddress(e) {
    e.preventDefault();
    var address = searchInput.value;
    geocoder.geocode({
        "address": address
    },

    function (results, status) 
    {
        if (status == google.maps.GeocoderStatus.OK) 
        {
            google.maps.event.addListenerOnce(mapObj, "center_changed", function (e) 
            {
                mapObj.setZoom(21);                
                console.log("Current Zoom Level: " + mapObj.getZoom());
            });
            mapObj.setCenter(results[0].geometry.location);
        } else {
            alert("Search was not successful for the following reason: " + status);
        }
    })
}