JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<input type="text" name="valdata" id="valdata" value="-33.8474, 151.2631" onKeyPress="getmymap()" style="width:250px;"/>
	<br />
        <div style="float:left; position:relative; width:550px; border:0px #000 solid;">
            <div id="map_canvas" style="width:550px;height:400px;border:solid black 1px;"></div>
        </div>

JavaScript

var map;
		var strlatlg;
        function getmymap() {
			strlatlg = document.querySelector("#valdata").value;
            var latlng = new google.maps.LatLng(strlatlg);
            var myOptions = {
                zoom: 16,
                center: latlng,
                panControl: true,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			addMarker(new google.maps.LatLng(strlatlg), map);
        }
        function addMarker(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
            });
            return marker;
        }