JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id="latitude" value="-34.397" />
   <input type="text" id="longtitude" value="150.644" />
   <a onclick="updatePosition()" href="#" > update </a>

<div id="map"></div>
<script>
 
var myLatlng;
var map;
var infowindow;
var latitude;
var longtitude;
var marker;

loadMap();
function loadMap()
{
    myLatlng = new google.maps.LatLng(54.91252, -1.37664);

    var mapOptions = {
        zoom: 17,
        center: myLatlng
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var contentString = '<h5>The Mew </h5>';

    infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "The Mew",
        animation: google.maps.Animation.DROP
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });
    infowindow.open(map, marker);
}

function updatePosition()
{
    
    var lat= $('#latitude').val();
    var lng= $('#longtitude').val();
    myLatlng = new google.maps.LatLng(lat,lng);
    alert(lat);
    marker.setPosition(myLatlng);
    map.setCenter(myLatlng);
}   
</script>

CSS

#map {
    width: 500px;
    height: 300px;
}