JSFiddle - React, Tailwind, and code Playground

HTML

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

  function initMap() {
    var myLatLng = {lat: 40.59726025535419, lng: 80.02503488467874};

    var map = new google.maps.Map(document.getElementById('map'), {
      	zoom: 8,
      	center: myLatLng
    });
    
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Your LatLng!'
    });

    var marker2 = new google.maps.Marker({
        position: {lat: 40.60, lng: 80.1},
        map: map,
        title: 'Your second marker!'
    });

    var marker3 = new google.maps.Marker({
        position: {lat: 40.62, lng: 80.5},
        map: map,
        title: 'Your third marker!'
    });
    
    var infoWindow = new google.maps.InfoWindow({map: map});
    
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('Your Location.');
        map.setCenter(pos);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }
  
    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
         infoWindow.setPosition(pos);
    		infoWindow.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }

</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

CSS

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