Showing/Hiding Overlays

by Vignesh Gopalakrishnan

HTML

<!-- Add an input button to initiate the toggle method on the overlay. -->

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

JavaScript

// This example adds hide() and show() methods to a custom overlay's prototype.
// These methods toggle the visibility of the container <div>.
// Additionally, we add a toggleDOM() method, which attaches or detaches the
// overlay to or from the map.

var overlay;

USGSOverlay.prototype = new google.maps.OverlayView();



function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 19,
    center: {
      lat: 33.678,
      lng: -116.243
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: 'red',
    strokeOpacity: 0,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0,
    map: map,
    bounds: calcBounds(map.getCenter(), new google.maps.Size(30, 30))
  });

  var rectPoly = createPolygonFromRectangle(rectangle); //create a polygom from a rectangle



  rectPoly.addListener('click', function(e) {
    rotatePolygon(rectPoly, 10);
    rectPoly.rotation += 10;
    console.log(rectPoly.rotation)
    overlay.div_.style.transform = 'rotate(' + rectPoly.rotation + 'deg)';
  });

  rectPoly.addListener('drag', function() {
    console.log('Drag end!');

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

    // The Bermuda Triangle
    let polygonCoords = rectPoly.getPath().getArray();

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

    // The Center of the Bermuda Triangle - (25.3939245, -72.473816)
    center = bounds.getCenter();

    overlay.bounds_ = calcBounds(center, new google.maps.Size(30, 30))
		overlay.draw();

  });

  function calcBounds(center, size) {
    var n = google.maps.geometry.spherical.computeOffset(center, size.height / 2, 0).lat(),
      s = google.maps.geometry.spherical.computeOffset(center, size.height / 2, 180).lat(),
      e = google.maps.geometry.spherical.computeOffset(center, size.width / 2, 90).lng(),
      w = google.maps.geometry.spherical.computeOffset(center,...