JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas"></div>

CSS

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

JavaScript

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      zoom: 4,
      center: {
        lat: -28,
        lng: 137
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  // Alice Springs NT 0870, Australia (-23.698042, 133.8807471)
  var origin = new google.maps.LatLng(-23.698042, 133.8807471);
  var left = google.maps.geometry.spherical.computeOffset(origin, 1, 270);
  var bottom = google.maps.geometry.spherical.computeOffset(origin, 1, 180);
  var leftbottom = new google.maps.LatLng(bottom.lat(), left.lng());
  var rectangle = new google.maps.Rectangle({
    map: map,
    bounds: new google.maps.LatLngBounds(leftbottom, origin)
  });
  var bounds = [origin, left, leftbottom, bottom, origin];
  var area = google.maps.geometry.spherical.computeArea(bounds);
  console.log(area);
  var iW = new google.maps.InfoWindow({
    content: area.toFixed(2) + " sq meters",
    position: rectangle.getBounds().getCenter()
  });
  iW.open(map);
  rectangle.addListener('click', function(evt) {
    iW.open(map);
  });
  map.data.loadGeoJson(
    'https://storage.googleapis.com/mapsdevsite/json/google.json', {},
    function(features) {

      map.data.forEach(function(feature) {
        if (feature.getGeometry().getType() == "Polygon") {
          var bounds = [];
          var polyBnds = new google.maps.LatLngBounds();

          feature.getGeometry().forEachLatLng(function(path) {
            bounds.push(path);
            polyBnds.extend(path);
          });
          console.log(bounds);
          var area = google.maps.geometry.spherical.computeArea(bounds);
          console.log(area);
          var iW = new google.maps.InfoWindow({
            content: area.toFixed(2) + " sq meters",
            position: polyBnds.getCenter()
          });
          iW.open(map);
        }
      });

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