JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;dummy=.js"></script>
<div id="map_canvas"></div>

CSS

#map_canvas {
    border: 1px solid black;
    width: 500px;
    height: 400px;
}

JavaScript

var map;
    var polygon;
    var bounds = new google.maps.LatLngBounds();
    var i;
    var myLatLng = new google.maps.LatLng(52.5, 6.6);
    var myOptions = {
        zoom: 5,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

    var polygonCoords = [
    new google.maps.LatLng(52.524268, 13.406290),
    new google.maps.LatLng(53.551084, 9.9936817),
    new google.maps.LatLng(51.508129, -0.1280050),
    new google.maps.LatLng(52.370215, 4.8951678),
    new google.maps.LatLng(52.524268, 13.406290) //Start & end point 
    ];

    polygon = new google.maps.Polygon({
        paths: polygonCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: "#FF0000",
        fillOpacity: 0.05
    });
    polygon.setMap(map);

    for (i = 0; i < polygonCoords.length; i++) {
        bounds.extend(polygonCoords[i]);
    }

    // The Center of the polygon
    var latlng = bounds.getCenter();


    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: latlng.toString()
    });