JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

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

CSS

body { margin:0; padding:0; }

#map {
    height: 100vh;
    width:100%;
}

JavaScript

var mapOptions = {
    center: new google.maps.LatLng(38.466088, 27.149661),
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    disableDefaultUI: true,
};

var map = new google.maps.Map(document.getElementById('map'),
mapOptions);


var bounds = new google.maps.LatLngBounds();
var i;

// The Bermuda Triangle
var polygonCoords = [
  new google.maps.LatLng(38.498224, 26.952034),
  new google.maps.LatLng(38.497993, 26.953227),
  new google.maps.LatLng(38.499594, 26.953977),
  new google.maps.LatLng(38.499852, 26.953056)
];

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

console.log("----");
console.log(bounds.getCenter().lat() +","+bounds.getCenter().lng());