JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
 <div id="map"></div>

CSS

html, body, #map {
    height: 90%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

JavaScript

function initialize() {
  var mapOptions = {
    zoom: 10,
    /*   *****  bounds center is set to 0 ? ****** */
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(
    document.getElementById("map"),
    mapOptions);
  setMarkers(map, outback);
}

var outback = [
  ['Toompine', -27.22026, 144.368591, 4],
  ['Ardock', -27.42610, 144.127242, 5],
  ['Kiandra', -27.51857, 144.060866, 3],
  ['Wirala hq', -27.790213, 144.255581, 2],
  ['Muliana', -27.262170, 144.07273, 1],
  ["Cudgee HQ",   -27.288047, 144.820599, 6],
  ["Jandel", -27.803368, 144.45967, 7],
  ["Carwakie", -27.702354, 144.07296, 8]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    new google.maps.Size(20, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  
  var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
  };
  
 /*   *****  bounds 1 ****** */
  var bounds = new google.maps.LatLngBounds();
  
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
     
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
/*   *****  bounds 2 ****** */    
    bounds.extend(myLatLng);
  }
  /*   *****  bounds 3 ****** */
  map.fitBounds(bounds);
}


google.maps.event.addDomListener(window, 'load', initialize);